Designing page layouts

The following page provides an overview creating customizable page layouts. This is achieving using Drupal’s Layout Builder system. The “Flex Page” content type uses Layout Builder. Site builders with appropriate permissions can create other content types that use Layout Builder.

Contents:

Creating a new layout

1. Define a new page

Go to Content > Add Content > Flex Page (/node/add/utexas_flex_page). Provide a page title and save the otherwise empty page. When viewing the blank page, alongside the View, Edit, and Delete tabs is a Layout tab. This will provide an interface for creating layouts and for placing page content in those layouts.

2. Add one or more sections to the page

Click the Layout tab to access the interface for creating layout sections and placing content in layout regions.

Click Add Section to select a new page section with one, two, three, or four columns, or use the existing one-column section.

After choosing a layout, configure the section using the interface shown below:

Section width

• “Container width” leaves the section width with automatically set left/right margins that match the header and footer of the page.

• “Readable width” constrains the section width to 830 pixels for improved user experience when reading long lines of text.

• “Full width of page” displays the section across the full width of the viewport (i.e., no left/right margins).

Background image / background color

To place a background behind the content of a given section use either the Background color or Background image option. Content blocks placed in regions with backgrounds will receive their own white background to maintain color contrast between foreground and background. For a visual effect where there is no white background with the text, use Featured Highlight.

• Images of type .jpg, .jpeg, .png, and .gif are allowed. Animated gif files retain their animation when displayed.

• Optionally add a blur effect to de-emphasize the image content

• The image will fill the entire background section (e.g., both columns of a two-column layout)

Section spacing

• No padding between columns will display 2-, 3-, and 4-column content blocks flush, rather than with whitespace.

• Increase top margin of section will add 2.5 lines of margin above the section.

• Increase top margin of section will subtract 2.5 lines of margin above the section.

3. Place content within the layout

Once section configuration is complete, click the Add block link in the section to create content.

1. Choose either an existing block from the list or select Create content block to make new content. See Inline versus site-wide blocks for more information on creating blocks.

2. Set the block content fields and display options as desired.

3. Press Add block to place the block in the section.

Edit, move, or remove blocks using the contextual links that appear after clicking the “pencil” icon in the upper right corner of a block, as shown below:

Reposition blocks in the layout either by dragging or by using the Move link. This link opens an editing interface for reassigning the block to a different section or region, as shown below:

Control items per row (multi-item block types)

Some block types include multiple items, such as Promo Units or Social Links. When placing a block of this type, content editors may limit items to display as 1, 2, 3, or 4 items per row through the interface shown below:

The display will accommodate the content editor’s specification so long as there is enough space in the container region. Content placed in a narrow sidebar will not accommodate multiple items side-by-side. It will likely display as 1 per row regardless of what setting the content editor has specified.

If none of the limits above are set, content will fill the container with a dynamically-calculated best fit.

Constrain block content spacing

• Blocks with long-running text impede readability. Use the “Constrain content to readable width” setting to improve this, especially in layouts with wide column widths.

• Remove or increase margins on blocks as needed for visual effect.

Put a border, or a border and background on blocks

Apply borders and backgrounds to blocks using the checkboxes shown below:

Note

Site builders can create and configure styles to apply to layout builder blocks and layout builder sections. Read about Layout Builder Styles.