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
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.
The Content Heading field that appears at the top of the page is a legacy field that supports content that was created with earlier versions of Magento. 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, and 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, we recommend that you leave the Content Heading field empty, and use the Page Builder Heading content type.
Content Heading and other headings
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
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.
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 initially contains a single row, and you can drag additional rows and other content types to the stage from the left panel.
Starting with Magento 2.4.1, content editing is now full-screen only for all areas controlled by Page Builder. This includes 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
When you are working in the Page Builder workspace, your content changes are not fully saved until you click the Close Full Screen () icon in the upper-right corner of the workspace, and then click Save in the upper-right corner for the CMS page, product page, category page, block, or dynamic block.
If you are making significant changes to Page Builder content, we recommend that you increase the Admin Session Lifetime to prevent the session from timing out while you work.
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||Includes rows, columns, and tabs that can be used as containers for other content types.|
|Elements||Includes text, headings, buttons, dividers, and snippets of HTML code that can be dragged to the stage.|
|Media||Includes images, video, banners, sliders, and Google Maps that can be dragged to the stage.|
|Add Content||Adds existing blocks of static or dynamic content, and products from your catalog.|
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
|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.|