Create Image Carousel in Divi –

Hosting Mautic QuickStart -50% with support in Spanish
24 hours and free training

Send up to 1,000,000 emails/year. Mautic support in Spanish 24 hours, 365 days

When we are building our website, one of the elements that most attracts the attention of visitors is finding image carousels, which give our page a dynamism and modern touch as well as being able to display a large number of images and content without overloading. navigation or user experience.

Divi by default despite the fact that if it has a gallery module it does not natively have a specific module to add these carousels, which is why we are going to review not one but several alternatives that we have available to create our carousels in Divi from a fast and intuitive way.

Image Carousel Module for Divi

We start with the following plugin which, despite being simple, does fulfill its function very well. When we install it, we will be able to see the “Image Carousel” module available in our constructor.

Once the module has been added, we will continue adding some images to later validate its operation.

After adding the images we can configure the behavior of the carousel from the “Elements” section where we will find the following options.

-Slides Count: Corresponds to the number of columns that the carousel will show
-Slides Scroll: It is the number of images that are going to pass in the transition, for example we can show each slide one by one or every three in three
-Show Dots: To activate and deactivate the pagination points
-Show Arrows: To activate and deactivate the arrows to move between images

Also from the “Design” tab we will be able to style our carousel, we will review these options.

From the Design section we can find the following:

-Layout: Which presents us with 3 ways in which our carousel can be seen, let’s see them.

Default
It is the conventional view.

CenterMode
In this view the center image takes on a slightly larger aspect making it stand out.

Syced Mode
Finally, in this view, the image shown at the moment is in a large upper container while the others are positioned below in the form of thumbnails.

-Vertical Layout: Activating/deactivating it allows us to exchange the layout of the carousel if in vertical or horizontal view
-Adaptive Height: When this option is activated, if the images vary in their height, the carousel adapts to said image.
-Arrow location: In this option we can have where the arrows are going to be placed, since by default they are on the sides of the carousel but they can be placed on the container or below the container
-Arrow Alignment: In addition to being able to move the arrows above or below the carousel container, we can decide their alignment, if it is to the left, to the right or to the center

Continuing with the Design options, let’s see the “Carousel Elements” section, which allows us to change the colors of the elements involved in the carousel, which are the arrows and the points

Last but not least, we have the “Carousel Animation” section where we can find the following options:

-Autoplay: When activated, it will make the carousel do the slideshow automatically, in addition to showing extra options which we are going to define
-Pause On Hover: Only with the Autoplay option activated will this option be available, which is that when we position the cursor on the carousel the automatic playback will stop or not
-Automatic Animation Speed: This range determines in milliseconds what is the time interval between slides so that it goes to the next one in automatic playback
-Slide Animation Speed: This range determines in milliseconds the transition effect between one slide and another when changed manually by the user, either from the arrows or from the points
-Infinite Animation: When activated, this option allows the carousel to be repeated indefinitely, since otherwise the end of the carousel would be the last image that was added to it.

Reviewing the essential configuration options we can have a result like the following without much effort, to be a simple plugin, well, if it presents us with several forms of customization.

Carousels with DiviTorque

DiviTorque is a plugin with a compendium of modules for Divi that provide us with several interesting options, among all of them only on this occasion we are going to pay special attention to the one that corresponds to the image carousel.

Once installed we will continue to look for the module called “Torque Image Carousel”

Already in the module options from the “Content” tab we are going to add our images, the peculiarity here is that we have many more options available than the previous case, so each image will be taken as an internal element, said element has its own customization options.

Bearing this in mind, we are going to add an image from the “Add new element” option.

Configure Image Content

The new Item that corresponds to the image has the following options in the Content tab

-Upload Image: Upload the photo we want
-Image Alt Text: The Alt text that will take the place of the photo if for some reason it cannot be loaded by the browser
-Title: Title that can be added below the image
-Subtitle: Subtitle that can be added below the title of the image

In addition to the options described, we can find one in particular that allows us to add a button below the image, the “Use Button” option, when selected, displays the following options:

