Layout Builder

• What is Layout Builder?
• Layout Builder Permissions: Who Gets to Use it?
• Working in the Layout Builder
• Undo Changes in Layout Builder

---

What is Layout Builder?

Layout builder allows you to adjust the arrangement of blocks or panes of content on a page. For example, you can change the number of columns, add or remove the sidebar section, and move blocks of content around or delete them.

• It can only be used with basic pages and web area homepages.
• It is an advanced feature: you must go through the process to get layout builder permissions.

Layout Builder Permissions: Who Gets to Use it?

Those who have attended the "Microsites and Basic Pages,"  or watched the video and taken the quiz will be granted the Layout Builder role.

After you have attended class or taken the quiz, email WebCMS Support (Web_CMS_support@epa.gov) to request the Layout Builder role. How do we know that you have completed the class and quiz? Your name is on record.

1. EPA Web Training Classes: Attend the "Microsites and Basic Pages" training. Both classes cover how to work in the Layout Builder. There is no need to register, just join the Teams meeting at the time of the session.
2. Watch the recorded video of the Microsites and Basic Pages class and take the quiz to qualify for the layout editor role.
   • Microsites and Basic Page
   • Quiz  

Working in the Layout Builder

Once the homepage or basic page has been created and saved, you will see a "Layout" tab above the content in the Admin Panel.

Homepage

When clicking on the Layout tab, you will see the default layout of the page in blocks and sections. A basic layout is put in place when WebCMS Support creates a new web area.

The main content section may include up to 12 blocks, and up to four in a row and four in each column, and two empty sections, one above and one below.  You have the option to add blocks that are the full size of the page.

Basic Page

The default layout includes two block sections for the body and the sidebar, and two empty sections, one above the body and sidebar fields and one below.

Add Blocks to a Section

1. Click on the "+Add section" to add a layout in columns. The default options are:
   • One column
   • One column with sidebar
   • Two column
   • Three column
   • Four column
   • Resource Directory
2. After you select a new layout, it will ask you to label the section/block
3. Scroll to the top and select the "Save Layout" button

Adding Content to a Block

Once you have selected a layout, you can now add "+Add block" sections which are the areas you place your content

1. Click on "+Add block" then click "Create Custom Block" in the dark gray bar on the right
2. Select "Paragraph"
3. In the Configure Block dialogue window, add the Title. Uncheck the "Display Title" box if you don't want it to appear on the page
4. Click the "Add Paragraph" button at the bottom. The rich-text-editor will open
5. When you have added content, click on the "Add Block" button at the bottom, you will now see the content in the Layout Builder
6. Scroll to the top and select the "Save Layout" button

Editing Content in a Block

1. Hover over and click on the Pencil icon at the top right of the block you want to work in. Note: the pencil icon only shows when you hover over it
2. A dropdown will appear
3. Select "Configure" to open the rich-text-editor
4. Make your changes and click the "Update" button at the bottom
5. Scroll to the top and select the "Save Layout" button

Moving or Remove Blocks

You can move the blocks around or delete them.

Moving Blocks

1. Hover over and click on the Pencil icon at the top right of the block
2. In the dropdown, in the dark gray bar on the right, select which area you want to move the block
3. Click the "Move" button
4. Scroll to the top and select the "Save Layout" button

Removing Blocks

1. Hover over and click on the Pencil icon at the top right of the block
2. In the dropdown, in the dark gray bar on the right, select "Remove Block"
3. Click the "Remove Block" button, or cancel
4. Scroll to the top and select the "Save Layout" button

Reminder: So not to lose your work, be sure to scroll to the top and select the "Save Layout" button

Undo changes in Layout Builder

Reverting to an earlier revision won't necessarily restore the layout tab. You may need to select the Discard Changes button at the top of the Layout Builder. Do NOT select the Revert to defaults button. That will remove all content in the layout builder tab.