Image banners

This section was introduced in version 1.8

The “Image banners” section is a flexible section that gives you the ability to display curated graphic content (images) with the guarantee that they will always be shown in full no matter the viewport.

Section settings

Heading: Set a title for this section. This is optional.

Heading size: Adjust the size of your heading to make your message stand out. Available options: Small, Normal, Large, Extra large, and Extra extra large.

Subheading: Set a subtitle for this section. Also optional.

Link label + Link: With these settings you can create a button that will appear at the top right corner of your collection list section. For example if you have used this section to showcase a list of offers, you can add a button with a link to a collection or page called “Offers”.

Layout

Desktop layout: With the “Grid” option you can create a typical grid layout of image banners. A “Slider” option is also available that lets you create a simple slider layout. For this to work, the number of image banners added in this section must be greater than the number of image banners visible as set by the setting Number of columns on desktop.

Number of columns on desktop: Sets the number of columns (1,2,3 or 8).

Stack on mobile: By default, Athens will try to create a flexible scrollable horizontal list of image banners on mobile. If you prefer to create a vertical list, simply enable this option.

Colors

Color scheme: Select one of the predefined color schemes as defined in Theme settings > Colors. For more information regarding the color schemes please refer to our article about creating your own color scheme.

Section spacing

The section spacing settings gives you the option to adjust the top & bottom section spacing values. Please note: If you select a color scheme with a background color, these settings will affect the spacing between the top or bottom of the section and the content of the section.

Advanced

Heading tag: Select the appropriate heading level (H1, H2, or H3) based on how you want the section title to appear.

Show section on desktop: Enable or disable the section’s visibility on desktop devices.

Show section on mobile: Enable or disable the section’s visibility on mobile devices.

Banner block

This section consists of “Banner” blocks representing each card in the Image banner section, with the following settings:

Image: Set an image for the particular banner. It will be displayed as the background image for the banner.

Mobile image: This image will be used on mobile devices.

Image description: Optionally describe the image for customers using screen readers.

Link: Where the image banner should point to.