Skip to main content
Logo

Drupal 8’s new Layout Builder module: feel like an architect of your own site!

Blog image

Every half a year or so, all Drupal 8 website owners, administrators, and Drupal developers receive a lucrative gift box. Another minor version of Drupal 8 comes out, full of cool improvements that add more shine to Drupal 8’s benefits. This time, everyone is looking forward to the stable release of Drupal 8.5.0, scheduled for March 7, 2018. And one of the reasons for this impatience is getting the Layout Builder module officially in the core of Drupal. Let’s see what the Layout Builder module does and what makes it awesome.

Drupal 8’s Layout builder module: when experiments prove lucky!

According to Drupal 8’s practices, many great modules start as experiments and then get mature enough to join the core. That’s exactly what will happen with the Layout Builder module.

While Drupal 8.5.0 is in the alpha stage, the Layout Builder is included in it, marked as experimental. But, with the stable Drupal 8.5.0 release, this module is going to be one of its miracles.

The Layout “family” of modules

In his “Update on the Layout Initiative for Drupal 8.4/8.5”, Drupal founder Dries Buytaert wrote that, previously, site builders used two solutions for layouts — the Panelizer and the Panels contributed modules. Drupal 8 needed solutions for that in its core!

So, as of Drupal 8.3, the core already includes the Layout Discovery module that adds a Layout API to it. The Layout “family” also includes the Layout Library contributed module, as well as experimental core modules such as Field Layout and today’s star — Layout Builder.

The job of Drupal 8’s Layout Builder module

The Layout Builder module lets you create and edit layouts for various sections on your site. You can play with them by choosing among the predefined layouts, adding blocks to them, swapping elements, managing the display, and so on.

This further increases the flexibility of Drupal. It becomes more and more like Legos, letting anyone feel like a true architect.

Working with the Layout Builder module

Let’s see how you can manage layouts for a particular content type of items using the Layout Builder. First of all, you will need to enable the Layout Builder module.

You will quickly notice a big difference: your site’s content type now has a “Manage layout” button instead of the traditional fields in the “Manage display” tab (admin/structure/types/manage/your-content-type-name*/display/default). No worries, all these traditional options will be available in another format during your next steps.

Layout Builder module

By pressing the “Manage layout” button, you are taken to the layout page for the corresponding content type items (admin/structure/types/manage/your-content-type-name*/display-layout/default).

Click “quick edit” or “configure” options next to each block. They will open the settings tab to the right.

The “Add section” button will let you choose among various predefined layouts that have different number of elements.

drupal 8 layout builder add layout

The “Add block” buttons will display the blocks that can be added to your layout. You can drag and drop the layout elements, and use the “Save Layout” or “Cancel Layout” button to save or erase your work.

drupal 8 layout builder add block

Every piece of content can also have a unique layout, if you wish. On the “Manage display” tab for the content type, you can also check the option for making each content item individually customizable. Then, to the traditional “View,” “Edit,” and “Delete” buttons above this piece of content, the “Layout” button will be added. You could also check out a video by the core contributor Lee Rowlands.

Wrap-up

Let nothing put strings to your imagination when it comes to your website’s layouts! And the Layout Builder, as of Drupal 8.5.0, will be a great assistant in that.

However, knowing Drupal 8, we can say that it’s just the beginning, and more and more wonderful novelties are always waiting ahead.

If you wish to get the most of new modules or upgrade to Drupal 10, contact our software development agency!

Read Also

  • How We Built a Chatbot That Changed the Game
    Customer Success StoryDrupal

    How We Built a Chatbot That Changed the Game

    Arrow icon
  • Headless Drupal in 2024: React and GraphQL Architecture Overview
    Customer Success StoryDrupalOur TMS Guides

    Headless Drupal in 2024: React and GraphQL Architecture Overview

    Arrow icon
  • Why Drupal Is Your Startup's Secret Weapon 🚀
    DrupalOur TMS Guides

    Why Drupal Is Your Startup's Secret Weapon 🚀

    Arrow icon

Don't miss the chance. Let's work together

Play around with first 100$. Try and add your wishes later.