Tutorial 1: Simple Page

In this three-part tutorial, you will become familiar with the Page Builder workspace, while creating a simple page that illustrates how easy it is to create content-rich pages of your own design.

Simple Page

Before you begin

Before starting this tutorial, we recommend that you increase the Admin Session Lifetime to prevent the session from timing out while you work.

Verify the required Content Management configuration settings:

Do the following to download the image assets that are needed to complete the page.

  1. Right-click the simple-page-assets.zip link, and save the file to your local computer.

  2. Navigate to the file on your computer, and right-click to Extract All files. Then, choose the destination folder, and tap Extract.

    The folder contains the following image files:

    Simple Page Assets

To complete parts 1, 2, and 3 of this tutorial, expand each section and follow the instructions.

Part 1: Full-Bleed Row with Banner

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

Full Bleed Row with Banner

Step 1: Create a New Page

  1. On the Admin sidebar, choose Content. Then under Elements, choose Pages.

  2. In the upper-right corner, tap Add New Page. Then, do the following:

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

    • In the Page Title, field, enter “Simple Page”.

      Simple Page Settings

  3. Expand the Design section.

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

    If the sample data is available, set New Theme to “Magento Luma”. Otherwise, you can either 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.

    The Full Width layout can be used only with a compatible theme.

    Design Section

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

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

Step 2: Format the Row

  1. Expand the Content section, and take note of the following workspace features:

    • Page Builder panel on the left
    • Stage with empty row where you can drag content types or columns

    The Content Heading field is optional. It is by default, formatted as a heading level 1 (H1) according to the theme. For the purpose of this tutorial, the Content Heading field is left blank.

    Content Stage with Empty Row

  2. Hover over the empty row to make the toolbox appear. Each content container has a toolbox with a similar set of options.

    Row Toolbox

  3. In the Row toolbox, choose Settings ). Then 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.

    Full Bleed

  4. Scroll down to the Advanced section. Then, set all Margins and Padding settings to zero ( 0 ).

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

    Margins and Padding

  5. Scroll up to the top of the page. In the upper-right corner, Save the settings and return to the Page Builder workspace. Then in the upper-right corner, tap Save to continue.

Step 3: Add a Banner

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 “Dynamic Block”.

  1. Expand the Content section. Then in the Page Builder panel on the left, expand the Media section.

  2. Drag a Banner placeholder to the stage.

    Drag “Banner” Content Type to Stage

  3. Hover over the banner container to make the toolbox appear.

    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.

    Banner Toolbox

    In the Banner toolbox, choose Settings ). Then, complete the following:

    Appearance

    Under Appearance, choose “Collage Right”.

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

    Collage Right

    Background Image

    • Scroll down to the Background section.

    • At the Background Image field, tap Upload.

      Upload Background Image

    • Navigate to the directory on your computer where you saved the simple page assets. Then, choose the file, wide-banner-background.jpg.

      Simple Page Assets

      The image is uploaded to the gallery, and a thumbnail of the uploaded image appears. The file name, image dimensions, and file size are noted below. Background Image for Desktop

    • At the Background Mobile Image field, tap Upload. Then, choose the file, wide-banner-background-mobile.jpg.

      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.

      Background Image for Mobile

    • Scroll up to the top of the page. Then in the upper-right corner, Save the settings and return to the Page Builder workspace.

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

      Banner with Background Image

    Banner Content

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

    • Click the placeholder text, and enter the following message:

        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 from the banner toolbox.

      Edit Content from Stage

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

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

      Stage with Formatted Text

    • Hover over the banner container. Then in the toolbox, choose Settings ).

    • Scroll down to the Content section.

      Text can be entered and edited either from the stage, or from the Content section of Banner Settings.

      Message Text

    Banner Link and Button

    • Continuing in the Content section, find the Link field below the banner message.

      By default, the Link field is set to “URL”.

    • To link the banner to the appropriate category of products, set Link to “Category”. Then, click Select to show the category tree, and choose “What’s New”.

      Link to Category

    • Set Show Button to “Always”.

    • In the Button Text field, enter “Shop Now” as the text that appears on the button.

    • Accept the “Primary” default Button Type.

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

    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 continues to be visible for the full width of the banner.

    • Set Show Overlay to “Always”.

    • At the Overlay Color field, do one of the following:

      • Click the No Color swatch, and choose the White swatch.
      • In the No Color field, either enter “White” or the hexadecimal value #ffffff.
      • Then, tap Apply.

        Overlay Color

    • In the Overlay Transparency field, enter 85%.

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

      The button appears below the banner message on the stage.

      Banner with Text Message and Button

  4. In the upper-right corner of the stage, click the Fullscreen ( ) icon.

    Fullscreen mode includes the Page Builder panel and the stage, and shows how the page looks from the storefront.

  5. To return to the Content section of the page, click Close ( ) in the upper-right corner of the stage. You can toggle between the two workspace modes any time you want.

    Fullscreen Mode

  6. On the Save menu in the upper-right corner, choose Save & Close.

    Save Menu

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