-Button Text: The text that the button to add will have
-Button Link: The link that the button will have
-Open Button link in new window: Enable or disable the link assigned in the previous option to open in a new tab

Configure Image Layout

Once the options of the Content tab are configured, we will see how much we can customize our image and its elements from the Design tab.

In the “Image” option we can configure the following:

-Image Height: We can define the height of the image in pixels or in percentages
-Image Hover Animation: From this selector we will have a variety of effects available that can be assigned to the image when the cursor passes over it

In the “Overlay” option we can configure the following:

-Overlay Background: We can define a layer on top of the image, this layer can be a solid color or a gradient
-Show Overlay on Hover: By default, when this option is deactivated, the overlay is applied directly to the image. However, if it is activated, the overlay will only be shown when the cursor passes over the image. In addition to being activated, it will show an additional option called “Overlay Hover Speed”
-Overlay Hover Speed: after activating “Show Overlay on Hover” we can define the speed of the overlay transition in the image in milliseconds

Continuing with the settings in the “Overlay” option

-Overlay Icon: We can assign an icon from the available list that will appear in the overlay, this configuration is inherited from the one we saw previously, if we configure that the overlay will appear when hovering in the image, the assigned icon will also appear under the same principle.
-Overlay Icon Color: The color that the selected icon will have
-Overlay Icon Size: The size of the icon in pixels
-Overlar Icon opacity: The opacity of the selected icon, where 1 is fully visible and by reducing this number it becomes more transparent

In the “Content” option we can configure the following:

-Content Text Alignment: The alignment that the elements below the image will have, (Title, subtitle and button), these elements can be aligned in the left, right and center positions
-Content Width: We can define the width of the content container in percentages
-Content Type: A selector where the “Normal” option is preselected, which means that the content will be below the image, if we select “Absolute” this content will be inside the image as if it were a higher layer
-Content Position: We can arrange the position of the content, by default “Bottom” is selected, but it is possible to move said content above the image by selecting “Top”.

Following the settings of the “Content Type” option if we select “Absolute” it will make the displayed options of “Content Position” change drastically adding a couple of selectors according to this case, let’s see it

-Content Horizontal Placement: The horizontal alignment of the absolute content on the image
-Content Vertical Placement: The vertical alignment of the absolute content on the image

Continuing with the settings in the “Content” option

-Content Padding: Apply spacing to content
-Content Background: Apply a background to the content which can be a solid color, a gradient or an image
-Box Shadow: Apply shadows around the container to give an enhanced effect

The rest of the options that remain to be defined are Title Text, Subtitle Text and Buttom. However, their configuration options are the conventional ones of the elements that we already know in Divi, so reviewing them would be redundant.

Returning to Carousel Settings

After the review that we have done to all the options of the items that house the images, we can now return to the settings of the Carousel itself, which are quite peculiar, let’s see them.

In the “Carousel Settings” section the options are divided into two sub-tabs, General and Advanced

In the General tab we can configure the following:

-Animation Speed: Define the speed of the images in milliseconds
-Autoplay: If the carousel is active, it will play by itself in addition to making the next option visible.
-Autoplay speed: Available if the “Autoplay” option is activated, the speed of automatic playback is defined
-Use Navigation: Defines if the arrows are shown to navigate between the images of the carousel
-Use Pagination: Defines if the lower points are shown to navigate between the images of the carousel
-Use Fixed Width Slide: When activated, the “Slide Width” option is displayed, which allows defining a specific width for each slide that makes up the carousel

Continuing with the settings in the “General” tab

-Slide Spacing: Applies spacing between the carousel slides
-Apply Spacing on First & Last item: This active option makes the first and last slide have a default spacing
-Infinite Looping: Determines that the carousel when reaching the end can continue playing again from the first slide

In the Advanced tab we can configure the following:

-Sliding CSS Transition: In the selector we can choose the type of animation that the carousel will do when passing between one slide and another
-Swipe: Enables it to be possible to move the slides with…