Page Builder Workspace

Last update: September 7, 2023

CREATED FOR:

Beginner
Intermediate
User

When Page Builder is enabled, the Content section and content creation process are modified to take advantage of the advanced Page Builder tools for CMS pages, product and category pages, blocks, and dynamic blocks. This section includes a Content Heading field, a preview of the content, and easy access to the full-screen Page Builder workspace.

Content section with Page Builder preview

Content Heading

Because search engines look for level one (H1) headings, adding a level one heading is an easy way to ensure that the page is indexed correctly.

NOTE

The Content Heading field that appears at the top of the page is a legacy field that supports content that was created with earlier Commerce releases. It is not, however, part of Page Builder. The Content Heading is formatted as an H1 heading according to the style sheet that is associated with the current theme. It is positioned just above the active content area that is defined by the Page Builder stage.

For the best control over the positioning and format of headings of all levels, it is recommended that you leave the Content Heading field empty, and use the Page Builder Heading content type.

Content Heading and other headings

Preview

When you expand the Content section and there is existing content created with Page Builder, it displays a preview of the content as it would appear in a page. Click Edit with Page Builder or inside the content preview area to open the Page Builder workspace, where you can make any needed updates.

Product description preview

NOTE

For the product and category forms, this content preview is enabled by default, but can be disabled. If performance suffers due to loading the preview, you can disable the preview in the Content Management configuration settings.

Stage

When you open the Page Builder workspace from the preview, the stage is the primary work area where you can create and format content, and even make quick edits to live content. The stage is initially empty, providing the design surface where you can drag rows, columns, and tabs from the left panel.

NOTE

Starting with the 2.4.1 release, content editing is now full-screen only for all areas controlled by Page Builder—CMS pages, product and category pages, blocks, and dynamic blocks. Full-screen editing puts the focus on your content and provides a view that better matches the user experience on the storefront.

Stage with page content

NOTE

If you are making significant changes to Page Builder content, it is recommended that you increase the Admin Session Lifetime to prevent the session from timing out while you work.

Viewports

A viewport is the visible area of a web page that a user sees. In full-screen design mode, the viewport buttons are displayed above the Page Builder stage to show you the content as the site user sees it on the storefront.

Viewport buttons

Page Builder also defines breakpoints for viewports. Breakpoints define minimum and maximum widths within which certain styles are applied. The Page Builder viewports provide the following content breakpoints:

Desktop breakpoint—min-width: 1024px. This breakpoint applies styles defined for viewport widths that measure 1024 pixels and wider.
Mobile breakpoints—max-width: 768px, min-width: 640px. These breakpoints apply styles defined for viewport widths between 768 pixels and 640 pixels.

Page Builder viewports provide two features: content previews and breakpoint settings.

Content previews

By default, Page Builder provides two viewport previews:

Desktop — Displays the content preview without a predefined width. Desktop-defined styles (using breakpoint minimum width of 1024 pixels) are still applied to the page. But the Desktop viewport width is defined by settings for container content types, like Rows. Selecting the Desktop viewport shows how your content is styled on the storefront when the browser page width is 1024 pixels and wider.
Mobile — Displays the content preview at a predefined width of 768 pixels. Unlike the Desktop viewport, the Mobile viewport does show your page content at a width of 768 pixels, along with the styles defined for the breakpoint widths of 768 pixels (maximum) and 640 pixels (minimum).

Breakpoint settings

The viewport buttons also provide the option to apply different breakpoint styles to content types based on the selected viewport. By default, Page Builder provides breakpoint settings for the Minimum Height fields of Rows, Columns, Tabs, Tab Items, Banners, Sliders, and Slides. When you select the Mobile viewport, then open the editor for one of those content types, you can enter field values specific to the Mobile viewport breakpoints. Content type fields that allow specific breakpoint settings display an icon to the right of the field, similar to the following example for a Row:

Icon indicator for breakpoint setting

Panel

The Page Builder panel is located to the left of the stage, and contains content types that can be dragged to the stage. A container that is specific to the content type then appears with a toolbox of options. Content types are organized in the panel as follows:

Layout

The Layout section of the Page Builder panel is used to add rows, columns, or tabs to the stage. When you drag a content type from the panel to the stage, a container appears with a toolbox of options that are specific to the content type.

By default, the Page Builder stage is empty. As you drag layout content types from the panel to the stage, you can place them above, below, or inside other layout containers on the page. Rows can only be added directly to the stage.

Page Builder panel with layout content types and stage

Layout content type

Description

Row

A new row can only be dragged from the panel to the stage, and positioned either above or below another row, tab, or column group. You can also use the Duplicate option to make a copy of an existing row.

Column

A column can be dragged from the panel to the stage, or to rows and tabs. The maximum number of columns that can be added is determined by the number of grid divisions that is specified in the configuration.

Tabs

A single tab can be dragged from the panel to the stage, or to rows and columns. Additional tabs can be added from the toolbox.

Elements

Use the Elements section of the Page Builder panel to add text, headings, buttons, dividers, and HTML code to any layout container on the Page Builder stage. When you drag a content type from the panel to either a row or column, or to a tab set on the stage, a container appears. Use the content type toolbox to access the settings that are specific to the type.

Page Builder panel with Element content types

Element content type

Description

Text

Adds a text container and editor to the stage.

Heading

Adds a heading container to the stage.

Buttons

Adds a container for either an individual button, or set of buttons to the stage.

Divider

Adds a container for a divider to the stage.

HTML Code

Adds a container for HTML code to the stage.

Media

Use the Media section of the Page Builder panel to add images, video, banners, sliders, and Google Maps to any layout container on the Page Builder stage. When a media content type is dragged from the panel to the stage, a container appears with a toolbox of options that are specific to the content type.

Page Builder panel with media content types

Media content type

Description

Image

Adds an image container to the stage.

Video

Adds a video container to the stage.

Banner

Adds a banner container to the stage.

Slider

Adds a slider container to the stage.

Map

Adds a Google Maps container to the stage.

Add Content

Use the Add Content section of the Page Builder panel to add existing content to the Page Builder stage. When you drag a media content type from the panel to the stage, a container appears. Use the content type toolbox to access the Settings that are specific to the type.

Page Builder panel with Add Content types

Content type

Description

Block

Adds an existing block to the stage.

Dynamic Block

Adds an existing dynamic block to the stage.

Products

Adds a list of products to the stage.

Product Recommendations

Adds a recommendation unit to the stage.

Toolbox

Each content container on the stage has a toolbox of options. The options vary by content type, but typically include Move, Settings, Hide/Show, Duplicate, and Remove.

Show the toolbox

Hover over the container to display the toolbox and choose an option.

Row toolbox options

Toolbox options

Option

Icon

Description

Move

Moves the current content container to another position on the stage.

Add

Adds children elements such as a button, slide, or tab.

(label)

Identifies the container content type.

Settings

Opens the content container properties in edit mode.

Hide

Hides the current content container.

Show

Shows the current content container.

Duplicate

Makes a copy of the current content container.

Remove

Deletes the current content container from the stage.

NOTE

Hidden elements are stored in the database and invisible to customers. However, these elements are visible to search engines and other bots that crawl your site. They are also returned as part of the content if requested through an API call with an attribute of invisibility, unless you remove them from the stage.

recommendation-more-help