Congratulations!

You have completed Part 1 of the Simple Page tutorial. Keep the work that you created, so you can refer to it later.

Part 2: Contained Row with Two Equal Columns

In this part of the tutorial, you will add a new row to the page, and divide the row into two equal columns. Then, you will 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 tutorial, you will rearrange the rows so they match the Simple Page example.

Contained Row with Two Equal Columns

Step 1: Add a New Row

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

  2. Expand the Content section. Then, do the following:

    • If necessary, scroll down so you can see the Page Builder panel and stage.

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

    Add New Row Above the Banner

  3. Hover over the new row. Then in the toolbox, choose Settings ).

    Row Toolbox

  4. Under Appearance, accept the “Contained” default setting.

    The “Contained” Appearance setting limits the content area of the row to the width of the page as defined by the theme.

    Appearance “Contained”

  5. In the upper-right corner, 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.

    Drag “Column” Content Type to 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.

    Two Columns of Equal Width

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

    The grid ensures that content is aligned consistently, and renders correctly on both desktop and mobile devices. To learn more, see the Advanced Content Tools section of the Page Builder configuration.

    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.

    Grid Size

Step 3: Add Images

  1. In this step, you will learn two ways to upload an image to the banner.

    Method 1: Use the Upload Image Button

    • On the Page Builder panel, expand the Media section. Then, drag an Image placeholder to the first column.

      Drag “Image” Content Type to First Column

    • In the first column, tap Upload Image.

      Upload Image

    • In the directory on your computer where you saved the simple page assets, choose the file, small-banner-1.jpg.

      Image in First Column

    Method 2: Drag the Image File

    • In the Page Builder panel under Media, drag an Image placeholder to the second column.

      Drag “Image” Content Type to Second Column

    • On your desktop, open the simple page assets folder, and position it alongside the Magento Admin window where you are working.

      Image Folder and Magento Admin

    • Drag the file small-banner-2.jpg from the simple page assets folder, and drop it in the second column.

      Drag Image in Second Column

  2. To link the images, do the following:

    • Determine which page from your catalog is to be linked to each image.

    • Hover over the image in the first column. Then in the toolbox, choose Settings ).

    Image Toolbox

  3. Scroll down to the Link field. Then, do the following:

    • Set Link to “Category”.

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

      Choose the Category

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

  4. Repeat these steps to link the image in the second column to the “Gear” category.

  5. In the upper-right corner on the Save menu, choose Save & Close.

    Save Menu

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

Congratulations!

You have completed Part 2 of the Simple Page tutorial. Keep the work that you created, so you can refer to it later.

Part 3: Full-Width Row with Unequal Columns

The final row on this page features content from a product review. You will 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.

Full Width Row with Columns of Different Widths

