Content slider settings
This guide describes the Content slider section. Use this section to display multiple slides with images, text, or other content in a carousel format. The main idea is to tell the story of your company, brand, or key events in chronological order. By clicking on a tab with a specific date, users can navigate directly to that event.
Key features:
- Image position: Choose Top or Cover.
- Container for text: Add a background container when using the Cover image position.
- Timelapse: Add dates in the Timelapse to display tabs above columns for easy navigation.
Demo example:
The Content slider is displayed on the About Us page, showcasing key events in chronological order.
How to access the Content slider section
Access this section through the theme customizer:
- Navigate to Online Store > Themes
- Select “Customize” on your active theme
- On any theme template, click “Add section”
- Search and select “Content slider”
Note: Section cannot be added to the Password page.
To insert a new section between existing ones, follow the steps in the article "Sections and blocks" and locate the section titled “How to add a section”.
How to configure the Content slider section
Basic Components
The “Image banner” section consists of two primary components:
- General settings – These control the overall settings of the section.
- Block – Each block has its own individual settings.
Available block types include:
- Column (Learn about all available block settings, article "Column").
To insert a new block between existing ones or to add a block when none have been added yet, refer to the article "Sections and blocks" and locate the section titled “How to add a block”.
General settings
Select a setting described in the following table:
| Settings | Description |
| Heading | Display main title on the banner. In the top menu of the field, you can find options to customize it, such as making it bold or italic. Furthermore, you can click the dynamic source button to insert a dynamic source as the title of the section. |
| Heading size | Select the size of the heading text:
|
| Number of columns on desktop | The “Number of columns on desktop” setting allows you to choose how many columns to display on the desktop. |
| Column alignment | Select text alignment in column:
|
| Color scheme | Select a section color scheme from the list and customize it with appropriate colors. Applying a color scheme automatically updates all related colors based on the settings defined in the theme's color schemes. |
Card settings
| Settings | Description |
| Image position | Choose how the image and text are arranged in the card. • Top – Image on top, text below. • Cover – Text placed over the image. |
| Image ratio | Select the aspect ratio for images. • Adapt to image • Portrait • Square • Landscape • Circle |
| Container | Enable this option to display text inside a container with a background color. |
| Heading size | Select the size of the column heading. • Small • Medium • Large |
Mobile layout
| Settings | Description |
| Number of columns on mobile | Choose how many columns to display on mobile devices. • 1 column • 2 columns |
Section padding
| Setting | Description |
| Top padding | The 'Top padding' setting allows you to adjust the amount of space at the top of the section using a slider. |
| Bottom padding | The 'Bottom padding' setting functions similarly to the “Section top padding” setting, but controls the space at the bottom of the section. |
| Top padding mobile | The 'Top padding mobile' setting allows you to adjust the amount of space at the top of the section specifically for mobile devices, using a slider. |
| Bottom padding mobile | The 'Bottom padding mobile' setting works similarly to the 'Top padding mobile' setting but controls the space at the bottom of the section for mobile devices. |