Use the Banner content type to create an illustrated, interactive component that engages users with a call to action and button.
Page Builder includes a new “Banner” content type. What was previously the “Banner” option in the Content menu is now “Dynamic Block.”
Banner on Home Page
To add a banner
Open the page where you want to place the banner, and expand the Content section.
In the Page Builder panel on the left, expand the Media section. Then, drag a Banner placeholder to the stage.
Drag “Banner” Content Type to Stage
Hover over the banner container to show the 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 Settings ( ). Then, complete the following:
Banners are extremely easy to set up and maintain, because they are based on one of four predefined templates.
Under Appearance, choose one of the following settings:
- Collage Left
- Collage Center
- Collage Right
Use one of the following methods to set the background color:
Method 1: Enter the Value
In the “No Color” box, enter one of the following:
- A predefined color name, such as “White”
- The hexadecimal color value for the color, such as “#ffffff”
- The rgba value for the color, with opacity percent, such as “rgba(255, 255, 255, 0.75)”
Method 2: Choose the Value
Click the swatch to the left of the “No Color” box. Then do one of the following:
- In the color picker palette, choose the color swatch.
- In the color picker, drag the cursor to the color that you want.
Page Builder supports a transparency layer, or “alpha channel” that you can use to create backgrounds with varying degrees of opacity. Do the following to set the opacity of the background color:
Locate the Opacity slider just below the color picker.
Drag the slider to the 75% setting. Then, tap Apply.
The box below the slider shows the current red, green, blue, and alpha values (rgba). The last number indicates the current opacity percentage as a decimal.
Scroll down to the Background section.
At the Background Image field, tap Upload.
Upload Background Image
Navigate to the image in your local file system. Then, choose the file that you want to use.
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 image that you want to use for mobile devices.
Background Image for Mobile
Scroll up to the top of the page. Then in the upper-right corner, tap Save to close the Edit Banner page 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
Notice the placeholder text that appears on the right side of the row. The position of this text reflects the Appearance setting that you specified.
Click the placeholder text, and enter the text that you want to appear on the banner. The editor toolbar appears above the text box.
Edit Content from Stage
Use the editor toolbar to format the text as needed.
Stage with Formatted Text
Hover over the banner container. Then in the toolbox, choose Settings ( ).
Scroll down to the Content section.
You can enter and edit text from the stage or from Banner Settings.
Banner Links and Buttons
A banner can have either single, or multiple links and buttons. Use one of the following methods to add links and/or buttons to the banner.
Method 1: Single Link or Button
The banner Appearance setting places a single link or button below the text. Simply follow the instructions below to complete the properties of the link or button that you want to add.
Appearance with Text and Button (or Link)
Method 2: Multiple Links or Buttons
Create a separate block with the links or buttons that you want to include.
To avoid conflict, keep all the links or buttons in the separate block, and do not add a link or button directly to the banner.
Add a block placeholder to the banner stage. Then, choose the block that you prepared, and place it where you want it to appear on the banner.
Scroll down to the Link field below the Message Text box.
To link the banner, choose one of the following destination types, and follow the instructions.
Set Link to “URL.”
Enter the destination URL.
Link to URL
Set Link to “Product.”
Do one of the following:
- Begin typing the product name or SKU.
- Choose the product from the search results list.
- Click the down arrow, and choose the product from the list.
Link to Product
Set Link to “Category.”
Do one of the following:
- Begin typing the category name.
- In the category tree, drill down to the category.
In the category tree, click the category name.
Link to Category
Set Link to “Page.”
Do one of the following:
- Begin typing the page name. Then in the list, click the name of the page.
- Click the down arrow, and choose the page from the list.
Link to Page
If the link points to a URL that is outside of your store, and you want to prevent the visitor from navigating away from your store, mark the Open in new tab checkbox.
Set Show Button to one of the following:
- On Hover
- Never Show
In the Button Text field, enter the text to appear on the button.
Set Button Type to one of the following:
The button style from the current theme determines the button format. Typically, a primary button has a more prominent background color than a secondary button.
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 one of the following:
- On Hover
- Never Show
In the Overlay Color field, do one of the following:
- Click the No Color swatch, and choose a swatch.
- In the No Color field, either enter a valid color name, or hexadecimal value.
Then, tap Apply.
In the Overlay Transparency field, the percentage of transparency that you want to apply for the overlay. For example, a transparency setting of 85% is the same as 25% opacity.
In the upper-right corner, tap Save. to close the Edit Banner page, and return to the Page Builder workspace.
The button appears below the banner message on the stage.
Banner with Text Message and Button
On the Save menu in the upper-right corner of the workspace, click the down arrow. Then, choose Save & Close.
When prompted, click the Cache Management link in the message at the top of the page. Then refresh any invalid cache.
|Move||Moves the banner to another position on the stage.|
|(label)||BANNER||Identifies the current content container as a banner. Hover over the container to see the toolbox.|
|Settings||Opens the Edit Banner page, where you can change the properties of the banner and container.|
|Hide||Hides the current banner.|
|Show||Shows the hidden banner.|
|Duplicate||Makes a duplicate copy of the banner.|
|Remove||Deletes the banner from the stage.|
|Upload New Image||Uploads an image from your local file system to the gallery for the banner background.|
|Select from Gallery||Uses an existing image from the gallery for the banner background.|
|Appearance||Determines the banner layout. Options:
|Minimum Height||Specifies the minimum height of the banner in pixels.|
|Background Color||Determines the background color and opacity of the row.|
|Background Image||Determines the location of the background image file, and applies the image to the banner. Options:
|Background Mobile Image||Determines the location of the background image file used for mobile devices, and applies the image to the banner. If blank, the standard desktop background image is used. Options:
|Background Size||Determines how the background image is scaled in relation to the width of the banner. Options:
Determines the anchor point of the image in relation to the banner. Options:Top LeftTop CenterTop RightCenter LeftCenterCenter RightBottom LeftBottom CenterBottom Right
|Background Attachment||Determines how the background image moves in relation to the scrolling page. Options:
|Background Repeat||Determines if the background image is repeated to fill the available space. Options:
|Message Text||A text box and editor that you can use to enter and edit the banner message.|
|Link||Determines the destination page that appears when the button or link is clicked. Options:
|Show Button||Specifies if and when a button appears on the banner. Options:
|Button Text||Specifies the text that appears on the button.|
|Button Type||Determines the button format. Options:
|Show Overlay||Applies a background color to the text content area that is defined by the Appearance setting. The banner background image or color continues to be visible for the full width of the banner. Options:
|Overlay Color||Determines the color of the overlay. To specify the overlay color, choose a swatch, click the color picker, or enter a valid color name or hexadecimal value.|
|Overlay Transparency||Specifies the transparency of the overlay as a percentage. For example, an overlay transparency of 85% is the equivalent of 15% opacity.|
|Alignment||Determines the horizontal alignment of the banner in relation to the parent container.
|Border||Determines the border style that is applied to all sides of the banner container. Options:
|Border Color||Determines the color of the container border. Specify the color by choosing a swatch, clicking the color picker, or by entering a valid color name or equivalent hexadecimal value.|
|Border Width||Determines the width in pixels of the container border.|
|Border Radius||Specifies the size of the radius that is used to round each corner of the container border.|
|CSS Classes||Specifies the names of CSS classes from the current style sheet which apply to the banner. Separate multiple class names with a space.|
|Margins and Padding||Determines the size, in pixels, of the outer margins and inner padding of the banner container. Enter the corresponding values in the diagram. Options: