Image Carousel Overview

Getting Started

The Divi image Carousel module is a creative innovation of the diviflash plugin that simplifies designers’ journeys. This module is evaluated as the most precious property and also the pride of the diviflash plugin. This module is famous for its creativity that makes the designing process completely easier and less time-consuming. Divi image carousel demonstrates many features for the designer’s favor like the child item, carousel setting, carousel type, advanced carousel setting, content area background, great typography, arrow & dots, etc. button, overlay, custom spacing, and many more. However, the child item carries different eye-catchy features by itself, which affects a particular item. Whereas the global setting features apply to the entire module.

Child Item – Divi Image Carousel

Before jumping into the deep discussion of Image Carousel global features, let’s get to know the Child Item first. Child Item, written as Add New Item, has interesting features that only decorate the selected image. The design attributes of the child item are separated into three categories,

+ Content Options
+ Design Options
+ Advanced Options

Child Item Content Tab

The Content tab of the Diviflash Image Carousel child item consists of a few primary and prominent features. Designers receive each feature obligatory to define an image, image caption & button, link, and such like for a specific item of the module under this content tab. Don’t be confused; today, we will have a detailed discussion about all our features.

Image

The visibility of the image carousel module depends on the child item image feature. The image feature is dedicated here for you to add an image along with an image alter-text. Also, giving an image caption is extremely easy in the image feature of the child item.

Button

You can provide a button custom text & URL under the button feature of the child item content tab. Further, you can order to open the URL in a new tab or an existing window.

Link

If you want to take the audience from a child item to another page, the Link feature is ready to serve you. The child item link feature allows you to provide a custom link to the item. Diviflash Image Carousel is a super organized module with each customization setting that will be needed while working.

Background

The background features of the child Items Content tab have multiple attributes to apply for a better layout view. Such as background color, gradient color, image, and video features. And on top of these features, there are some settings to make each adjustment as you desired. Note, this background is applied to the entire item as the divi default feature.

Admin

Admin Label of child item Content tab provides the opportunity to modify the module name as you wanted. So, it doesn’t have to be the module’s actual name that generally shows on the wireframe view.

Child Item Design Tab

The child item’s Design Tab helps you embellish each element of a particular item with an alluring look. In addition, the child item design tab brings several exclusive and super supportive design attributes. For instance, overlay, hover, caption, button, custom spacing, border, and filter attributes are remarkably noticeable. It sounds like super complicated features, right? But it’s much easier to run than you thought; follow the instructions below.

Image Carousel Design Tab Single Element

Overlay

The overlay of the child item mainly emphasizes deploying the background and gradient color over the item image. Thus, you get two distinct color effects while activating the gradient mode and a few attributes to adjust the color based on gradient type, direction, and position. Even more, the overlay setting lets you change the vertical alignment of the content.Hover
Activating the Enable Content on the hover feature of the child item’s hover setting demonstrates the content over the hovering. Also, a couple of animated direction effects are listed here for a better show-off.

Caption

The Caption feature of the child item allows designers to decorate the caption of a specific item. For example, you can modify the caption title tag, font-weight & style, caption text alignment, color & size as a designer. Even more, the captain’s letter-spacing & line-height can be defined under this caption attribute.

Button

The button of the child item is a well-organized feature with broad features. You can modify the button alignment, color, font-weight & style, button text alignment, color & size. Also, the button text letter spacing & height, border color, width & style, alongside various box-shadow effects, are carried by this feature. Nevertheless, you can create a button with a border corner rounding effect for a better look.

Custom Spacing

Custom spacing is regarded as the most precious feature of the child item. If you go further down to this setting, you will discover two different spacing attributes below.

Wrapper spacing
The wrapper spacing attribute lets you provide the wrapper margin & padding on the item. Moreover, you can apply margin & padding to the content area under this setting.
Content spacing
On the other hand, the Content spacing allows designers to put margin and padding in all the directions for the button & caption separately.

Spacing

Divi makes the spacing setting a default feature for the entire module. Therefore, you will find two common margins and padding settings that work the same for all Divi modules in this function.

Border

The Border feature of the Diviflash Image Carousel module provides you a border corner rounding effect for the container. Also, you can customize the design by changing the border width, style, and color under it. However, don’t feel confused by just reading; try once and see if it’s easier than you thought.

Filter

The filter feature is awe-inspiring and supportive, among other Divi default features. Under this unique function, you will achieve numerous color effects for the child item. The filter setting is responsible for adding effects like hue, saturation, brightness, contrast, opacity, blur, and suchlike to your items. So, increase or decrease the value of these effects as you want them to your design.

Transform

The transform feature of the child item provides you five different types of transform facilities. For instance, transform scale, translate, rotate, skew, and origin options. Implementing these functions on the specific item will give better control over the section.

Image Carousel Advanced Tab Single Element

Child Item Advanced Tab

All you want to achieve is possible under the child item Content and Design tab, so take the advantages as much as possible. However, the Child Item Advanced tab has an innovative intention to create something extraordinary for items. Here, designers can precisely play with each element added to the item by implementing Custom CSS code. Further, The visibility, transitions, position, and scroll effects settings are included here to work fluently.
Note: All the features and effects you get here apply individually to each child item of the Image Carousel module.

Global Features of Divi Image Carousel Module

So, it’s time to figure out how the global features of the Divi Image Carousel module work? Unlike any other Divi modules, the Diviflash Image Carousel features are split into three categories,
+ Content Tab
+ Design Tab
+ Advanced Tab

Divi Image Carousel Content Tab

The Content tab of the Diviflash image carousel module is invented with multiple sophisticated features. The properties imported under the image carousel content tab are considered the foundation of all design methodology. No worries, today we will discuss all the features like the carousel & advanced setting, content area background, and more.

Content Tab Image Carousel

Carousel Setting

The Carousel setting is counted as the most imperative feature of the Divi image carousel module. A couple of advanced carousel attributes are included under this setting, so let’s jump to know how these features work?

Carousel Type
The Carousel Type feature of Carousel Setting lets designers select the type of carousel imported in the module. And as a designer, you have four options: the Slide, Cube, Coverflow & Flip type of carousel. So choose one as your design demands.
Variable Width
Activating the variable width attribute allows you to adjust an equal width for all the images. Also, this feature brings a feature called Max-image Height that controls the maximum height of images. Be aware that this feature is available only for the Slide carousel.
Max Slide Desktop, Tablet & Mobile
The Max Slide feature for the Desktop, Tablet & Mobile is the precious beauty of this module. Creating a different viewport for these three different devices is just a matter of a click under the max slide attribute, as you are aware that the mobile and tablet screens are smaller than the desktop. Here, you can easily determine the number of image slides displayed on the screen of several devices. So, this feature is proven as super supportive in such circumstances. In other words, you can define these features as the responsiveness power of the image carousel module. Remember turning on the variable width takes away the Max Slide Desktop, Tablet & Mobile features.
Spacing
You may already get the answer to why the Spacing feature is used for? Yes, you guessed it, this feature lets you set a perfect distance between the carousel images. This property is measured in pixels. Note down; this feature is only available for the slide & coverflow image carousel.
Speed
Speed is a feature used for determining the time it takes for an item to appear in the middle of the carousel slides while clicking the arrow navigation. This property is measured in milliseconds.
Centered slides
The Center slide makes your sliders center-oriented, which by default starts from the left.
Autoplay & Push on hover
The Image Carousel Autoplay feature is responsible for inventing an auto slider for carousel slides. Under this feature, you can specify the speed for the sliders to slide automatically. Also, you are allowed to activate the feature called pause on hover. This feature allows slider autoplay to pause while hovering.
Arrow navigation
Activating the Arrow Navigation feature of the carousel setting produces the arrow sliders on the left & right sides of the image carousel module. And this feature is available for every type of image carousel.
Dots navigation
The Dots Navigation feature creates a dot slider for each item at the bottom of the module. Customizer for this is available under the design tab.
Use Light-Box
The Use of Lightbox feature allows you to enlarge an image with a click and bring up an arrow to navigate to the next image. Moreover, this feature can show the caption of a specific image above the slider view. Remember, if you provide a custom link on the child item, this feature doesn’t work.

Advanced Carousel Setting

The Advanced Carousel setting integrates a bunch of pro features in the Divi image carousel module. In addition, a couple of super supportive carousel attributes are included under this setting, so let’s jump to know how these features work? Remember, this feature is only available for the coverflow carousel.

Coverflow Carousel Divi

Enable Slide Shadow
The enable slide shadow is an attractive method to create a shadow effect to the coverflow image carousel slider. This feature consists of two different coloring methods, such as shadow color dark & light.
Slide Rotate in Degree
Often designers seek to implement a compatible rotate effect on the carousel slider. In such cases, the Slide Rotate feature will be worthy enough to meet designers’ requirements. Therefore, the Slide Rotate property is measured by degree.
Stretch Space Between Slide
You might already understand what and how this feature of advanced settings works? Yes, the name of this feature represents its task. So, for example, the Stretch Space Between Slides gives you an appropriate distance among the carousel sliders.
Stredepth Offset
The Stredepth Offset feature is used for defining a compatible depth of the coverflow carousel effect. Unless you try and see the difference while changing the value of this feature, it might be hard to understand.
Effect Multiplier
Here we come to an interesting feature of the advanced carousel setting, the Effect Multiplier. This feature’s responsibility is to multiply the value of all the attributes included in the advanced carousel setting. Let’s make it clearer; if you set the value two here, it will double the normal values of all the features. Highly recommend playing with it for better understanding.
Please note down, every feature under this setting is related to each other and requires a proper combination of values in all attributes.

Content Area Background

Often designers look for the unique and distinctive look of the content of the image carousel. The content area background specifically notifies the area of image carousel content for embellishing over various backgrounds & gradient colors. Even an image can be given here as the background of the content area.

Background

The background setting of the Divi image carousel content tab has multiple facilities to implement for a better layout. Such as background color, gradient color, image, and video features. And on top of these features, there are some settings to make each adjustment as you desired.

Admin Label

Admin Label of Divi Image Carousel Module provides the opportunity to modify the module name as you wanted. So, it doesn’t have to be the module’s actual name that generally shows on the wireframe view.

Divi Image Carousel Module Design Tab

The design tab of the Divi image Carousel module lets you organize every ingredient into a great look. The design tab stands in the designer’s favor alongside multiple revolutionary and modern features. Such as the overlay, image setting, hover, caption, button, arrows, dots, custom spacing, and much more. Does it seem like a huge operative process? It might. However, it is very easy to manage: follow the instructions below.

Overlay

The purpose of the Image Carousel Overlay setting is to implement a solid or gradient color over the entire carousel. You get two distinct color effects while activating the gradient mode and a few attributes to adjust the color based on gradient type, direction, and position. Even more, the overlay setting lets you change the vertical alignment of the content. Remember, this feature affects all the image carousel sliders at the same time.

Image Setting

Image Setting of the Diviflash image carousel module emerges with several interesting effects for the carousel images. Such as an image’s maximum width & alignment is controlled under the image setting. Moreover, as a designer, you are lucky to have the potential to create an equal height for all the images by just activating the Equal Height Image Container attribute. Of course, this will only work if your images are in the same ratio. Nevertheless, the image force full-width feature is also imported under this setting.

Hover

Activating the Enable Content on the hover feature of the Diviflash image carousel hover setting demonstrates the content over the hovering. Also, a couple of animated direction effects are listed here for a better show-off. However, the most interesting part of this feature is the image scale effect on hover mode. And don’t worry about the image overflow effect; you can turn it off with the overflow hidden feature.

Caption

The Caption feature of the Diviflash image carousel module helps designers decorate the caption of all the carousel sliders. You can modify the caption title tag, font-weight & style, caption text alignment, color & size as a designer. Even more, the caption’s letter-spacing & line-height can be defined under this caption attribute.

Button

The button of the image carousel is a well-organized setting with broad features. You can modify the button alignment, color, font-weight & style, button text alignment, color & size. Also, the button text letter spacing & height, border color, width & style, alongside various box-shadow effects, are carried by this feature. Nevertheless, you can create a button with a border corner rounding effect for a better look.

Arrows

The arrow feature allows designers to make an alluring and stylish Arrow by decorating each ingredient part by part.

