Layout Builder Sections & Blocks Last Updated November 2025 The Flex page and some other Content Types provide an editor interface called “Layout Builder” with many options for creating a web page. Since there are so many options, site owners are encouraged to devise their own style guide and pattern library of consistent layouts best suited to their site’s content needs. If you wish to explore options, improvements or additions, please contact the web team. A demonstration of the particular capabilities of Layout Builder for each site is available on the Content Editor Guide page, linked to from the site’s Dashboard. On this page: How to Access Layout Builder How to create the columns and Sections of a page How to add content Blocks Block Types Features and Hero Content Body field with a WYSIWYG (What You See Is What You Get) Rich Text editor For adding Images and Image Links Accordions / Hide Reveal and Tabs Grid and Float Layout Alignment Buckets Menus, Navigation and Way-finding, including Quick Links Listing Blocks for News, Events and Profiles Configuring Blocks Block Fields that are Headings Block Width & Margins Block Variation Styles Line Length and Readability 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 whether the Section should fill: the Full width of the screen, the Container width, which aligns with the content in the header and footer of the page, (responsive, but approximately 1470 pixels) or the Readable width (responsive, but approximately 830 pixels). Please read about Readable Line Length, below. You can add a background image or color to a Section. 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 Block types: Under the heading “Content blocks” you will find Reusable content blocks that have been created on your site. They are intended to be used on multiple pages. They are good for things like contact info. Select one to add it to your page. OR to create new content just for this page, 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 on a few of our sites there may be 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 Most feature Blocks types are designed to perform well with large images and usually perform well even in Full width content Sections. Most of the other block options are not recommended for Full width display. Hero – includes a Heading 1 (H1 tag) Hero Ambient Video Carousel – slideshow Gallery – thumbnail gallery that pops up image to fill the screen. Featured Highlight – small image with a background color. Basic Block Body field with a Rich Text Editor similar to a word processor. Used primarily for text but if none of the other options work for your content needs their may be ways the web team can help create unique solutions by adding to the Source code. Blocks for Images Image Link Photo Content Area – float content next to an image. Add images in a Body field – Within any Body field set to use the Flex HTML text format, you’ll find options for images, including the option to display the exact image you uploaded. Do not create linked images in the Body field, instead use the Image Link block type. Accordions / Hide Reveal and Tabs The Flex List allows you to creates a simple 2 column layout or content in tabs or accordions. There is also an option to have a tab interface on desktop that becomes an accordion interface on mobile. If you need more options for configuring a hide reveal than the Flex List Block provides, you can create it in the source code of a Rich Text field. Grid and Float Layout Alignment Blocks Photo Content Area – float content next to or above an image. Featured Highlight – another option for floating content next to an image. Promo Unit – create a grid of similar content “buckets” with text, buttons and images. Flex Content Area – another version for creating content “buckets.” Flex List – allows you to creates a simple 2 column layout in addition to the accordion / hide reveal or tabs, as described above. Tabular Data in Tables – can be added in Body fields using the Rich Text editor Menus, Navigation and Way-finding Blocks Quick Links creates a block with links in a list. It has an option which allows you to to create a table of contents with jump links to anchors lower on the page, which are great for long scroll pages. It also possible to use it 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 Create a block of teaser summaries linking to: News listing Event listing Profile listing 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. Some of the more complex block types have more instructions linked above, but generally creating blocks is pretty intuitive. A few important things to note are below. 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 The 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 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. Line Length and Readability You can configure the display to fill Full width, Content Width or Readable width. If you select Readable width, on a small screen the content will still expand the full width of the window. On large screens the maximum width is approximately 830 pixel. Use the Readable width options for text heavy content to create shorter lines of text and improve the legibility and professionalism of your layout. 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 As mentioned above you have a lot of options, such as increasing and decreasing spacing. Many of the options should help you control the space to reflect desired visual hierarchy and content groupings. But it is possible that a small screen may look different since it’s all in one column and result in unintended groupings. Always review the results of your configurations 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”.
