Media with text banners section

The “Media with text banners” section gives you the ability to showcase arbitrary content (collections, products, offers) by selecting custom imagery and text. While it is a similar to the Banner list section, it allows for banner layouts not possible with the Banner list section.

Section settings

Heading + Subheading: Set a title and subtitle for this section. Both are optional.

Link label + Link: With these settings you can create a button that will appear at the top right corner of your banners 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”.

Banner card

Heading size: Select the font size of the banners’ headings. Possible values are Small, Normal, Large (default), Extra large, and Extra extra large.

Image position: Allows you to change the placement of the image in relation to the text. Top (default) places the image above the text banner’s text, while Left and Right places the image on the respective side.

Image ratio: This option allows you to select the ratio of the thumbnails that will appear on the banner cards. “Adapt to image” means that the ratio will be the inherent ratio of the image. Portrait, Square (default), and Landscape will force the images to be displayed as portrait, square, or landscape ratios respectively.

Layout

Desktop layout: With the “Grid” option you can create a typical grid layout of banners. A “Slider” option is also available that lets you create a simple slider layout. For this to work, the number of banners added in this section must be greater than the number of 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) on desktop devices.

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

Mobile layout

Heading size: Select the font size of the banners’ headings when displayed on mobile devices. Possible values are Small, Normal, Large (default), Extra large, and Extra extra large.

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 consists of “Banner” blocks representing each card in the banner section, with the following settings (all optional):

Image: Set an image for the particular banner.

Heading: The title of the banner.

Description: A short description of the banner.

Button label + Link: The banner’s button text and where it should link to (page, collection, product, external link etc). Please note: Leaving the Button label empty but and having the Link filled, will link the entire banner to the selected URL.

Display button as text link: Optionally make the button be a textual link. Applies when the button is visible and when it is also not a textual link.

Button color scheme: Choose the color of the button. Applies when the button is visible.

Badge overlay

You can optionally create a badge that will be overlayed on top of the image. The badge can create up to 3 lines of text, all optional. For each line of text, you have the following options:

Line text: The text of the badge.

Line text size: The font size of the text. Possible values are Small, Normal, Large, Extra large, and Extra extra large.

Additionally, you have the following badge options:

Badge position: Whether the badge will appear on Left or Right side of the image.

Text color: The text color of the badge’s content (all 3 lines).

Background color: The background color of the badge.