Using the Layout Builder
Layout Builder is...
- Accessible on Basic Pages
- Site builder and editor enabled
How to Use the Layout Builder
Layout Tab
A tab labeled "Layout" gives an authorized editor access to change the layout of a Basic page.
In Layout mode, the page will be divided out into sections where blocks can be added. Each section has its own columned layout where blocks are placed.
For example, one section can be set as a 25/75 column with a menu block on the left and body content on the right, and a second section can be one column that displays a call to action custom block.
Add Section
Add Section allows for changes in columns for that section of the page.
-
Click on +Add Section
-
Select a columned layout for this section. You'll be able to make choices about the columns after selecting an initial number of columns.
-
Configure section:
-
First select the column widths (they read left to right).
-
Decide whether the layout is full width (stretch the screen) or centered (fit to the grid of the site).
-
Select the padding options. Padding will affect the amount of space between the content of the block and the "walls" of the block.
-
Select margin options. Margin will affect the spacing between this block and the other content around it (other blocks, header, footer, etc.)
-
Advanced Settings should be used only by those who understand CSS classes. These fields are available to add classes to style the section or state when on mobile a different order is necessary for the columns. Zurb Foundation Classes can be utilized or a custom class.
-
-
Click "Add section"
-
The new section is now available to populate with blocks, otherwise known as content.
This example displays a two column 33/66 section.
Notes
- Be sure to save your changes often using the "Save layout" button.
- "Revert to defaults" will revert the page back to what it was initially before anything was placed.
- "Discard changes" will discard any unsaved changes.
- Sections can be re-configured after being added by clicking on "Configure section" above the section to configure.
- Show content preview will show and hide a preview of the blocks.
- The "x" near "Configure section" will remove that section from your page. There will be a warning once it is clicked that the action cannot be undone. You can either continue to remove or cancel.
- Sections appear as gray dashes areas, but nothing is actually placed in those gray areas, it's more like an indication of the separation for the sections
- Regions appear with blue dashes and blocks can be placed within these regions.
-
For sites that are, or were, using Panelizer, you will see a blue add block region with no dashes. When initially installed, the system auto uses a default layout that isn't compatible with Layout Builder. These no-dashed blue block areas need to be removed/replaced.
Add Block
Blocks refer to your content - body block, custom blocks, menus, webforms, list views, auto blocks, etc.. Anything created, whether it is the main body content or an accordion, these are known as "blocks". These blocks can be added into regions (blue area) of sections.
-
Click on +Add Block in the region you want to add content.
-
Choose a block that has already been created from the list below. A block can be filtered by name. Here is a breakdown of the most useful selections.
Auto Blocks – auto generated blocks Drupal creates, such as a Latest Events block
Content fields – The Body block, this is the block that appears in edit mode, always the first area to edit when creating a new basic page.
Custom – Any custom block created within the site that is also stored in the Custom Block Library
Forms – Any forms created using the basic forms module
Menus – All menus, including additional menus created
Views – These are exposed views created to display certain information (such as a listing or grid view)
Webform – To display a block for a Webform created
(Note: To Create a custom block in Layout Builder, follow the Layout Builder's inline block tutorial. Inline blocks are treated differently than custom blocks created within the block library.)
-
In the example, under Custom, a block labeled "Button Bar" was selected. In the Configure block window, select whether or not to display the title on the page and if that title should be changed. Select the view mode. Typically the view mode will be "default". If the section selected was configured as full width, an individual block in that section can optionally be changed to "centered content", and the content will center, with the block itself still full width. (CNAS Theme may have additional view modes depending on the block chosen.)
Click Add Block.
Configure, Move, and Remove
If "Show content preview" is checked on, you'll see what the blocks look like in the section. Notice in the example that the Button Bar doesn't look very good in the 33% section. Hover over the block and click on the pencil icon. This reveals a way to "configure", "move" or "remove block".
Configure – This option brings up the "Configure block" dialog box again to select whether to display title and which view mode to use.
Move – This option brings up a sidebar that allows you to select a region the block should move to as well as a drag and drop option to move the block above or below items within that same region.
Remove Block – This will remove the block from that section, or region, of the page. If the block existed in the Custom Block Library, it will not be deleted. If the block was created using the Layout Builder, it does not live in the Custom Block Library and therefore will be completely deleted. Removing a block will ask for a confirmation of removal as a warning.
Drag & Drop - Drag and drop is available for blocks as well. When a crosshair appears, click down on the block and drag to a new blue dashed region.
In this example, the button bar is being dragged from the first column region to the second column region. When a yellow highlight appears, you can drop the block and it will be placed in that region.
