Slideshow

The slideshow section is a dynamic module designed to showcase multiple images or videos, allowing for automatic or manual slide transitions. It is ideal for visually appealing areas on the homepage or product pages, effectively enhancing the user experience and conveying content visually.

Basic Settings

• Enable Full Width: When enabled, the slideshow will display across the full width of the page.

• Slideshow Height:

  • Auto: The height of the slideshow adjusts automatically based on content.

  • Small: Sets a small height for the slideshow.

  • Medium: Sets a medium height for the slideshow.

  • Large: Sets a large height for the slideshow.

• Adapt to Transparent Header: If the header has a transparent background, enabling this option will add padding at the top to prevent content overlap.

Carousel Settings

• Enable Autoplay: Automatically loops the slideshow when enabled.

• Autoplay Speed: Use the slider to set the interval of the slideshow, measured in seconds.

• Show Navigation Buttons (Desktop): When enabled, navigation buttons will appear on desktop.

• Show Pagination Dots: Displays pagination dots indicating the current slide.

• Navigation & Pagination Colors: Customize the color of navigation buttons and pagination dots.

SEO Optimization

• Set as Main Content in Above-the-Fold Area: When enabled, the slideshow is considered the primary content area of the page, which helps improve SEO scores by optimizing the template accordingly.

Image Settings (For Image Slide)

• Image: Upload or select an image to display in the slideshow.

• Image Overlay Opacity: Adjust the transparency of the image overlay using a slider, ranging from 0% to 100%.

Video Settings (For Video Slide)

• Video: Upload or select a video to display in the slideshow.

• Video Overlay Opacity: Adjust the transparency of the video overlay using a slider, ranging from 0% to 100%.

Content Settings

• Color Scheme: Choose the color scheme for the content in the slideshow.

• Position: Set the position of the content (e.g., “Bottom Center”).

Text Alignment

• Text Alignment: Choose how the text is aligned within the slide: left-aligned, centered, or right-aligned.

Caption

• Caption: Add a brief caption.

Heading

• Heading: Enter the heading for the slideshow.

• Heading Size: Set the size of the heading (small, medium, large).

• Decorative Heading: When enabled, the heading will use a decorative font.

Description

• Description: Enter a detailed description for the slideshow content.

Button Settings

• Button Text: Enter the text to be displayed on the button.

• Button Link: Set the URL to which the button will redirect users. This can be an internal or external link.

• Button Style:

  • Primary: The button will appear in the primary style.

  • Secondary: The button will appear in the secondary style.

• Show Button Arrow: When enabled, an arrow icon will appear on the button.

Mobile Settings

• Image: Upload or select a separate image for mobile devices to ensure the slideshow displays optimally on smaller screens.