Layout Builder

Click “Page Tasks,” then select "Layout Builder" to open the layout and structure for the page you're on.

ADD SECTIONS TO THE REGIONS

To add a content block to a page using Layout Builder, first look at the parts of the layout. There are Regions, Sections, and Blocks. To remove a section, click on the close icon (as depicted in the below screenshot). Further, you will be provided with an option to the right side of your screen to remove the section. 

To add a content block to a page using Layout Builder, first look at the parts of the layout. There are Regions, Sections, and Blocks. To remove a section, click on the close icon (as depicted in the below screenshot). Further, you will be provided with an option to the right side of your screen to remove the section. 

Add a section to our layout by clicking on the “Add Section” option. You will be provided with options to choose a layout of your choice for your section, on the right side of the screen. For now, let's select the “Two Column Section”.

You will have an option to choose the width for your “Two Column Layout”. Select a “50%/50%” for now. Then click on “Add section”.

Once added, you should be able to see an “Add Block” link for each section.

ADD BLOCKS TO THE SECTION

After choosing your section for the layout, you can add blocks to your section. To add a block just click on “Add Block” and the “Choose a block” option will slide out from the right.

Click on "+ Add Block" and the right sidebar opens with a list of components. Add a simple text block or search for something you're trying to find. The blocks under UnionHall are ready to go with minimal configuration settings.

UnionHall Blocks

CHOOSING A BLOCK
 
Blocks can be chosen from the right by just clicking on them. You can even find blocks by filtering them out by their name using the “Filter by block name” text field.  We will select the “Authored on” content field for now.

When you click on the block you want to add, you’ll be able to adjust the field formatter. Once you’ve configured the formatter, click on “Add Block”.

The “Authored On” content field will be placed on the left side of the block.

After placing the “Authored On” field, you need to save your changes. Save all the changes you have made to your section by clicking on the “Save Layout” option at the top of the Drupal 8 layout page.

Let us try adding some more fields into our layout to further customize our page.

After saving this layout, if you visit an article content type page, you will be able to see a preview of the layout which you just built. 

Important:  When you have added a block and clicked "Save" or "Done," Click the save for the entire layout located at the top of the page. (Figure 6.)