The Drupal 8 Layout Builder Module: How It Revolutionizes Content Layout Creation in Drupal

What's your favorite tool for creating content layouts in Drupal? Paragraphs, Display Suite, Panelizer or maybe Panels? Or CKEditor styles & templates? How about the much talked about and yet still experimental Drupal 8 Layout Builder module?

Have you "played” with it yet?

As Drupal site builders, we all agree that a good page layout builder should be:
 

1. flexible; it should empower you to easily and fully customize every single node/content item on your website (not just blocks)
2. intuitive, super easy to use (unlike "Paragraphs", for instance, where building a complex "layout", then attempting to move something within it, turns into a major challenge)
    

And it's precisely these 2 features that stand for the key goals of the Layout Initiative for Drupal: 

To turn the resulting module into that user-friendly, powerful and empowering page builder that all Drupal site builders had been expecting.

Now, let's see how the module manages to “check” these must-have strengths off the list. And why it revolutionizes the way we put together pages, how we create, customize and further edit layouts.

How we build websites in Drupal...
 

1. The Context: A Good Page Builder Was (Desperately) Needed in Drupal

It had been a shared opinion in the open source community:

A good page builder was needed in Drupal.

For, even if we had a toolbox full of content layout creation tools, none of them was “the One”. That flexible, easy to use, “all-features-in-one” website builder that would enable us to:
 

• build complex pages, carrying a lot of mixed content, quick and easy (with no coding expertise)
• fully customize every little content item on our websites and not just entire blocks of content site-wide
• easily edit each content layout by dragging and dropping images, video content, multiple columns of text and so on, the way we want to
   

Therefore, the Drupal 8 Layout Builder module was launched! And it's been moved to core upon the release of Drupal 8.6.

Although it still wears its “experimental, do no use on production sites!” type of “warning tag”, the module has already leveled up from an “alpha” to a more “beta” phase.

With a more stable architecture now, in Drupal 8.6, significant improvements and a highly intuitive UI (combined with Drupal's well-known content management features) it stands all the chances to turn into a powerful website builder.

That great page builder that the whole Drupal community had been “craving” for.
 

2. The Drupal 8 Layout Builder Module: Quick Overview

First of all, we should get one thing straight:

The Drupal 8.6. Layout Builder module is Panelizer in core!

What does it do?

It enables you, the Drupal site builder, to configure layouts on different sections on your website.

From selecting a predefined layout to adding new blocks, managing the display, swapping the content elements and so on, creating content layouts in Drupal is as (fun and) intuitive as putting Lego pieces together.

Also, the “content hierarchy” is more than logical:
 

• you have multiple content sections
• you get to choose a predefined layout or a custom-design one for each section
• you can place your blocks of choice (field blocks, custom blocks) within that selected layout
   

Note: moving blocks from one section to another is unexpectedly easy when using Layout Builder!
 

3. Configuring the Layout of a Content Type on Your Website

Now, let's imagine the Drupal 8 Layout Module “in action”.

But first, I should point out that there are 2 ways that you could use it:
 

1. to create and edit a layout for every content type on your Drupal website
2. to create and edit a layout for specific, individual nodes/ pieces of content
    

It's the first use case of the module that we'll focus on for the moment.

So, first things first: in order to use it, there are some modules that you should enable — Layout Builder and Layout Discovery. Also, remember to install the Layout Library, as well!

Next, let's delve into the steps required for configuring your content type's (“Article”, let's say) display:
 

• go to Admin > Structure > Content types > Article > Manage Display
• hit the “Manage layout” button
   

… and you'll instantly access the layout page for the content type in question (in our case, “Article”).

It's there that you can configure your content type's layout, which is made of:
 

• sections of content (display in 1,2, 3... columns and other content elements)
• display blocks: tabs, page title...
• fields: tags, body, title
   

While you're on that screen... get as creative as you want:
 

• choose a predefined layout for your section —  “Add section” —  from the Settings tab opening up on the right side of the screen
• add some blocks —  “Add block”; you'll then notice the “Configure” and “Remove” options “neighboring” each block
• drag and drop the layout elements, arranging them to your liking; then you can click on either “Save Layout” or “Cancel Layout” to save or cancel your layout configuration
   

And since we're highly visual creatures, here, you may want to have a look at this Drupal 8 Layout Builder tutorial made by Lee Rowlands, one of the core contributors.

In short: this page builder tool enables you to customize the layout of your content to your liking. Put together multiple sections — each one with its own different layout —  and build website pages, carrying mixed content and multiple layouts, that fit your design requirements exactly.
 

4. Configuring and Fully Customizing the Layout of a Specific Node...

This second use case of the Drupal 8 Layout Builder module makes it perfect for building landing pages.

Now, here's how you use it for customizing a single content type:
 

• go to Structure>Content types (choose a specific content type)
• click “Manage display” on the drop-down menu 
• then click the “Allow each content item to have its layout customized” checkbox
• and hit “Save”
   

Next, just:
 

• click the “Content” tab in your admin panel
• choose that particular article that you'd like to customize
• click the “Layout” tab
   

… and you'll then access the very same layout builder UI.

The only difference is that now you're about to customize the display of one particular article only.

Note: basically, each piece of content has its own “Layout” tab that allows you to add sections, to choose layouts. 

Each content item becomes fully customizable when using Drupal 8 Layout Builder.
 

5. The Drupal 8.6. Layout Builder vs Paragraphs

“Why not do everything in Paragraphs?" has been the shared opinion in the Drupal community for a long time.

And yet, since the Layout Builder tool was launched, the Paragraphs “supremacy” has started to lose ground. Here's why:
 

• the Layout builder enables you to customize every fieldable entity's layout
• it makes combining multiple sections of content on a page and moving blocks around as easy as... moving around Lego pieces 
   

By comparison, just try to move... anything within a complex layout using Paragraphs:
 

• you'll either need to keep your fingers crossed so that everything lands in the right place once you've dragged and dropped your blocks
• or... rebuild the whole page layout from scratch
   

The END!

What do you think:
 

Does Drupal 8 Layout Builder stand the chance to compete with WordPress' popular page builders?

To “dethrone” Paragraphs and become THAT page layout builder that we've all been expected for? Or do you think there's still plenty of work ahead to turn it into that content layout builder we've all been looking forward to?