Discover the power of the Drupal Layout Builder
Drupal Layout Builder and Gutenberg: 2 tools at your service
Drupal Layout Builder and Gutenberg are page creation tools that enable users to design complex page layouts without having to write a single line of code.
Drupal Layout Builder is an integrated feature that offers a drag-and-drop experience for page design. Gutenberg, on the other hand, is the equivalent plugin on WordPress but can also be found on Drupal.
What is a Page Builder?
It's an interface that adds to the tool and allows you to create website layouts using an intuitive graphical interface, and without needing to know how to develop.
They work with various components that can include drag-and-drop blocks, WYSIWYG ("what you see is what you get") text editors and style customization options.
With these tools, users can easily add and organize content elements, images, videos, forms and buttons, and instantly preview the end result of their creation.
The evolution of Drupal Layout Builder
This solution has been designed to be easy to use, even for beginners. It incorporates an intuitive visual interface for creating, customizing and editing pages, blocks and content.
Advanced users who have mastered the basics of code (html, css...) can also use it to create complex layouts, exploiting the many customization features it offers. Drupal Layout Builder, then allows them to save considerable time in building a website.
Gutenberg, an effective tool offered by Wordpress
Gutenberg is a WordPress (which is also a CMS) construction tool, very similar to Drupal Layout Builder. It was launched in 2018, and allows users to create custom pages using a system of easy-to-arrange blocks. It's possible to arrange the various elements of a site visually, again, without the need for technical knowledge.
It offers a particularly rich library of blocks, making it easy to add an image, text or form. Note: comparable comprehensive solutions already existed, such as Elementor, Visual Composer or Beaver Builder.
They are generally compatible with each other. So if you're already using Elementor, it's not a problem.
What are the prerequisites for using Drupal Layout Builder and Gutenberg?
Whether it's Drupal or WordPress, using Drupal Layout Builder and Gutenberg requires certain prerequisites, nothing too complicated as you're about to see!
How to install and configure Drupal Layout Builder?
The module has been available in Drupal Core since version 8.5, which means all you need to do is have completed a migration to Drupal 8 or 9, if you're using an earlier version.
Next, enable its use in the "Manage Display" tab in "Settings" (this is a simple checkbox). This mysterious box will allow you to immediately edit a first page. In this mode, you can manage sections and blocks. You can also easily change their order or move them from blocks by drag-and-drop.
How to install and configure Gutenberg?
Installing Gutenberg is no less straightforward. It's available as a plugin, so you need to install it and then activate it. It then deploys in the interface. You can then edit your blog posts visually, as well as your site's home page. Builders like Elementor expect you to be able to switch from one to the other without damage.
Content types possible with Drupal Layout Builder and Gutenberg
With all this information assimilated, comes the time for practice. So, what can you do with this new tool?
How to add text, images and videos with Drupal Layout Builder
To add text, images and videos with Drupal Layout Builder, simply drag and drop the elements from the interface sidebar.
The module also features advanced customization options for each element, allowing you to change their size, alignment, font, etc.
To add images and videos, you can upload them from your computer or embed them from an external URL. It's also possible to add form fields, tables, code blocks, buttons, icons and much more.
How to use blocks with Gutenberg
To use blocks with Gutenberg, simply select the block icon in the editor and choose the type of block you'd like to add. They are organized into different categories such as paragraphs, images, lists, videos, quotes, etc.
Once you've selected one, you can customize it by attaching text, images, videos and so on. It's also possible to modify the page structure and rearrange blocks by dragging and dropping them where you like.
How to add contact forms and image galleries with Drupal Layout Builder
To add contact forms with Drupal Layout Builder, simply use the Webform module and create a new one. Then, you can simply integrate it into your layout using drag-and-drop.
To add photo galleries, you install the Views module, which lets you create custom views to display images in a slideshow or grid. Then integrate the view into your layout.
Another option is to use the Media module, which makes it easy to manage images and multimedia files. You can then create an image gallery by adding a media gallery block to your layout.
Using widgets with Gutenberg
Gutenberg offers built-in widgets that add extra functionality to your WordPress site.
To use them, simply click on the "Add widget" button in the block editor.
You can then select the widget you want, configure it to your requirements and drag and drop it into the block editor to integrate it into your content.
The widgets offered by Gutenberg include search, calendar, category, tag and recent publication widgets, as well as custom widgets you can create yourself.
Layout Paragraphs, Drupal Layout Builder and Gutenberg: how to choose?
How to choose and determine the tool that best meets your needs and allows you to easily build your site.
The advantages and disadvantages of Layout Paragraphs
Layout Paragraphs is a Drupal module that offers a different approach to layout creation compared to Drupal Layout Builder.
In contrast to Layout Builder, which works with blocks and regions, it uses paragraphs to create more flexible, modular layouts.
Among its advantages are its great flexibility and ease of use. However, it may require some expertise for configuration and integration, and doesn't integrate the same features as Drupal Layout Builder or Gutenberg. Of the three solutions, it undoubtedly requires the most technical expertise.
Advantages and disadvantages of Drupal Layout Builder
There are many advantages, especially for those who know little or nothing about coding. It allows them to create page layouts intuitively and visually. It also enables extensive customization of each content block, as well as real-time previewing.
The major drawback of Drupal Layout Builder is undoubtedly, that it requires a good knowledge of Drupal in general, for a complete and optimal use. True beginners may therefore find themselves in difficulty.
Beware: note that it can also lower site performance if the layouts created are too complex.
Advantages and disadvantages of Gutenberg
Advantages include a highly intuitive user interface, the ability to add dynamic blocks that are constantly evolving, and a large community of developers who can help you with any problems or difficulties.
The solution lets you create quality landing pages very quickly. Practical!
As for its drawbacks, some users have reported a rather steep learning curve, compatibility conflicts with third-party plugins and declining performance when projects are very complex.
How to choose between Layout Paragraphs, Drupal Layout Builder and Gutenberg
The choice between Layout Paragraphs, Drupal Layout Builder and Gutenberg will depend on several factors: your level of technical expertise, your personal preferences, the specifics of your project, but also the technical solution you've favored so far.
If you've already gained significant experience with Drupal or Wordpress, it goes without saying that you'll find it easier to master the tool that corresponds to it. If you're looking for a simple, user-friendly solution for creating pages and articles, Gutenberg is an excellent choice. If you need a more advanced layout system with additional customization features, Drupal Layout Builder or Layout Paragraphs might be a better fit, depending on your level of expertise and design goals.
What kind of projects to use Drupal Layout Builder and Gutenberg for
To make your choice easier, here are some fairly standard use cases. Please note that each project is unique, and the specifics of each must be taken into account, nevertheless these examples may give you some guidance.
Customized website projects with Drupal Layout Builder
For projects requiring a high level of customization, we recommend using Drupal Layout Builder.
Some examples of popular websites that have been built with Drupal Layout Builder be they stores, blogs and information portals (that of the Nasa, of the BBC or the British newspaper The Guardian to name but a few). Thanks to Drupal Layout Builder's flexibility and ease of use, you can create sites that are both attractive and functional in a reasonable amount of time.
Small and medium-sized website projects with Gutenberg
For this type of project, Gutenberg can be a fast, efficient solution that lets you create satisfying layouts without having to code. With its solution composed of a multitude of predefined blocks for text, images, videos, buttons...
Gutenberg will meet most basic needs very well. Blogs, portfolios, landing pages and small business showcase sites will all find a perfect fit.
However, for large-scale projects, Gutenberg is likely to show its limitations, and a solution such as Drupal Layout Builder or Layout Paragraphs may be more appropriate.
Future prospects: sustainable solutions?
How will the two solutions evolve in the years to come? Drupal Layout Builder and Gutenberg regularly offer improvements and additional functionalities.
They benefit from a strong commitment from their respective communities, and their updates are continuous. So they're well positioned to stay at the forefront of the industry. So you can expect to see even more features and possibilities.
Want to know more and share your project with us? Our experts are available to answer all your questions!