List with hover image
The section combines text-based storytelling with engaging visual interaction.
It displays a list of items—such as features, values, or milestones—each paired with an image that appears when the user hovers over or selects the item.
This section is ideal for presenting brand stories, process steps, team introductions, or product highlights in a structured yet dynamic format. The hover effect encourages exploration, allowing customers to interact with the content and visually connect each point with its corresponding image.
On the storefront, the List with Hover Image section enhances engagement and readability by balancing clear textual information with responsive visual feedback. It helps you communicate detailed stories in a compact, modern design that feels both intuitive and professional.
In short, this section turns informational lists into an interactive storytelling tool, combining clarity, movement, and emotion to strengthen your brand presentation.
Location: Sections -> Templates -> Storytelling: List with hover image
List with hover image – Options Overview
Heading
Subheading
Adds a smaller introductory text line displayed above the main heading.
Heading
Defines the main title for the section.
List with hover image
Displays the section name used for reference in the editor.
Description
Adds additional text below the heading to describe the section content.
Heading alignment
Left, Center – Aligns the heading and description text.
Layout
Top spacing
None, Small, Medium, Normal – Controls the vertical space above the section.
Width
Default, Boxed – Adjusts the section width. The Wide option applies for screens 1440px and larger.
Settings
Image ratio
Auto, Portrait (3:4), Landscape (4:3), Square (1:1), Round (1:1), Social story (9:16), Widescreen (16:9) – Defines the shape and proportions of the hover images.
Heading size
Large, Medium, Small, Extra small – Adjusts the text size for headings in the list.
Underline on hover
Adds an underline animation when hovering over a list item.
Dividing line
Show
Displays or hides a dividing line to visually separate the section from others.
Background
Background
Hide, Color, Gradient, Image – Defines the visual background style of the section.
Colors
Base
Sets the main color theme of the section.
Accent
Defines the highlight color used for key elements.
Lines
Sets the color of dividing lines or borders within the section.
Content
Heading
Defines the default color of the item headings.
Heading hover
Sets the color of the heading text when hovered.
Link icons
Defines the color of icons displayed next to links.
Link icons hover
Sets the color of link icons on hover.
Row – options overview
Each Row represents a single item within the List with hover image section. You can add as many rows as needed to build your list. Each row can include an image, heading, and link, allowing for flexible content presentation. The hover effect will reveal the image when the user moves the cursor over the row, creating an interactive and visually engaging layout.
Image display
Hide, Show – Determines whether the image is visible for this row.
Image
Upload or select an image to display when hovered.
Heading
Sets the title or label for the row item.
Link URL
Adds a clickable link for the row item, directing users to a specific page or product.
Last updated