The following article contains information about setting up the 'Banner Overlays' for the Artisan theme.
Using Banner Overlays
Banner images in the Artisan theme include the ability to enable a decorative shape overlay. This is a great way to make your banner images eye-catching and creative, or to create more of a contrast between text and the image itself!
In This Article
Homepage Banner Overlays
On the homepage, you can enable the banner overlays in the Slideshow section. You can enable a different overlay 'type' per each slide in your slideshow!
To create a Slideshow section, head into Customize > Sections > Add Section > Slideshow. Within the Slideshow, you can add a slide/banner image under Content > Add Slide.
Within each Slide content block, you can select an overlay by scrolling down to Overlay > Type.
Choose from the following options: None, Pointed, Angled up, Angled down:
You can also choose the Position of the overlay under Overlay > Position:
Note: the Position setting will also dictate the position of your Banner text (preheading, heading, subheading, button label).
You can configure the color of the banner overlay within each Slide. Within the slide content block, scroll down to Colors:
You can also configure the color settings for the banner text and link per slide as well:
Global Banner Overlays (non-homepage)
You can enable overlays for all other banner images that are not on the home page (Blog, Collections, FAQ page, Contact page). These overlay settings are located under Customize > Theme Settings > Banners:
Note: This is a Global Setting and will affect and all of your other pages (non-homepage) that have banner images enabled.
Banner Overlays on Mobile Screens
On mobile, all of the banner overlays will turn into a rectangular shape that sits below the banner image. This is to ensure that the banner image is still visible and that the text is legible:
