Getting Started
The recent invention of the Diviflash has introduced the Divi content carousel module, a distinct feature that brings excellent support for designers. This module is ideal in divination for those who want to create an alluring carousel module. Now, designing a content carousel over various interactive effects by the Diviflash plugin is entirely effortless. The Divi content carousel module consists of several attractive features like child item, carousel setting, advanced carousel setting, item order, great typography, Arrow & dots, button, and suchlike. The child item brings a couple of exclusive features along with itself, which affects a particular item. However, the global setting features apply to the entire container.
Child Item
Before jumping into the deep discussion of Content Carousel global features content, design, and advanced tab, let’s get to know the Child Item first. Child Item written as Add New Item has a couple of fascinating features that only decorate the specific image item. The design attributes of the child item are separated into three categories,
+ Content Option
+ Design Option
+ Advanced Option
Child Item Content Tab
The Content tab of the Diviflash Content Carousel child item contains a few primary features. Designers acquire each mandatory element to define an image, text, title & subtitle, button, item order, 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.
Content
The content setting of the child item content tab is a great way to provide title, subtitle, description on the item. Nevertheless, it authorizes you to define the description with a heading tag.
Image
The visibility of the content carousel module depends on the child item image feature. The image feature is dedicated here for you to add an image or icon in the module. Also, providing an image alter-text is super easy in this feature.
Button
You can give 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
Item Order
In many cases, the image, title, subtitle, content, and button need to be displayed in separate locations. For instance, if you want to show the button above the image and title at the bottom of the content, you can achieve these changes with the Item Order feature.
Link
If you seek to take the audience from a child item to another page, the Link feature is ready to please you. The child item link feature allows you to provide a custom link to the item. Diviflash Content Carousel is a well-designed 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 desire. Note, this background will apply to the entire item.
Admin Label
Admin Label of Divi Content Carousel Module provides the opportunity to modify the module name as you want. 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 extraordinary view. In addition, the child item design tab holds several exclusive and highly supportive design features. For instance, image, title & subtitle, content, button, custom spacing, sizing, border, and filter attributes are remarkably noticeable. It sounds like super complicated features, right? But it’s much easier to run than you thought; Just follow the instructions below.
Image
The Image feature of the child item design tab has an intention to decorate the image by implementing a few attributes. Such as fixing the image alignment & maximum width to make the image more appealing. Moreover, this feature helps you to enlarge the small image by forcing the full-width option.
Title
The title feature of the child item allows designers to embellish the title of a specific item. As a designer, you can modify the title tag, background, font-weight & style, title text alignment, color & size. Even more, the title’s letter-spacing & line height can be defined under this title attribute.
Subtitle
Every bit of customization facilities that you get in the title feature also is available under the subtitle feature
Content
Except for the content text tag, every customization facility that you get in the title feature is also available under the content feature.
Button
The button of the child item is a well-organized feature with broad functionalities. You can change the button alignment, color, font-weight & style, button text alignment, color & size. In addition, the button text letter spacing & line height, border color, width & style, and various box-shade effects can be modified in this feature. Also, you are allowed to give a button border corner rounding effect for a better look. However, the most exciting part of this feature is the button wrapper margin & padding and the general margin & padding benefits.
Custom Spacing
Custom spacing is considered a prominent feature of the child item. If you go further down to this setting, you will discover two different categories of customization features; demonstrated below.
- Wrapper spacing
The wrapper spacing attribute lets you put the wrapper margin & padding on the item & image separately. And remember, each ingredient within the item will move at the same time.
- Content spacing
On the other hand, the Content spacing allows designers to put margin and padding in all the directions for the title, subtitle & content text separately. Also, here you have an opportunity to provide the margin only for the image.
Sizing
As a designer, you would love to control the child item’s alignment, width, and height, right? Here, the sizing feature stands in your favor to increase or decrease the item width and height. You can set a min or max height & width for the item.
Border
The Border feature of the child item can provide you with a border corner rounding effect for the item. 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 only the specific item you work on, and it has six distinct shadow effect styles. And above all, get a few options after choosing a shadow effect to adjust the look of the design.
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 with 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.
Child Item Advanced Tab
All you want to achieve is possible under the Content and Design tab, so take advantage as much as you can. 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 to work fluently.
Note Down: All the features and effects you get here apply individually to each child item of the content carousel module.
Global Features of Divi Content Carousel Module
So, it’s time to discover how the global features of the Divi Content Carousel module work? Unlike any other Divi modules, the Diviflash content carousel features are split into three categories,
+ Content Tab
+ Design Tab
+ Advanced Tab
Divi Content Carousel Content Tab
The Content tab of the Diviflash content carousel module is developed alongside several sophisticated features. The properties imported under the content carousel content tab are measured as the foundation of all design methodology. No worries, today we will discuss in detail all the features like the carousel & advanced setting, item order, and more.
Carousel Setting
The Carousel setting is counted as the mother feature of the divi content 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 the Carousel Setting allows designers to define the type of carousel imported in the module. And as a designer, you have two options: the Slide & coverflow type of carousel. So choose one as your design demands.
- 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 other 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 in comparison to the desktop. Here, you can easily determine the number of 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 responsive power of the content carousel module.
- Spacing (px)
You may already get the answer to why the Spacing Px feature is used for? Yes, you guessed it, this feature lets you set a perfect distance between the content carousel images. This property is measured in pixels.
- Speed (ms)
The Speed is a feature used to determine the time it takes for an item to appear in the middle of the content’s carousel slides while clicking the arrow navigation. This property is measured in milliseconds.
- Centered Slides & Loop Effect
Centered slides help you start showing images from the center of content carousel slides. In contrast, the Loop effect allows you to create an endless spherical image exhibition of the content carousel module.
- Autoplay
The Content Carousel Autoplay feature is responsible for inventing an auto slider for carousel slides. Under this feature, you can specify the time required for the sliders to slide automatically. Also, you are allowed to activate the feature called push on hover. This feature enables slider autoplay to be turned off while hovering.
- Arrow & Dot Navigation
Activating the Arrow Navigation feature of the carousel setting produces the arrow sliders on the left & right sides of the content carousel module. On the other hand, create a dot slider for each item at the bottom of the module by turning on the Dot navigation feature.
- Equal Height Item
The Equal Height item is a super supportive attribute when it comes to using different-sized images. This feature is for you to equalize the height of all images.
- Use Lightbox
The Use Lightbox feature allows you to enlarge an image with a click and bring up an arrow to display the following image. Moreover, this feature can show the title of a specific image above the slider view. Remember, if you provide a custom link on the child item, this feature doesn’t work for that item.
Advanced Setting
The Advanced setting is considered the most prominent feature of the divi content carousel module. A few advanced carousel attributes are available under this setting, so let’s jump to know how these features work?
- Enable Slide Shadow
The enable slide shadow is a splendid way to provide a shadow effect to the content carousel slider. This feature consists of two different coloring methods, such as shadow color dark & light.
- Slide Rotate in Degree
In many cases, 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 allows you to give 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 exciting feature of the advanced carousel setting, the Effect Multiplier. The responsibility of this feature is to multiple the value of all the attributes included in the advanced carousel setting. So let’s make it more clear, if you set the value 2 here, it will double the regular values of all the features.
Please note, every feature under this setting is related to each other and requires a proper combination of values of all attributes.
Item Order
Sometimes, the image, title, subtitle, content, and button need to be demonstrated in different locations. For example, if you want to display the image below the content and the button above the title or the subtitle above the button, you can achieve these designs under the item order feature. And this global item order attribute affects the entire module at a time.
Background
The background setting of the Divi content 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 desire. Note, this background will apply to the whole module.
Admin Label
Admin Label of Divi Content Carousel Module provides the opportunity to modify the module name as you want. So, it doesn’t have to be the module’s actual name that generally shows on the wireframe view.
Divi Content Carousel Module Design Tab
The Divi Content Carousel module design tab is a place that helps organize each component into a great look. The design tab stands in the designer’s favor alongside multiple progressive and modern features. Such as the title, subtitle, content, button, arrows, dots, custom spacing, and much more. It sounds like a vast operative process, doesn’t it? However, it is effortless to manage: just follow the instructions below.
Title
The Title setting is dedicated to embellishing the title background color, title font, weight & style. Also, the text alignment, color & size, letter spacing & line-height can be decorated as far as design requirements.
Subtitle
All the property included under the title setting is also imported in the Subtitle setting.
Content
All the property included under the title setting is also imported in the Content setting.
Button
This time, the button feature brings some more benefits for the designers, As you may be aware that the button feature can control the button alignment, background color, font weight & style. A full-width and border corner rounding view of the button can be given here as well. And the button feature allows you to change the text alignment, color & size, color spacing, & height of the button. Moreover, this feature is responsible for decorating the button border style, width & color with different shadow effects. Finally, the button attribute lets you provide the button wrapper margin & padding and the general margin & padding alongside all these advanced features.
Arrows
The Arrow feature allows designers to make an alluring and stylish Arrow by decorating each ingredient part by part.
- 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 content carousel has a different attribute to adjust the arrow position, alignment & opacity level.
- Circle Arrow
The Circle Arrow feature provides an excellent circle shape for the Arrow.
- Arrow Icon
Under Arrow Settings, you will have the opportunity to select your preferred icon for the arrow previous and next icons.
- 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.
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 large active dot & active dot color features.
Custom Spacing
Custom spacing is considered a prominent feature of the Content Carousel module. If you go further down to this setting, you will find two different customization features; demonstrated below.
- Wrapper spacing
The wrapper spacing attribute lets you put the wrapper margin & padding on the item & image separately. Also, you can provide wrapper padding on the entire carousel. And remember, each ingredient within the content carousel will move at the same time.
- Content spacing
On the other hand, the Content spacing allows designers to put margin and padding in all the directions for the title, subtitle & content text separately. Also, here you have an opportunity to provide the margin only for the image. Be aware that all effects are applied to the entire container.
Sizing
You would love to control the Content 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. Even you can set a min or max height & width of the content 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 Diviflas Content Carousel module can provide 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 it’s easier than you thought.
Box-shadow
This Box shadow affects the entire Divi Content Carousel module and has six distinct shadow effect styles.
Animation
Animation effect setting exists in all the Divi default modules. It has seven different effects and other options to adjust the beauty of the animated section.
Divi Content Carousel Advanced Tab
All you want to achieve is possible under the Content and Design tab, so take the convenience as much as you can. However, the advanced tab of the Divi Content Carousel seeks to quench the thirst of the designer to control the entire module. Designers can precisely play with each element of the content carousel by implementing CSS ID & Classes and other Custom CSS code. Further, The visibility, transitions, position, and scroll effects settings are included to work fluently.
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 three different custom CSS areas in the Diviflash Content 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 content carousel section for a particular device.
Transitions
You have transition duration, Delay, and curve speed features 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 content 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.
