Magento Commerce, 2.3.x

Banner

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:

1. Open the page where you want to place the banner, and expand the Content section.
2. 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
3. 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.


Banner Toolbox
4. In the Banner toolbox, choose Settings ). Then, complete the following:
3. On the Save menu in the upper-right corner of the workspace, click the down arrow. Then, choose Save & Close.

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

 

  • Banner Toolbox

    TOOL

    Icon

    Description

    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.

  • Banner Settings

    Setting

    Description

    APPEARANCE

    Appearance

    Determines the banner layout. Options:

    Poster

    Centers content and button on the banner. The overlay, if used, extends the full width of the banner.

    Collage Left

    Places content and button in a defined area on the left side of the banner. The overlay, if used, covers only the defined area.

    Collage Center

    Places content and button in a defined area that is centered on the banner. The overlay, if used, covers only the defined area.

    Collage Right

    Minimum Height

    Specifies the minimum height of the banner in pixels.

    BACKGROUND

    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:

    Upload

    Uploads an image file from your local computer to the gallery, and applies it as the background image.

    Select from Gallery

    Prompts you to choose an existing image from the gallery as the background image.

    Allows you to either drag the background image to the camera tile, or browse to the image in your local file system.

    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:

    Upload

    Uploads an image file from your local computer to the gallery, and then applies it as the background image.

    Select from Gallery

    Prompts you to choose an existing image from the gallery to be the background image.

    Allows you to either drag the mobile background image to the camera tile, or browse to the image in your local file system.

    Background Size

    Determines how the background image is scaled in relation to the width of the banner. Options:

    Cover

    The background image covers the full width of the banner.

    Contain

    Limits the background image to the width of the content area of the banner.

    Auto

    Applies the background image size from the current style sheet.

    Background Position

    Determines the anchor point of the image in relation to the banner. Options:

    Top Left

    Top Center

    Top Right

    Center Left

    Center

    Center Right

    Bottom Left

    Bottom Center

    Bottom Right

    Background Attachment

    Determines how the background image moves in relation to the scrolling page. Options:

    Scroll

    The background image is synchronized to move down as the page scrolls.

    Fixed

    (Not available for mobile) The background image does not move as the container scrolls over the image, and is fixed at the specified background position.

    Background Repeat

    Determines if the background image is repeated to fill the available space. Options:

    Yes

    The background image is repeated to fill the available space.

    No

    Only a single instance of the background image appears.

    CONTENT

    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:

    URL

    Links to either a relative or fully-qualified URL.

    Product

    Identifies the destination page based on the product name or SKU. The product name can be searched for based on either a partial or full name. The product is then chosen from the search results list.

    Category

    Identifies the destination page as a specific category or subcategory in the category tree.

    Page

    Identifies the destination page as a specific content page.

    Show Button

    Specifies if and when a button appears on the banner. Options:

    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.

    Button Text

    Specifies the text that appears on the button.

    Button Type

    Determines the button format. Options:

    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.

    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:

    Always

    The overlay is always visible.

    On Hover

    The overlay appears only on hover.

    Never Show

    The overlay is not visible.

    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.

    Advanced

    Alignment

    Determines the horizontal alignment of the banner in relation to the parent container.

    Default

    Applies the default setting that is specified in the style sheet of the current theme.

    Left

    Aligns the banner along the left border of the parent container, with allowance for any padding that is specified.

    Center

    Aligns the banner in the center of the parent container, with allowance for any padding that is specified.

    Right

    Aligns the banner along the right border of the parent container, with allowance for any padding that is specified.

    Border

    Determines the border style that is applied to all sides of the banner container. Options:

    Default

    Applies the default border style from the style sheet that is associated with the current theme.

    None

    Provides no visible indication of container borders.

    Dotted

    The container border appears as a dotted line.

    Dashed

    The container border appears as a dashed line.

    Solid

    The container border appears as a solid line.

    Double

    The container border appears as a double line.

    Groove

    The container border appears as a grooved line.

    Ridge

    The container border appears as a ridged line.

    Inset

    The container border appears as an inset line.

    Outset

    The container border appears as an outset line.

    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:

    Margins

    The amount of blank space, in pixels, that is to be applied to the outside edge of all sides of the banner container. Options: Top, Right, Bottom, Left.

    Padding

    The amount of blank space, in pixels, that is to be applied to the inside edge of all sides of the banner container. Options: Top, Right, Bottom, Left.