Arrow Icon
Under Arrow Settings, you will have the opportunity to select your preferred icon for the arrow previous and next icons. And you can define the icon size as you required.
Arrow Icon Color & Background
The arrow icon color attribute is imported to change the arrow color. Meanwhile, the background feature is to modify the arrow background color.
Arrow Position, Alignment & Opacity
The Arrow feature of the Image carousel has a different attribute to adjust the arrow position, alignment & opacity level.
Arrow Margin & Padding
The arrow is considered a self-sufficient feature when it comes to the embellishment of an arrow icon. This feature provides two different margin & padding facilities for the previous and next Arrow icon. Besides that, you can give a box-shadow effect for the arrow icons.

Dots

The Dots attribute authorizes you to design the dots icon by changing its alignment & color. Also, you can provide a unique look to the active dot icon by implementing the active dot color features.

Custom spacing

Custom spacing is regarded as the most imperative feature of the Diviflash image carousel module. If you go further down to this setting, you will discover two different spacing attributes below.

Wrapper spacing
The wrapper spacing attribute lets you provide the wrapper margin & padding for the entire container. Also, proving a wrapper margin & padding for the item is super easy. Moreover, you can apply margin & padding to the content area under this setting. Remember, the whole process is going to affect each slider of the entire module at a time.
Content spacing
On the other hand, the Content spacing allows designers to put margin and padding in all the directions for the button & caption separately.
Note: the whole process will affect the caption & button of each slider of the entire module at a time.

Sizing

You would love to control the Image Carousel module’s alignment, width, and height as a designer. Here, the sizing feature stands in your favor to increase or decrease your container’s width and height. In addition, you can set a min or max-height & width of the carousel.

Spacing

Divi makes the spacing setting a default feature for the whole module. Therefore, you will find two common margins and padding settings that work the same for all Divi modules in this function.

Border

The Border feature of the Diviflash Image Carousel module can provide you a border corner rounding effect for the image container. Also, you can customize the design by changing the border width, style, and color under it. However, don’t feel confused by just reading; try once and see if it’s easier than you thought.

Box Shadow

This Box shadow affects all individual items of the Divi image Carousel module and has six distinct shadow effects with a customizer.

Transform

The transform feature of the image carousel provides you five different types of transform facilities. For instance, transform scale, translate, rotate, skew, and origin options. Implementing these functions on the specific item will give better control over the module. This transform applies to all individual items.

Animation

Animation effect setting exists in all the Divi default modules. It is also available in the divi image carousel module. It has seven different effects and other options to adjust the beauty of the animated section.

Divi Image Carousel Advanced Tab

All you want to achieve is possible under the Content and Design tab, so take the convenience as much as possible. However, the advanced tab of the Diviflash Image Carousel seeks to quench the thirst of the designer to control the entire module. Designers can precisely play with each image carousel element by implementing CSS ID & Classes and other Custom CSS code. Further, The visibility, transitions, position, and scroll effects settings are included to work fluently.

Advanced Tab Image Carousel

CSS ID & Classes

CSS ID: The only purpose of the CSS ID section is to identify the ingredient separately while linking, scripting, or style the module.
CSS Class: Assign any number of CSS classes to the element, separated by spaces, which can be used to assign custom CSS style from within your child’s theme or from Divi’s custom CSS inputs.

Custom CSS

There are Nine different custom CSS areas in the Diviflash Image Carousel module, and here you can target and set your custom CSS code. There is a sign “?” in each CSS input box that will tell you which class has been targeted.

Visibility

The advanced setting’s visibility option allows designers to hide the image carousel section for a particular device.

Transitions

You have features like Transition duration, Delay, and Curve Speed for better customization under the transition setting.

Position

Here you have complete control over the relative, absolute, and fixed positions. This option is also available in every Divi module and works almost the same for all.

Scroll Effects

If you wish to give a scroll effect to your image carousel module, here you have the opportunity to achieve it with the scroll effect setting. Under this setting, you get a Sticky position, scroll transform effects, enable vertical motion, and motion effect trigger functions.

NOTE:

Mobile: Any setting that has a mobile icon will allow you to customize according to devices. You can select different settings for desktop, tablet & Mobile.
Mouse: A mouse pointer in the setting will allow you to set a hover effect on this element.

Submit a Comment

Your email address will not be published.