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. Download the simple-page-assenting file 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 click 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, go to Content > Elements > Pages.

  2. In the upper-right corner, click 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 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, click 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 ( ) and 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 and 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 and click Save in the upper-right corner to save the settings and return to the Page Builder workspace.

  6. In the upper-right corner, click 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 and expand Media in the Page Builder panel on the left.

  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, click Upload.

      Upload Background Image

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

      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, click Upload. Then, 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.

      Background Image for Mobile

    • Scroll up to the top of the page. Then in the upper-right corner, 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.

      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, choose Settings () in the toolbox.

    • 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, enter White or the hexadecimal value #ffffff.
      • Then, click Apply.

        Overlay Color

    • In the Overlay Transparency field, enter 85%.

    • n the upper-right corner, click Save to 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, select Edit in the Action column.

  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, choose Settings () in the toolbox.

    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, click Save in the upper-right corner 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.

    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

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

Method 1: Use the Upload Image Button

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

  2. In the first column, click Upload Image.

    Upload Image

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

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

    Drag “Image” Content Type to Second Column

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

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

Link the Images

  1. 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, choose Settings () in the toolbox.

    Image Toolbox

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

  3. Repeat these steps to link the image in the second column to the Gear category.

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

    Save Menu

  5. 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, go to Content > Elements > Pages.

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

  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, choose Settings () in the toolbox 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 #f1f1f1 as the Background 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, click Save to 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, choose Settings () in the toolbox 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, 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 under Media, drag an Image content type to the first column. Then, do the following:

    Drag Image to First Column

    • Click 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, click 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 and 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, click 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.

    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

    The text is centered as you type.

    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, click 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, click Save to save the settings and return to the Page Builder workspace.

    Row with Review Content on Stage

  1. Select the Antonia Racer Tank text and click Insert Link () in the editor toolbar. 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, click 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, 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. 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.

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