Media - Banner

In the Page Builder panel, expand Media and drag a Banner placeholder to the stage.

{width="600" modal="regular"}

The Upload Image and Select from Gallery buttons are included so you can make quick changes to the banner content directly from the stage. You can also change the content on the Edit Banner page.

Click in the banner placeholder to display the text editor and enter content for the banner.

You can also include more complex banner content using the Content settings.

Hover over the banner container to display the toolbox and choose the Settings ( ) icon.

Use the following sections for detailed information about updating the available settings:

• Appearance
• Content
• Background
• Advanced

When complete, click Save in the upper-right corner to close the Edit Banner page.

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

Click the placeholder text and enter the text that you want to appear on the banner.

The editor toolbar appears above the text box.

{width="600" modal="regular"}

Use the editor toolbar to enter and format text, as well as insert elements, such as links, images, and widgets.

{width="600" modal="regular"}

Hover over the banner container to display the toolbox and choose the Settings ( {width="25"} ) icon.

Scroll down to the Content section and use the Message Text editor to enter and format banner text.

You can also insert elements, such as text links, images, and widgets.

{width="600" modal="regular"}

If needed, specify a Link for the banner.

The link is the destination page that appears when the customer clicks the banner button or area. You can use one of three link types:

• URL - Links to either a relative or fully qualified URL.
• Product - Identifies the destination page based on the product name or SKU. Search for the product by name based on either a partial or full name. Choose the product from the search results list.
• Category - Identifies the destination page as a specific category or subcategory in the category tree. Search for the category based on either a partial or full name. Choose the category from the expanded section of the displayed tree.
• Page - Identifies the destination page as a specific content page. Search for the page based on either a partial or full name. Choose the page from the search results list.

note note
NOTE
Starting with the 2.4.1 release, Page Builder no longer supports linking the banner and links within the nested text due to issues with display on the storefront. If you are using a link in the Message Text, you cannot configure the Link option. If you prefer to use a single link for the whole banner, you can remove all links from the text.
{width="200"}

If needed, add a button to prompt customers to follow the link.

The banner Appearance setting places a single link or button below the text. Complete the properties of the link or button that you want to add.

{width="600" modal="regular"}

• Set Show Button to one of the following:

  table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
  Option	Description
  Always	A button always appears on the banner.
  On Hover	A button appears on the banner only on hover.
  Never Show	A button never appears on the banner.

• Enter the Button Text to appear on the button.

• Set Button Type to one of the following:

  table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
  Option	Description
  Primary	Applies the primary button style from the current style sheet.
  Secondary	Applies the secondary button style from the current style sheet, if applicable.
  Link	Creates a hyperlink rather than a button.

  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.

Set Show Overlay to one of the following:

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.

If you choose to show an overlay, set the Overlay Color:

• Click the No Color swatch, and choose a swatch.
• In the No Color field, either enter a valid color name, or hexadecimal value.

{width="600" modal="regular"}

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

{width="600" modal="regular"}

To control the horizontal positioning of content containers that are added to the banner, choose an Alignment:

Set the Border style applied to all four sides of the banner container:

If you set a border style other than None, complete the border display options:

• Border Color - Specify the color by choosing a swatch, clicking the color picker, or by entering a valid color name or equivalent hexadecimal value.

  {width="600" modal="regular"}

• Border Width - Enter the number of pixels for the border line width.

• Border Radius - Enter the number of pixels to define the size of the radius that is used to round each corner of the border.

(Optional) Specify the names of CSS classes from the current style sheet to apply to the banner container.

Separate multiple class names with a space.

Enter values, in pixels, for the Margins and Padding to specify the outer margins and inner padding of the banner.

Enter each corresponding value in the banner container diagram.