How to set up the media and text slider section

The media and text slider section tells your brand’s story with a visually engaging slider featuring images and text.

Section settings

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

Subheading: Set a subtitle for this section. This is optional.

Heading alignment: Select the alignment for the heading and subheading. Options: Left, Center, Right.

Layout

Section width: Adjust whether this section should span the full width of the page (100%) or be contained within a limited layout. Applies on desktop. On mobile, the section spans the entire width of the screen.

Section inner max width (px): Set the maximum width of the content inside this section in pixels.

Section left/right gutter: Adjust the left and right spacing of the section relative to the viewport edge on narrow screens.

Vertical inner spacing: Adjust the spacing between the content and the top/bottom edges of this section in pixels.

Vertical outer spacing: Adjust the space between this section and the sections above and below it in pixels.

Slider

Image placement on desktop: Select the alignment of the image within the slider. Options: Start, End.

Image ratio: Select the aspect ratio for the images displayed in the slider. Options: Square, Landscape, Portrait.

Autoplay: Enable this option to allow the slider to automatically transition between slides.

Autoplay duration: Set the time interval (in seconds) for automatic transitions between slides.

Navigation type: Choose the navigation controls for the slider. Options: Arrows, Track, Both.

Track background color: Choose the background color for the slider track.

Active track color: Select the color for the active portion of the slider track.

Arrows background color: Choose the background color for the slider navigation arrows.

Arrows foreground color: Choose the color of the arrow icons in the slider navigation.

Button border radius: Adjust the roundness of the button corners.

Section styles

Section heading color: Choose the color for the main heading of the section.

Section subheading color: Choose the color for the subheading of the section.

Section background color: Choose the background color for this section.

Slide

Image: Select or upload an image for the slide. You can also browse free images via the “Explore free images” link.

Heading: Set the title for the slide.

Subheading: Set a subtitle for the slide.

Description: Add a description for the slide content.

Heading size: Select the size of the heading text. Options: Extra Small, Small, Medium, Large, Extra Large.

Text size: Select the size of the subheading and description text. Options: Extra Small, Small, Medium, Large, Extra Large.

Font scale: Adjust the overall text scaling of the slide, proportionally affecting the heading, subheading, and description.

Button label: Set the text for the button.

Button link: Set the destination for the button link (e.g., page, collection, product, external link, etc.).

Background color: Choose the background color for the slide.

Heading color: Choose the color of the heading text.

Text color: Choose the color of the subheading and description text.

Button background color: Choose the background color for the button.

Button text color: Choose the text color for the button.