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. It also covers adding content to the content zones, moving content, and deleting layouts from a page.

Adding a layout to a page

Add a layout to a page in the Page Builder.

In the Outline column or in the Preview column, select the block add icon (+) to 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 the required layout using the Filter layouts field. 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 name and zone names match those defined in the page-layout.json file.

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

If a layout contains properties, for example, to toggle a sidebar or set widths, a Properties icon (gear or slider) appears in the block header. Note that this icon is contextual. It only appears if the layout’s page-layout.json file includes a properties object. If no properties are defined, the icon is hidden and the layout behavior remains standard.

Layout information

To show information about the layout, select the Options icon (…) and select Layout info. The information shown includes whether the layout is tagged as Development or Production. It also includes the version and the zone name and display name for each of the layout zones.

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 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.
Select the Options icon (…) and 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 moves 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, select the Options icon (…) on the layout in the Outline column. Select Delete. The layout and any content blocks currently in the layout zones are 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.

Help Center

Menu