Make better products faster than ever.

Achieve faster innovation, crafting high-quality products with ease.

15,000 happy customers

Add to collection

Overview

This section is designed to incorporate a DIV with attribute [lazy-hero-slider="9"] that spans 50% of the screen's width, extending beyond the container's boundaries. This effect is achieved through the application of custom CSS, utilizing a grid layout.

Instructions:

To establish a gap between the content and the image element within the main section, navigate to: Section -> Advanced -> Custom CSS. It is advisable to utilize the clamp unit for spacing. This approach eliminates the need to define different spacing values for smaller screens.

Tips:

To alter the positioning of the content relative to the image slider, simply interchange their placements. This modification will be automatically accommodated.

Image slider configuration:

All configuration settings for this image slider can be located within the Custom CSS section of the element "Slider" whose name includes "CSS".

Capabilities:

To adjust the gap between images and columns, modify the value of the --image-list-gap variable.
The animation duration can be set using --image-list-duration.
Image height is controlled via --image-item-height.
Image width is controlled via --image-item-width.
For a reduced height on mobile devices, utilize --image-item-height-mobile.