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.
Step 1: Create a page
-
On the Admin sidebar, go to Content > Elements > Pages.
-
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
.
-
-
Expand
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. -
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. -
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
-
Expand
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. -
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.
-
Hover over the empty row to display the toolbox.
Each content container has a toolbox with a similar set of options.
-
In the Row toolbox, choose the Settings (
icon. -
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.
-
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.
-
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
-
In the Page Builder panel, expand Media and drag a Banner placeholder to the stage.
-
Hover over the banner container to display the toolbox.
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.
-
In the Banner toolbox, choose the Settings (
) icon. -
Under Appearance, choose Collage Right.
The Collage Right setting positions content on the right side of the banner.
-
Scroll down to the Background section and set the background image for the banner:
-
For Background Image, click Upload.
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.
-
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.
-
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.
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 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.
-
Apply formatting to the text:
-
Select the first line of text. Then, on the editor toolbar under Formats, choose
Heading 2
. -
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.
__
-
-
Hover to display the Banner toolbox, choose the Settings (
) 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.
-
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. -
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.
-
-
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.
-
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.
-
-
In the upper-right corner of the stage, click the Close Full Screen (
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.
-
In the upper-right corner, click the Save arrow and choose Save & Close.
-
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.
Step 1: Add a row
-
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.
-
Expand
-
Click Edit with Page Builder or inside the content preview area.
-
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.
-
Hover over the new row to display the toolbox and choose the Settings (
) icon. -
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.
-
In the upper-right corner, click Save to save the settings and return to the Page Builder workspace.