Layout Builder Sections & Blocks Last Updated April 2025 The Flex page and some other Content Types provide an editor interface called “Layout Builder” with many options for you to create your pages. Because there are so many options you are encouraged to create your own style guide and pattern library of consistent layouts that you use most that are best suited to your content needs. If you wish to explore options, improvements or additions, please contact the web team. You will find the particular capabilities of Layout Builder for your site demonstrated on the Content Editor Guide page, linked to from your Dashboard. On this page: Access Layout Builder Sections Content Blocks Block Types Configuring Blocks Block Fields that are Headings Block Width & Margins Block Variation Styles Readable Line Length Visual Hierarchy & Content Groupings Learn More Access Layout Builder Content Types with this capability have a tab that says “Layout”, in addition to the “Edit,” “View,” and “Clone” tabs. From the Layout tab you can add “Sections” and “Blocks” to create multi-column page layouts. Sections are the top-level building blocks of page layouts. Blocks exist within a Section. Sections Click “+ add Section” to insert a Section and choose the number of Columns. A Section can have up to 4 Columns that are 25% of the width. For Sections with 2 and 3 Columns you can also choose the Column proportions from a drop-down of percentages, for example 25% / 75%. You must also select for your section to fill the “Readable width”, “Container width” or “Full width” of the page. Please read about Readable Line Length, below. You can add a background image or color. You can also remove the padding between Columns or increase and decrease spacing between Sections. Please read about Visual Hierarchy & Content Groupings, below. Content Blocks Click “+ Add block” and a menu will appear with options to add various types of Blocks: Under the heading “Content blocks” you will find Reusable content blocks that you have created and intend to use on multiple pages. OR click “Create content blocks” to insert content with various layouts described in the list of Block Types, below. OR scroll to the bottom where you will find the “Main navigation” block option to add a secondary menu to the page. OR a few of our sites may have other specialty types of Blocks to choose. Block Types Not all sites have all the available Content Block types. Please see the Content Editor Guide page linked to from your Dashboard to see demonstrations of the types on your website. They may include: Feature Content Blocks Hero and Heading 1 (H1 tag) Hero Carousel Ambient Video Gallery Basic Block A Body field with a Rich Text Editor. Blocks for Images Image Link Photo Content Area Accordions / Hide Reveal and Tabs The Flex List Block allows you to creates a simple 2 column layout or content in tabs or accordions. There is also a tab interface on desktop that becomes an accordion interface on mobile. Grid and Float Layout Alignment Blocks Photo Content Area Promo Unit Flex Content Area Featured Highlight Flex List – allows you to creates a simple 2 column layout or accordion / hide reveal or tabs as described above. Menus, Navigation and Way-finding Blocks Quick Links – Creates a block with links in a list. A Variation is available to create a table of contents of jump links to anchors lower on the page, which are great for long scroll pages. A second Variation is available to mimic the Main Navigation – Secondary Menu Block which can be helpful in the unlikely instance when a menu is needed that is not part of the site’s main navigation. Listing Blocks for Content Types News listing – create a block of news items. Event listing – create a block of event items. Profile listing – create a block of profiles items. Configuring Blocks When you select to add one of the above Blocks the browser will pop-up an online form to fill out. Follow the inline instructions and review the demonstrations on the Content Editor Guide on your site for specific details. Inline instructions for images may be inaccurate. Please see the Content Editor Guide. Some of the more complex block types have more instructions linked above. Block Fields that are Headings All Block types have a required Title field that you may decide to display or not. If you check the “Display title” box, the Title is displayed as a Heading level 2. The “Heading” fields in the Content Block types are usually displayed as Heading level 3. The Content Editor Guide linked to from the Dashboard of your website will note the semantic heading level value of the fields in each block type. Be sure that it is accurate in the semantic order of the page. If not, you may need to add a Basic Block with the appropriate heading or use the Body field within the block type to include the heading. Style variations may be applied to headings to help match the desired visual hierarchy while still maintaining the semantic hierarchy. The web team can help strategize work arounds to keep your headers hierarchical. Note that you can add HTML tags <strong> and <em> into some of the text fields. Including the Heading, Subheading, Link text for Call to Action buttons, List of Links fields, Hero Captions and Credits on many of the Block Types. Block Width & Margins All Block types also have the following options to constrain the content to readable width, remove or increase top or bottom margin. Please read about Readable Line Length and Visual Hierarchy & Content Groupings, below. Block Variation Styles All of the Block types have a Variations drop-down, however, not all of our sites have variations for every block type. In other words, selecting one of these options in the configuration may not do anything. Please see the Content Editor Guide page linked to from your Dashboard to see the demonstrations of each block type and the variations available on your site. Readable Line Length Use the Readable width options for text heavy content to create shorter lines of text and improve the legibility and professionalism of your layout. You can configure both Sections and Blocks to display at a Readable width. On a small screen the content will still expand the full width of the window but will have a maximum width, on most sites, around 830 pixels wide. On a responsive website following web design best practices and preferences for typography may not always be possible on all device sizes, but the numerous options you have, should make it possible to get close to your goal. You are encouraged to test layouts by expanding and shrinking your browser window and viewing the page on a mobile device. You may also experiment in the sandbox. Visual Hierarchy & Content Groupings Increase and Decrease top and bottom spacing is available on Blocks and Sections. These options should help you to control the space to reflect desired visual hierarchy and content groupings. Section spacing may result in more similar groupings from large to small screen sizes. On a small screen, Block spacing may result in unintended groupings. Please take care to review the results on both small and large screen sizes. Learn More To better understand the goals and complexity of web typography, check out Google’s Material Design’s, typography, readability and line length tips and the Nielsen Norman Groups article “Legibility, Readability, and Comprehension: Making Users Read Your Words”.
