Help Center

Menu

Working with layouts in the Page Builder

This section provides information about working with layouts in the Page Builder. It covers adding a layout to a page, adding content to the content zones, moving content, and deleting layouts from a page.

Adding a layout to a page

A layout can be added to a page in the Page Builder.

In the Outline column or in the Preview column, clicking the block add icon (+) lets you add a text block, a component block, or a layout.

Screen capture showing how to add a layout in the Page Builder
Figure 1. Add a layout option in Page Builder.

Selecting the layout

When adding a layout, the resource browser shows the available layouts under their component sets. Locate, or use the Filter layouts field to locate, the required layout.

Select the layout, then click Select.

Screen capture showing the layout resource browser
Figure 2. Layouts in the Resource Browser.

How the layout is shown in the Page Builder

When the layout is added, it can be seen in both the outline column and the preview column.

The layout is shown with a gray outline area in the outline column.

The block header shows the layout’s name. This is the layout displayName property from the page-layout.yaml file.

The layout zones are shown below the header in the order they are defined in the page-layout.yaml file. Each zone has a striped icon next to its name. This is the zone displayName property from the page-layout.yaml file. Each layout zone shows the block add icon to add content blocks.

The layout zones are shown in the preview column as the page would be rendered. Each layout zone has a dashed border around it. Hovering the mouse cursor over the layout zone shows the same striped icon and name, along with the block add icon to add content blocks.

Screen capture showing how a layout appears in the Page Builder

Layout information

Information about the layout can be shown by clicking the Options icon (…​) and selecting Layout info.

The information shown includes whether the layout is tagged as Development or Production, the version, and the zone name and display name for each of the layout zones.

Screen capture showing layout information dialog
Figure 3. Layout information dialog.

Adding content to a layout zone

Once the layout has been added, you can add content blocks to the layout zones. You can add a text block (as the example image shows) or a component block.

Screen capture showing how to add content blocks to layout zones
Figure 4. Add content blocks to layout zones.

Adding a layout to a layout zone

As well as being able to add text blocks and component blocks to a layout zone, you can also add a layout to a layout zone (that is, a layout inside a layout).

You are limited to two levels of layouts only. An information message appears indicating no further layouts can be added, and you are prevented from selecting layouts to add.

Screen capture showing how to add a layout inside another layout
Figure 5. Add a layout inside another layout.

Moving content blocks

You can move a content block (Text, Component, and even a layout) from one layout zone to another, from outside the layout to a zone in the layout, and also from a zone inside the layout to outside the layout.

This is done in the outline column.

Locate the content block (or the layout) you want to move from its current location, and click the Options icon (…​). Select Move. The possible target locations are highlighted by pulsing their block add icons (+). Click the required location. Select Move here. The content block (or layout) is moved to the selected location.

Screen capture showing how to move content blocks between layout zones
Figure 6. Move content blocks between layout zones.

Deleting a layout from the page

To delete a layout from a page, in the Outline column, click the Options icon (…​) on the layout.

Select Delete.

The layout (and any content blocks currently in the layout zones) is deleted from the page.

Screen capture showing how to delete a layout from a page
Figure 7. Delete a layout from a page.

When personalizing content in Page Builder, you cannot personalize the layouts themselves.

You can, however, personalize the content blocks that have been added to the layout.

Layouts cannot participate in A/B tests.

The content blocks that have been added to the layout can.