Using Layouts in the Web Content Editor (NEW)

What are Layouts?

Layouts may be used in the web content editor to create flexible and intuitive designs by arranging content within responsive layout columns. Layouts allow you to divide a content block into multiple columns, making it easier to organize text, images, and other elements side by side. Because layouts are responsive, the columns automatically adjust to different screen sizes, ensuring your content looks professional and accessible on desktops, tablets, and mobile devices.

Using layouts, you can:

• Build structured sections such as two-column text and image combinations.

• Create balanced multi-column designs for resources, highlights, or callouts.

• Ensure that content remains readable and visually appealing across all devices without additional formatting.

TABLE OF CONTENTS

• Adding layout columns
• Adding images to layout columns
• Selecting and moving columns and layouts
  • Selecting columns
  • Selecting the Entire Layout
• Saving your layout columns

Adding layout columns

1. Click the + button in the Toolbar to open the Add Menu, then select Layout.

2. Choose the layout you'd like to use in your content block. 

3. The layout columns will be added to the editor field, at the position of your cursor.

4. Add or edit content directly inside the layout columns, or copy and paste existing content into them as you normally would when editing content blocks.

Adding images to layout columns

To insert an image, place your cursor inside an active column and follow the steps for Adding an Image to a Content Block.

Images placed inside a column are automatically sized to the column’s width and will scale responsively across all screens.

Selecting and moving columns and layouts

Selecting columns

1. Click inside a column, then open the Quick Access Menu.

2. Use the Quick Access menu to perform the following actions:

• Parent: Selects the parent element (the entire Layout container).
• Add: Adds an element outside of the selected column—but still within the Layout container (Not recommended).
• Move Up: Shifts the column to the left in the layout container.
• Move Down: Shifts the column to the right in the layout container.
• Border: Adds a border to the selected column.
• Spacing: Adjusts the padding around the selected column.

Selecting the Entire Layout

1. Click anywhere inside the layout, then open the Quick Access Menu.

2. Available actions for the layout include:

• Add: Adds an element outside of the selected layout.
  • This feature may be useful if you have trouble selecting outside of the layout.
• Upwrap: Removes all elements from the layout container (Not recommended).
• Move Up: Moves the entire layout element upward in the editor.
• Move Down: Moves the entire layout element downward in the editor.
• Border: Add a border around the layout.
• Spacing: Adjusts padding around the layout.
• Duplicate: Creates a copy of the entire layout.
• Delete: Removes the entire layout.

Saving your layout columns

When you are finished editing your content block, select Save As Draft to preview it on your web page or Submit for Approval to submit it to compliance for review.

Your content block will now display on your draft website.