Breadcrumb

Layout Builder

What is it?

Layout Builder is a visual design tool. It provides a way to section out a basic page so that a variety of layouts can be accomplished. Instead of providing content editors a choice of specific layouts (as Panelizer did), Layout Builder allows for almost limitless possibilities. With Layout Builder, the editor is in control of laying out their content in a way that fits their needs, on a page by page basis. Additional sections can be added quickly and now multiple column regions can be fixed to the grid (centered) or full width. This makes Layout Builder more flexible than Panelizer.  

How to use Layout Builder

Using Layout Builder

Create an Inline (Custom) Block with Layout Builder

Switching Over to Layout Builder from Panelizer

What does it look like?

Sections will divide the content area vertically (grey dashed areas). Each columned area is referred to as a region (blue dashed areas). Within each region, content blocks can be added. These content blocks are all custom blocks, the body block, auto blocks, menus, list views, webforms, etc. 

  • Sections can be divided into 1 column, 2 columns, 3 columns, and 4 columns.
  • Regions can be divided into columns of 25%, 33%, 50%, 66%, 75%, and 100%

Here are three example of layouts created with Layout Builder. The basic page primary content area is comprised of sections and regions to place blocks. No blocks of content have been added yet.

Layout Example - one column screenshot
Example of a one column layout using one section

 

Layout - one column, three column example screenshot
Example of a one column section and a three column section layout

 

Layout example - two column, two column, four column screenshot
Example of two different two column sections followed by a four column section layout