DocumentationCommercePage Builder

Page Builder Walkthrough part 1: simple page

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

CREATED FOR:

  • Beginner
  • Intermediate
  • User

Follow this three-part exercise to become familiar with the Page Builder workspace by creating a simple page that illustrates how easy it is to create content-rich pages of your own design.

w-700 modal-image
Simple Page example
NOTE
These walkthrough exercises are updated to reflect recent changes to the Page Builder workspace in the 2.4.1 release. If you are using an earlier Adobe Commerce release, use the Page Builder walkthrough exercises included in the Commerce 2.3 User Guide.

Before you begin

Before starting this exercise, it is recommended that you increase the Admin Session Lifetime to prevent the session from timing out while you work.

Verify the required Content Management configuration settings:

Download the walkthrough image assets

  1. Download the simple-page-assets file and save the file to your local system.

  2. Navigate to the downloaded file and extract the zipped files.

    On a Windows system, right-click and choose Extract All files. Then, choose the destination folder and click Extract.

    On a Mac system, you can simply double-click the zip file and the move the extracted files to the destination folder.

    The folder contains the following image files:

    img-md
    w-500
    Page Builder walkthrough files - simple page assets

Follow the three parts of this walkthrough in order.

Part 1: Full-Bleed Row with Banner

In this part of the Simple Page exercise, you create a page that has a full-bleed row and banner. The row has different background images for desktop and mobile devices.

w-700 modal-image
Page Builder full bleed row with banner

Step 1: Create a page

  1. On the Admin sidebar, go to Content > Elements > Pages.

  2. In the upper-right corner, click Add New Page and do the following:

    • To prevent this page from being published in your store, set Enable Page to No.

    • For Page Title, enter Simple Page.

    img-md
    w-600 modal-image
    Basic page settings

  3. Expand Expansion selector the Design section.

    Notice that Layout is set to Page -- Full Width by default. In addition to the five standard layout options, Page Builder adds full-width layouts for pages, categories, and products.

  4. If the sample data is available, set New Theme to Magento Luma. Otherwise, you can choose another available theme or leave it blank to use the default theme.

    The New Theme setting can be used to override the default theme and to apply a different theme to the page.

    note note
    NOTE
    The Full Width layout can be used only with a compatible theme.
    img-md
    w-600 modal-image
    Page design settings

  5. In the upper-right corner, click Save.

    When the page is saved, the name Simple Page appears in the upper-left corner of the page.