Step 1: Add a New Row

  1. On the Admin sidebar, choose Content. Then under Elements, choose Pages.

  2. In the Pages grid, find the Simple Page that you created in the first part of this tutorial. Then in the Action column, select Edit.

  3. Expand the Content section, and scroll down to the Page Builder workspace.

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

    A red guideline marks the boundary between the two rows.

    Add a New Row

  5. Hover over the new row. Then in the toolbox, choose Settings ), and do the following:

    Row Toolbox

    • On the Edit Row page under Appearance, choose “Full Width”.

      The “Full Width” Appearance 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.

      “Full Width” Appearance

    • In the Background section, enter the following hexadecimal Background Color: #f1f1f1. You can type right over the words, “No Color”.

      Background Color

    • Scroll down to the Advanced section. Then, set all Margins & Padding values to zero ( 0 ).

      Margins & Padding

  6. Scroll up to the top of the page. Then, Save the settings and return to the Page Builder workspace.

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

    Row Background Color

Step 2: Add Columns of Different Widths

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

    Drag a Column to the Stage

  2. Drag the right border of the first column to the “four of twelve” (4/12) position on the grid. The size of the second column adjusts to “eight of twelve” (8/12).

    Resize First Column

  3. Hover over first column container. Then in the toolbox, choose Settings ), and do the following:

    • Scroll down to the Advanced section.

    • Set all Margins & Padding values to zero ( 0 ).

      Margins & Padding

    • Scroll up to the top of the page. Then, 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 under Media, drag an Image content type to the first column. Then, do the following:

    Drag Image to First Column

    • Tap Upload Image.

      Upload Image

    • In the directory on your computer where you saved the simple page assets, choose review-image.jpg.

      Simple Page Assets

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

  2. In the upper-right corner, tap Save.

Step 4: Add Review Content to the Second Column

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

  1. If necessary, expand the Content section. Then, scroll down to the Page Builder workspace.

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

    Drag “Text” Content Type to Stage

  3. In the editor toolbar, click Insert Image ). Then, do the following:

    Insert Image

    • In the Insert/edit image box, just after the Source field, click Find ).

      Insert/Edit Image

    • On the Select Images page, click Choose Files.

      Upload Images

    • In the folder where you saved the simple page assets, choose rating.png. Then in the gallery, double-click the image tile to insert its URL into the Source field.

      Choose Image from Gallery

    • In the Image Description field, enter “5-Star Rating”. Then, tap OK to insert the image into the column.

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

      Centered Image

  4. Position the insertion point just after the 5-star image, and press the Enter key to start a new line. Then, enter the following text. The text is centered as you type.

    Awesome Tank! </ br> 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.</ br> Antonia Racer Tank – Reviewed by Allyson

    Review Text

  5. To format the text, do the following:

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

    • Select the remaining text. Then on the editor toolbar under Formats, choose “Paragraph”.

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

  6. To center the content vertically in the column, you must first know the height of the image. To get the dimensions of the image, do the following:

    • Hover over the image in the first column. Then in the toolbox, choose Settings ).

    • Below the thumbnail of the image, take note of the dimensions of the image. Then in the upper-right corner, tap Close.

      Image Dimensions

  7. To center the content vertically in the second column, do the following:

    • Hover over the second column. Then in the toolbox, choose Settings ), and scroll down to the Layout section.

      Make sure to select the Column container rather than the Text container.

    • In the Minimum Height field, enter “450” as the height in pixels, of the image in the first column.

    • Set Vertical Alignment to “Center”.

    Vertical Alignment

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

    Margins & Padding

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

    Row with Review Content on Stage

  1. Select the text, “Antonia Racer Tank”. In the editor toolbar, click Insert Link ). Then, do the following:

    • 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) Enter the product name in the Title field,

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

    • When complete, tap OK to save the link and return to the Page Builder workspace.

      Insert Link

      The linked text is now highlighted in the banner.

  2. In the upper-right corner, tap 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. Hover over the first row on the stage. Then in the toolbox, choose Move ( ).

    Move

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

    If you accidentally move only part of the content — such as the image — simply move the content back where it belongs, and try again.

    Moving a Row

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

  4. If you are working in Fullscreen mode, click Close ( ) in the upper-right corner to return to the Page Builder workspace. Then on the Save menu, choose Save & Close.

    Save & Close

Congratulations! You have completed Part 3 of the Simple Page tutorial. Keep the work that you created, so you can refer to it later.