Divi Image Slider

The Divi Image Slider module is a versatile module used to create dynamic image sliders on Divi-powered websites. It allows you to display a series of images with smooth transitions and customizable settings, offering an engaging way to showcase visual content.

The Divi Image Slider module is a versatile module used to create dynamic image sliders on Divi-powered websites. It allows you to display a series of images with smooth transitions and customizable settings, offering an engaging way to showcase visual content.

Content

This tab handles the core content and functionality of the image slider. Here, you can manage settings like the images, captions, and the layout of the slider.

General

This is toggle from the General tab.

1. Choose Images – Select the images you want to display in the slider.
2. Image Title – Set the title text for each image in the slider.
3. Image Position – Choose the alignment of the image within the slider (e.g., top, center, bottom).
4. Image Size – Select the size of the image. Options include 300×300, 400×250, 960×540, or custom dimensions.
5. Image Gap – Define the space between images in the slider.
6. Link To – Choose where the image links to. Options include None, Lightbox, Attachment page, Media file, or Custom URL.

Settings

This is the settings toggle from the general tab.

1. Pause on Hover – Enable or disable the pause of the slider when the user hovers over it.
2. Direction – Choose the slide direction (e.g., Left to Right, Right to Left).
3. Speed – Set the transition speed between images.
4. Loop – Enable or disable the looping of the slider images.
5. Gradient – Enable or disable a gradient overlay on the images.
6. Gradient Width – Adjust the width of the gradient overlay.
7. Gradient Color – Set the color of the gradient overlay.

Design

This tab focuses on styling and visual customization. It allows you to adjust the appearance of the slider, including options for image size, spacing, text styling, and navigation controls.

Common

This section allows you to apply general styling settings to the entire image slider. You can adjust the overall padding, margins, and border radius to create spacing around the images and ensure the slider fits seamlessly within your design. It also lets you control the background color or image for the slider, adding a custom touch.

Images

 Under this option, you can control the appearance of the images within the slider. You can adjust the image width, height, and alignment, as well as set specific image sizes to ensure they fit properly within the slider’s dimensions. Additionally, you can apply image effects such as border styles, shadow effects, or even round the corners for a more polished design.

Title

The Title toggle gives you the ability to style the text that appears over or under each image in the slider. You can customize the font size, color, weight, and family to match your website’s design. There are also alignment options to position the title on the left, right, or center of the image, providing flexibility in how the title is presented across different screen sizes.