DocumentationCommercePage Builder

Page Builder setup

Last update: Mon Aug 21 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

CREATED FOR:

  • Beginner
  • Intermediate
  • User

When enabled in the configuration, Page Builder is the default content creation tool for CMS Pages, Blocks, and Dynamic Blocks. In addition, the Enable Advanced CMS button offers Page Builder as an option for Categories and Products. You can also choose the default page layout that you want to use for products, categories, and CMS pages. Page Builder is not available for newsletter content, which uses the WYSIWYG editor.

NOTE
When installed, Page Builder overrides the default setting for the Mask for Meta Description configuration field. The value is changed from {{name}} {{description}} to {{name}}.


You can access this setting when you go to Stores > Settings > Configuration, expand Catalog, and choose Catalog underneath. The Mask for Meta Description field is in the Product Fields Auto-generation section.
NOTE
An Admin user must have Content permissions for their role scope to see Edit with Page Builder buttons and be able to use Page Builder.

For more information about the Content Management Advanced Tools configuration options, see the Configuration Reference Guide.

Configure Page Builder

  1. On the Admin sidebar, go to Stores > Settings > Configuration.

  2. In the left panel under General, choose Content Management.

  3. Expand Expansion selector Advanced Content Tools and verify that Enable Page Builder is set to Yes.

    img-md
    w-600 modal-image
    Advanced Content Tools

  4. If you are ready to set up Google Maps, do the following:

    • If necessary, follow the Get API Key instructions, and then copy and paste your Google Maps API Key.

    • To change the Google Maps Style, paste the JSON code that is generated by the Google Maps APIs Styling Wizard.

    note note
    NOTE
    See Media - Map for more information about using Google Maps in your Page Builder content.

  5. To configure the number of guidelines in the Page Builder column grid, do the following:

    • For Default Column Grid Size, enter the default number of columns that you want to appear in the grid.

    • For Maximum Column Grid Size, enter the largest number of columns that you want to be available in the grid.

    note note
    NOTE
    See Layout - Column for more information about using the column grid when working with your Page Builder content.

  6. When complete, click Save Config.

Configure default layouts

  1. On the Admin sidebar, go to Stores > Settings > Configuration.

  2. In the left panel under General, choose Web.

  3. Expand Expansion selector Default Layouts and do the following:

    img-md
    w-600 modal-image
    Default Layouts

    For more information about the Web configuration options, see the Configuration Reference Guide.

    • Choose the Default Product Layout that you want to use for product pages.

    • Choose the Default Category Layout that you want to use for category pages.

    • Choose the Default Page Layout that you want to use for CMS pages.

  4. When complete, click Save Config.

Disable Page Builder

NOTE
Disabling Page Builder replaces the Advanced Content Tools with the WYSIWYG editor, and might cause display errors in the storefront. Content that you previously created with Page Builder might not be editable from the Admin.

  1. On the Admin sidebar, go to Stores > Settings > Configuration.

  2. In the left panel under General, choose Content Management.

  3. Expand Expansion selector Advanced Content Tools and set Enable Page Builder to No.

  4. When prompted to confirm, click Turn Off.

  5. When complete, click Save Config.

  6. When prompted, refresh any invalid cache.

recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d