Layout Builder

Layout Builder allows you to configure a page by designating sections of the page and within sections, configuring columns and adding blocks of content. The first step to using Layout Builder is to create a Basic Page.

Access the Layout Builder

To access the Layout Builder feature, you need to first create a Basic Page, provide it a title, and then click Save. At this point, the Layout button will become available. When you click the Layout button the new interface will appear.

Add a Section

Build rows, called Sections, with varying columns within which to add blocks.

1. Click Add Section.
2. Select the numbers of columns in the configuration sidebar.

Configure a Section

1. Layout

   1. Column Width: If you select multiple columns you will see the column width options: select one of the options.

      Note: Each column number choice has different layout options. A one column section can be configured to be contained or edge-to-edge. A two column sections has options for one third/ two thirds, half and half or two thirds/ one third layouts. etc.

   2. Container Width: Choose whether hero units, slider, or video reveals display full width.
      1. Contained: the block will have padding on the right and left so the left margin of the block aligns with the page title.
      2. Edge-to-edge: the block will expand from browser edge to browser edge. The following blocks will display full width: hero units, slider, and video reveals
2. Background
   1. Background color: Option to select a background color.
   2. Background Image: Upload or select a background image.
   3. Image Overlay Color: Only applied if a background image is chosen.
   4. Background Effect: Choose an effect for the background image.
   5. Content Frame Color: Choose a color for the inner frame of the content.
3. Spacing
   1. Configure Top, Bottom, Right and Left margin padding. Padding required with either px or %

Edit a Section

Configure Section icon - Opens the section configuration window with options to style and configure the relevant section.

Add a Block

1. Click Add Block.
2. Choose Create a Content Block to create a new block.
3. Select the block type from the list of options.

4. You will need to choose an option for the new block; inline or reusable.

   Note: Select Inline block if the block content will only appear on this page. Select Reusable block  if the block content needs to appear on multiple pages. When in doubt create an Inline block. Inline blocks may be converted to reusable blocks at a later time if needed. Learn more about Inline and Reusable blocks.

5. Choose a reusable block from the list of blocks under the Content block section. You may also use the filter to find an existing reusable block or a system block such as the Campus News block.

Move a Block

Once you have created a text block on a page, you may move it to a different section on the page.

1. You may drag the block to a different location on the page where there is an Add block button. or Click the Edit icon (pencil) in the top right corner of the block.
2. Choose Move.
3. Use the Region dropdown to select a different region.
4. Reorder the blocks in the section column using the crosshairs or row weights.
5. Click Move when you are done.

Remove a Block

You may remove a text block on a page, you may move it to a different section on the page.

1. Click the Edit icon (pencil) in the top right corner of the block.
2. Choose Remove.
3. Confirm the removal. Click Remove again.

Delete a Section

1. Click the X to the left of the text Configure Section.
2. This action cannot be undone so you will be asked to confirm removal.
3. If the section contains Inline blocks, the blocks will also be deleted from the page.
4. If the section contains Reusable blocks, the block will be retained on the site.

Save Layout

1. Click Save layout.

Watch Video