Step 2: Format the row

  1. Expand Expansion selector the Content section.

    This action displays the Page Builder preview with an empty row.

    note note
    NOTE
    The Content Heading field is optional. It is by default, formatted as a heading level 1 (H1) according to the theme. For this exercise, the Content Heading is left blank.
    img-md
    w-600 modal-image
    Page content preview with empty row

  2. Click Edit with Page Builder or inside the content preview area.

    In the expanded Page Builder workspace, the panel on the left provides the content tools you can use to build your content in the stage.

  3. Hover over the empty row to display the toolbox.

    Each content container has a toolbox with a similar set of options.

    img-md
    w-600 modal-image
    Page Builder row toolbox

  4. In the Row toolbox, choose the Settings (+--------------------------+ | img-md | +==========================+ | w-20 | +--------------------------+ | Settings icon | +--------------------------+icon.

  5. Under Appearance, choose Full Bleed.

    The Full Bleed appearance setting extends the left and right borders of the content area of the row and background to the full width of the page.

    img-md
    w-600 modal-image
    Row settings - full bleed

  6. Scroll down to the Advanced section and set all Margins and Padding settings to 0.

    This setting ensures that the banner extends the full width of the row.

    img-md
    w-600 modal-image
    Row settings - margins and padding

  7. To save the settings and return to the Page Builder workspace, scroll up to the top of the page and click Save in the upper-right corner.

Step 3: Add a banner

NOTE
Page Builder has a new content type called Banner, which is featured in this step. What was previously the Banner option in the Content menu, is now a Dynamic Block.

  1. In the Page Builder panel, expand Media and drag a Banner placeholder to the stage.

    img-md
    w-600 modal-image
    Dragging a banner content type to the stage

  2. Hover over the banner container to display the toolbox.

    note note
    NOTE
    The stage now has two content containers, each with a separate toolbox. Because the banner is nested inside the row, make sure that you are working in the correct toolbox.

    In addition to the toolbox, the Upload Image and Select from Gallery buttons are included so you can make quick changes to the banner directly from the stage.

    img-md
    w-600 modal-image
    Banner toolbox

  3. In the Banner toolbox, choose the Settings (+--------------------------+ | img-md | +==========================+ | w-20 | +--------------------------+ | Settings icon | +--------------------------+ ) icon.

  4. Under Appearance, choose Collage Right.

    The Collage Right setting positions content on the right side of the banner.

    img-md
    w-600 modal-image
    Banner appearance - collage right

  5. Scroll down to the Background section and set the background image for the banner:

    • For Background Image, click Upload.

      img-md
      w-600 modal-image
      Banner background - upload image

      Navigate to the directory where you saved the extracted simple page assets and choose the wide-banner-background.jpg file.

      The image is uploaded and a thumbnail of the uploaded image appears. The file name, image dimensions, and file size are noted below.

      img-md
      w-600 modal-image
      Uploaded background image in the media gallery

    • For Background Mobile Image, click Upload.

      In the same file directory, choose the wide-banner-background-mobile.jpg file.

      The mobile background image is used for mobile devices, and also whenever a desktop browser window is resized to the width of a mobile device.

      img-md
      w-600 modal-image
      Selecting the sample banner image file for mobile

    • Scroll back to the top of the page and click Save to save the settings and return to the Page Builder workspace.

      The background appears on the stage and extends the full width of the row.

      img-md
      w-600 modal-image
      Banner with background image

    Notice the placeholder text that appears on the right side of the row. The position of this text reflects the Collage Right appearance setting.

  6. Click the placeholder text, and enter the following message as two lines:

    Get fit and look fab in new seasonal styles.

    New LUMA yoga collection

    The editor toolbar appears above the text box. Text can be entered and formatted either directly from the stage, or by choosing Settings in the banner toolbox.

    img-md
    w-600 modal-image
    Editing banner content from the stage

  7. Apply formatting to the text:

    • Select the first line of text. Then, on the editor toolbar under Formats, choose Heading 2.

      img-md
      w-600 modal-image
      Applying the Heading 2 format

    • Select the second line of text. Then, on the editor toolbar under Formats, choose Paragraph.

    The format settings apply the styles from the style sheet that is associated with the current theme.

    img-md
    w-600 modal-image
    Banner in the content stage with formatted text

    __

  8. Hover to display the Banner toolbox, choose the Settings (+--------------------------+ | img-md | +==========================+ | w-20 | +--------------------------+ | Settings icon | +--------------------------+ ) icon again, then scroll to the Content section.

    Notice that your text is displayed in the Message Text box. Text can be entered and edited either from the stage or from the Content section of the banner settings.

    img-md
    w-600 modal-image
    Banner settings - message text

  9. Continuing in the Content section, set the banner link and button:

    • Set Link to Category, and then click Select to show the category tree.

    • Choose What's New as the linked category.

      img-md
      w-600 modal-image
      Banner content - link to category

    • Set Show Button to Always.

    • For Button Text, enter Shop Now as the text that appears on the button.

    • For Button Type, accept the Primary default.

      The button style from the current theme determines the button format.

  10. Set the banner overlay:

    You can use an overlay to apply a background color to the active content area that is defined by the Appearance setting. The banner background image remains visible for the full width of the banner.

    • Set Show Overlay to Always.

    • For Overlay Color, do one of the following:

      • Click the color square and choose the white swatch.
      • Click in the No Color text box and enter White or the hexadecimal value #ffffff.

      Then, click Apply.

      img-md
      w-600 modal-image
      Banner settings - button overlay color

    • Scroll back to the top of the page and click Save to save the settings and return to the Page Builder workspace.

      The button appears below the banner message on the stage.

      img-md
      w-600 modal-image
      Banner in the content stage with text message and button

  11. In the upper-right corner of the stage, click the Close Full Screen ( Close full screen icon ) icon.

    Clicking this icon returns you to the Content section for the page with the preview displayed.

    You can toggle between the two workspace modes at any time you want.

  12. In the upper-right corner, click the Save arrow and choose Save & Close.

  13. If prompted, click the Cache Management link in the message at the top of the page and refresh any invalid cache.

Part 2: Contained row with two equal columns

In this part of the exercise, you add a row to the page, and divide the row into two equal columns. Then, you add a linked image to each column. In the instructions, each new row is added before the first row to make the Page Builder panel line up with the stage. At the end of the exercise, you rearrange the rows so they match the Simple Page example.

w-600 modal-image
Example page using contained row with two equal columns

Step 1: Add a row

  1. In the Pages grid, find the Simple Page that you created in the first part of this exercise and select Edit in the Action column.

  2. Expand Expansion selector the Content section.

  3. Click Edit with Page Builder or inside the content preview area.

  4. In the Page Builder panel under Layout, drag a Row placeholder to the stage and place it above the banner.

    The red guideline marks the boundary between the two rows.

    img-md
    w-600 modal-image
    Adding a new row above the banner

  5. Hover over the new row to display the toolbox and choose the Settings (+--------------------------+ | img-md | +==========================+ | w-20 | +--------------------------+ | Settings icon | +--------------------------+ ) icon.

    img-md
    w-600 modal-image
    Row toolbox

  6. Under Appearance, accept the Contained default setting.

    This setting limits the content area of the row to the width of the page as defined by the theme.

    img-md
    w-600 modal-image
    Keeping the default Contained appearance setting

  7. In the upper-right corner, click Save to save the settings and return to the Page Builder workspace.

Step 2: Add a column

  1. In the Page Builder panel under Layout, drag a Column placeholder to the new row.

    img-md
    w-600 modal-image
    Dragging a column content type to the stage

    The row is now divided into two columns of equal width. Each column is a separate container for content with its own dedicated toolbox of options.

    img-md
    w-600 modal-image
    Row with two columns of equal width

  2. In the upper-left corner of the first column, click the circular Grid control ( Grid control ) to show the grid guidelines.

    The grid ensures that content is aligned consistently, and that it renders correctly on both desktop and mobile devices. For information about configuring the grid size, see the Configure Page Builder section in the Page Builder Setup topic.

    The numbers in parentheses (6/12) in the top border of each column container indicate the number of grid divisions in each column, and the total number of divisions in the row.

    img-md
    w-600 modal-image
    Displaying grid size details for the column

In this step, you learn how to upload an image to the banner.

  1. In the Page Builder panel, expand the Media section and drag an Image placeholder to the first column.

    img-md
    w-600 modal-image
    Dragging the image content type to first column

  2. Insert the sample image into the placeholder.

    img-md
    w-600 modal-image
    Image placeholder

    For am image that is located on your system, you can choose either of these methods:

    • Upload the image file: In the first column, click Upload Image. Then, navigate to the directory where you saved the extracted simple page assets and choose the small-banner-1.jpg file.

      img-md
      w-600 modal-image
      Uploaded image added to the first column

      Repeat this action to add the small-banner-2.jpg file to the second column.

    • Drag the image file: On your desktop, open the simple page assets folder and position it alongside the Admin browser window where you are working with the Page Builder stage. Then, drag the file small-banner-1.jpg from the simple page assets folder, and drop it in the first column.

      img-md
      w-600 modal-image
      Dragging the image onto the second column

      Repeat this action to add the small-banner-2.jpg file to the second column.

  3. Determine which page from your catalog that you want to link to each image.

  4. Hover over the image in the first column to display the toolbox and choose the Settings (+--------------------------+ | img-md | +==========================+ | w-20 | +--------------------------+ | Settings icon | +--------------------------+ ) icon.

    img-md
    w-600 modal-image
    Image toolbox

  5. Link the image to a category:

    • Scroll down and set Link to Category.

    • In the category tree, drill down and choose the Men's Hoodies & Sweatshirt category.

    • In the upper-right corner, Save the settings and return to the Page Builder workspace.

  6. Repeat the previous step to link the image in the second column to the Gear category.

  7. In the upper-right corner of the stage, click the Close Full Screen ( Close full screen icon ) icon.

    Clicking this icon returns you to the Content section for the page with the preview displayed.

  8. In the upper-right corner, click the Save arrow and choose Save & Close.

  9. When prompted, click the Cache Management link in the message at the top of the page and refresh any invalid cache.

Part 3: Full-width row with unequal columns

The final row on this page features content from a product review. You add a full-width row and divide it into two columns of different widths. A background image is added to the first column, with a matching background color that is applied to the row for a unified effect.

w-500
Example full width row with columns of different widths

Step 1: Add a row

  1. In the Pages grid, find the Simple Page that you created in the first part of this exercise and select Edit in the Action column.

  2. Expand Expansion selector the Content section.

  3. Click Edit with Page Builder or inside the content preview area.

  4. In the Page Builder panel under Layout, drag a Row placeholder to the stage and place it above the row that was created in the second part of this exercise.

    A red guideline marks the boundary between the two rows.

    img-md
    w-600 modal-image
    Adding a new row

  5. Hover over the new row to display the toolbox and choose the Settings (+--------------------------+ | img-md | +==========================+ | w-20 | +--------------------------+ | Settings icon | +--------------------------+ ) icon.

    img-md
    w-600 modal-image
    Row toolbox

  6. On the Edit Row page Under Appearance, choose Full Width.

    This setting limits the content area to the maximum page width that is defined by the theme. The background color and/or image are not limited, and extend the full width of the row.

    img-md
    w-600 modal-image
    Selecting the Full Width appearance

  7. In the Background section, enter #f1f1f1 as the Background Color.

    img-md
    w-600 modal-image
    Setting the background color

  8. Scroll down to the Advanced section and set all Margins & Padding values to 0.

    img-md
    w-600 modal-image
    Setting the margins and padding

  9. Scroll back to the top of the page and click Save to save the settings and return to the Page Builder workspace.

    The background color of the row is now a pale beige.

    img-md
    w-600 modal-image
    Row with the background color in the stage

Step 2: Add columns of different widths

  1. In the Page Builder panel under Layout, drag a Column placeholder to the top row on the stage.

    img-md
    w-600 modal-image
    Dragging a column to the stage

  2. Drag the right border of the first column to the four of 12 (4/12) position on the grid.

    The size of the second column adjusts to eight of 12 (8/12).

    img-md
    w-600 modal-image
    Resizing the first column

  3. Hover over the first column container to display the toolbox and choose the Settings (+--------------------------+ | img-md | +==========================+ | w-20 | +--------------------------+ | Settings icon | +--------------------------+ ) icon.

  4. Scroll down to the Advanced section and set all Margins & Padding values to 0.

    img-md
    w-600 modal-image
    Setting the margins and padding

  5. Scroll back to the top of the page and click Save to save the settings and return to the Page Builder workspace.

Step 3: Add an image to the first column

  1. In the Page Builder panel, expand Media and drag an Image content type to the first column.

    img-md
    w-600 modal-image
    Dragging an image content type to the first column

  2. In the image placeholder, click Upload Image.

    img-md
    w-600 modal-image
    Upload Image

  3. Navigate to the directory where you saved the extracted simple page assets and choose the review-image.jpg file.

    The uploaded image appears in the first column, and blends seamlessly with the background color of the row.

    img-md
    w-600 modal-image
    Uploaded image added to the column

Step 4: Add review content to the second column

The second column of the row should contain content from a customer review, including the five-star rating image and formatted text message.

  1. In the Page Builder panel, expand the Elements section and drag the Text content type to the second column.

    img-md
    w-600 modal-image
    Dragging the text content type to the stage

  2. Click in the text element to display the editor toolbar.

  3. In the toolbar, click the Insert Image ( Insert image icon ) icon and do the following:

    img-md
    w-600 modal-image
    Inserting an image in the text

    • In the Insert/edit image dialog, click the Find (  Find icon  ) icon next to the Source field.

      img-md
      w-600 modal-image
      Insert/edit image dialog

    • On the Select Images page, click Choose Files.

    • In the folder where you saved the simple page assets, choose rating.png.

    • Back on the page, double-click the image tile to select it and insert its URL into the Source field.

      img-md
      w-600 modal-image
      Choosing the image on the page

    • For Image Description, enter 5-Star Rating and click OK to insert the image into the column.

    • In the editor toolbar, click Align Center ( Align center button ) to center the image in the column.

      img-md
      w-600 modal-image
      Centered rating image

  4. Position the insertion point just after the five-star image, press the Enter/Return key to start a new line, and enter the following text:

    Awesome Tank!

    I'm a long distance runner and it keeps me pretty comfortable, although these companies always act like their shirts are magical and really it's just pretty basic stuff. Still it's a great shirt, and I would recommend it.

    Antonia Racer Tank – Reviewed by Allyson

    The text is centered as you type.

    img-md
    w-600 modal-image
    Review text centered in the column

  5. Format the text:

    • Click anywhere in the first line of text and on the editor toolbar under Formats, choose Heading 2.

    • Select the remaining text and on the editor toolbar under Formats, choose Paragraph.

    The text is formatted according to the style sheet that is associated with the theme.

  6. Get the dimensions of the image so that you can center the content vertically in the column:

    • Hover over the image in the first column to display the toolbox and choose the Settings (+--------------------------+ | img-md | +==========================+ | w-20 | +--------------------------+ | Settings icon | +--------------------------+ ) icon.

    • Below the thumbnail of the image, take note of the dimensions of the image.

      img-md
      w-600 modal-image
      Image dimensions displayed below the thumbnail

    • In the upper-right corner, click Close.

  7. Center the content vertically in the second column:

    • Hover over the second column to display the toolbox and choose the Settings (

      img-md
      w-20
      Settings icon

      ) icon.

    note note
    NOTE
    Make sure to select the column container rather than the Text container to display the correct toolbox.

    • For Minimum Height, enter 450 as the height in pixels for the image in the first column.

    • Set Vertical Alignment to Center.

    img-md
    w-600 modal-image
    Setting the minimum height and vertical alignment

  8. Scroll down to the Advanced section and set all Margins and Padding values to zero ( 0 ).

    img-md
    w-600 modal-image
    Setting the margins and padding

  9. Scroll back to the top of the page and in the upper-right corner, click Save to save the settings and return to the Page Builder workspace.

    img-md
    w-600 modal-image
    Row with review content on the stage

  1. Select the Antonia Racer Tank text and click the Insert Link ( Insert link icon ) icon in the editor toolbar.

  2. In the Insert link dialog, specify the link to the catalog product:

    • Enter the product URL.

      You can enter either a relative or fully qualified URL. The following relative link is entered for this example:

      ../antonia-racer-tank.html

    • (Optional) For Title, enter the product name.

      The Title link attribute is used by some browsers as a tooltip.

      img-md
      w-600 modal-image
      Inserting a link in the text

    • When complete, click OK to save the link.

      The linked text is now highlighted in the banner.

      img-md
      w-600 modal-image
      Banner with linked text

  3. In the upper-right corner of the stage, click the Close Full Screen ( Close full screen icon ) icon.

    Clicking this icon returns you to the Content section for the page with the preview displayed.

  4. In the upper-right corner, click Save.

Step 6: Rearrange the rows

With all three rows complete, the final step is to rearrange the rows to match the original Simple Page example. To match the original example, the first row must be moved to the bottom, and the last row must be moved to the top.

  1. If necessary, expand Expansion selector the Content section.

  2. Click Edit with Page Builder or inside the content preview area.

  3. Hover over the first row on the stage to display the toolbox and choose the Move ( Move icon ) icon.

    img-md
    w-600 modal-image
    Move

  4. Hold down the mouse button as you verify that all content in the row is selected and drag the row into position below the red guideline at the bottom of the page.

    note note
    NOTE
    If you accidentally move only part of the content — such as the image — simply move the content back where it belongs, and try again.
    img-md
    w-600 modal-image
    Moving a row on the stage

  5. Repeat this process to move the first row to the second position.

    The order of the rows on your page now matches the Simple Page example.

  6. In the upper-right corner of the stage, click the Close Full Screen ( Close full screen icon ) icon.

    Clicking this icon returns you to the Content section for the page with the preview displayed.

  7. In the upper-right corner, click the Save arrow and choose Save & Close.

  8. If prompted, click the Cache Management link in the message at the top of the page and refresh any invalid cache.

You have completed the Simple Page exercise. Keep the work that you created, so you can refer to it later.

When you are ready, proceed to Part 2: Blocks.

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