Skip to main content

Banners

The Banners module is a very simple and efficient way to display images in your store. Banners support icon and text overlays with several design options available.

General Options

Block Styles

  • General

    • Banner Background - This controls the background used for the banner image.
    • Scale Image on Hover - This adds a scale effect when mouse is over the image.
    • Border - This controls the border used for images.
    • Border Radius - This controls the border radius for images (if there is a border set from the above option).
    • Shadow - Applies optional shadow variable from Journal > Variables > Shadow.
    • Grayscale - Adds black & white effect on the image

  • Overlay - This adds an overlay over the image.

    • Overlay Background - Controls the overlay background, it can be different than the banner background. It's usually a gradient or semi-transparent solid color.
    • Overlay Display - Controls when the overlay should be visible, always or on mouse over.
    • Global Overlay Icon - Adds an icon used over the overlay, usually it is used to add an arrow icon which suggests the banner is clickable and it has a link set.
    • Icon Display - Controls when icon should be visible, always or on mouse over.
    • Icon Margin - Adjusts icon margins and allows for fine tuning the positioning of the icon.

  • Text 1 / Text 2 - This controls texts used over the image, you can add up to two texts for short messages over the image.

    • Position - Controls the text position.
    • Display - Controls when text should be visible, never, always or on mouse over.
    • Width - The width of the text box, visible when a background is applied.
    • Icon - Optional icon added on the text.
    • Scale - Optional scaling of the text element, used instead of enlarging the font size.
    • Scale Origin - The point from which to scale the element.
    • Container Style - Optional container style with common options created in Journal > Styles > Container. Useful when the same styles need to be applied to multiple modules.
    • S Tag Styles - This applies styling on an <s>...</s> tag added within the text. Useful when you need to create a differently styled line of text withing the same text layer.

Item Options

  • Item Name - Name of the item seen in admin on the left side of the module to easily describe what that item represents.
  • Status - Status of the item See Common Settings
  • Text 1 - Primary text layer over the banner.
  • Text 2 - Secondary text layer over the banner.
  • Icon - Individual icon per banner - overrides the global icon overlay.
  • Image - Main banner image.
  • Link - Allows to set a link for the banner image.
  • Background - Optional background to be applied when transparent png images are used and a custom background is desired.