Skip to main content
Build your brand and increase sales with a premium ecommerce experience.

Banjo sections: Image banner

Updated

banner2-1200.jpgbanner-1200.jpg

Overview

The image banner section supports image, heading, subheading and buttons.

Section settings

Setting Description
Section width Set the width of the section using the drop-down menu:
  • Grid
  • Full width
  • Full width no gap
Section spacing Set the spacing of the section using the drop-down menu:
  • Small
  • Medium
  • Large
Visible when the Section width setting is set to Grid.
IMAGE  
Image The main image for the banner. If the mobile image is not set, this is image is used to display on mobile devices too.
Edit alt text Click to set image alt text for search engine optimization and to describe the image for customers using screen readers.
Image width Set the width of the image. Defaults to 50%.
Image position Set the position of the image using the drop-down menu, visible when the ‘Desktop logo’ setting is set to Left.
  • Left
  • Right
Image overlay opacity Adds an overlay to the banner images. Use the slider to set the opacity of the overlay. Defaults to 0%.
IMAGE MOBILE  
Image mobile The mobile image for the banner. If the image is not set, the above image is used.
Edit alt text Click to set image alt text for search engine optimization and to describe the image for customers using screen readers.
Image overlay opacity Adds an overlay to the banner images. Use the slider to set the opacity of the overlay. Defaults to 0%.
Content  
Content position The position of the content above the image. Choose from the drop-down menu:
  • Top left
  • Top center
  • Top right
  • Middle left
  • Middle center
  • Middle right
  • Bottom left
  • Bottom center
  • Bottom right
Content width Set the width of the content. Defaults to 60%.
Text color desktop Set color text on desktop view
Text color mobile Set color text on mobile view

Heading block

Setting Description
Text Title text for the section.
Heading size The font size of the heading, Choose from the drop-down menu:
  • Small
  • Medium
  • Large
Link The URL that you want the heading to link to.

Subheading block

Setting Description
Text Subheading text

Description block

Setting Description
Text Displays paragraph-style text.

Button block

Setting Description
Label The text that displays on the button.
Link The URL that you want the button to link to.
Style The style of the button. Choose from Primary, Outline and Underline.

Video button block

Setting Description
Video URL Accepts Vimeo or YouTube links.
Video alt text Describe the video for customers using screen readers.
Cover image The image that displays before a customer plays the video.

Related articles