Image banners

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.

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 4).

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.

Banner block

This section is consisted 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.

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

Link: Where the image banner should point to.