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.

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.

    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
    The Full Width layout can be used only with a compatible theme.

    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
    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.

    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.

    Page Builder row toolbox

  4. In the Row toolbox, choose the Settings ( 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.

    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.

    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.