The divi product carousel module by DiviFlash brings a ton of ways to customize your divi woo-commerce store. It has a large number of exclusive features like child items, carousel setting, advanced carousel setting, arrow & dots, great typography, and more. These features help you to make a splendid and responsive product listing remarkably. The divi wooCommerce product carousel module divided its features list into three different categories,
+ Content Tab
+ Design Tab
+ Advanced Tab
However, all of the child items are considered the most precious feature of the product carousel module. Also, every child item brings several features to beautify them. Therefore, before jumping into the global feature of the module, we will go through the child items with detailed observation.
Child items
There are 11 different elements indicated as child items required to display a product with an informative look.
1. Image
2. Title
3. Rating
4. Price
5. Short Description
6. Add to Cart
7. Categories
8. Tags
9. Button
10. Custom Text
11. Divider
All of these child items are highly customizable and can represent your products with a convincing look. Unlike the global feature, child items have a bunch of features isolated into three categories.
+ Content Tab
+ Design Tab
+ Advanced Tab
Child Item Content Tab
The child item content tab plays a vital role to give the module an imaginative look. It brings a list of remarkable features to start the design process. However, the content tab feature structure has slight changes depending on every child item.
To get started, you need to click on the plus icon and select element types from the list of 11. Each element comes with some unique features, which are described below. Some common parts were told afterward.
Element type – Image
Here you need to select the image as an element to pull the product images on the viewport. A few features will show after selecting the element as an image.
A feature immediately after element type shows up that can put the image outside the inner wrapper.
Overlay & Scale
Overlay & scale hover effects for the product image summons the necessity of the Overlay and Image scale feature. This feature lets you implement an overlay effect with two colors, the primary & secondary. Also, it can define the direction of the overlay gradient color. Finally, you can add an icon with reveal animation while giving an overlay effect to the image. In addition, the image scale feature brings various scale animation effects.
Element type – Title
Under the element feature, you can select the title as a child item. Afterward, this feature allows defining the heading tag of the product title. Also, you can put this element into the Outside Inner Wrapper.
Element type – Product Rating
Here you get the opportunity to select the product rating as a child item. You can define the display type as inline, block, and inline-block. Also, you can take the product rating outside of the inner wrapper.
Element Type – Product Price
Here you get the opportunity to select the product price as a child item. Afterward, you can set a tag and the display type of the product price. Finally, you get the privilege to use the Outside Inner Wrapper feature as well.
Element Type – Short Description
Select the product’s short description element as the child item and set a limit of characters to show the product description. Also, you have the facility to take the description element outside of the inner wrapper.
Element Type – Add-to-Cart
After adding this element, You can give a custom name for the add-to-cart under the element feature. Also, you can define the display type of the element and take it to the outside of the inner wrapper.
Icon Setting
Here you can insert an icon or an image next to add to cart text. In addition, The icon or image can be customized in different colors and sizes. Here you find some other handy options like only icon showing option, Icon position placement, and a fantastic feature named Text Show on Hover.
Element Type – Categories
You can define the display type for the category item under this feature. Moreover, you can use an internal link and a separator to differentiate a category for an organized view. Also, you have the facility to take the category element outside of the inner wrapper.
Element Type – Tags
You can define the display type for the tags item under this feature. Moreover, you can use an internal link and a separator to differentiate the tag for an organized view. Also, you have the facility to take the tag element outside of the inner wrapper.
Element Type – Button
This button is different than the add to cart button. The Action for this button will take you to the product detail page. After taking the button as element type, you can use the outside inner wrapper for this element. Also, you get the privilege to implement custom text for the read more button and define its display type.
Icon Setting
This icon setting is the same as the icon setting described above under the add-to-cart element. The only difference is this will affect on button element only.
Element Type – Custom Text
After taking the custom text as element type, you can put this outside inner wrapper to the child item under the element feature. Also, you get the privilege to write anything as custom text and define its display type.
Element Type – Divider
After selecting the divider element as the child item, you can set the outside inner wrapper to this item under this element feature.
Divider option
The divider child item of the DiviFlash product carousel module has broad functionalities. This feature allows changing the divider height, primary & secondary color, and color direction. Moreover, the starting & ending point of the divider can be selected here.
Common Feature Of Content Tab
The changes in the content tab depending on the different child items have been demonstrated above. Here, a description of the standard features available for every child item is given below.
Animation Settings
The animation setting feature lets you hide or show the product element over hover mode. This animation feature is available for each element except for the image. Unfortunately, hover doesn’t sync well with mobile, so we kept turning off the option for mobile if you need it. However, you can set different animations with the power of transform options from the design tab.
Background
The background features of the child Items Content tab have multiple attributes to apply 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 that this background will apply to the entire item.
Admin Label
Admin Label of child item allows you to modify the item name. So, it doesn’t have to be the child item’s actual name that generally shows on the wireframe view.
Child Item Design Tab
The child item design tab is the place that helps you to bring creativity while playing with an item. So, let’s begin the discussion of every individual feature located in the design tab.
Text
The text feature of the child item design tab makes the alignment and applies a shadow effect to the text.
Note that this feature is only applicable for items that contain texts.
Text Styles
The text styles feature provides options to modify the text font style, weight, text alignment, color, size, letter spacing, and line-height of the child item.
Note that this feature is only applicable for items that contain texts.
Pricing Styles
The pricing styles feature has two different price categories, the off-price & regular price. So, you can change the font style, weight, alignment, color, text size, letter spacing & line-height of both prices.
Note that this feature is only for the element product price.
Ratting
The ratting feature is only available for the ratting item, and it allows changing the ratting size & color. You can define a color for the disabled ratting stage. Also, you can show the ratting icons for the products that have no reviews at all.
Spacing
Under the spacing feature, you will find two standard margins and padding settings that work the same for all the child items. In addition, however, you get an icon margin option for which element has an icon.
Sizing
You would love to control the child item’s alignment, width, and height as a designer, right? Here, the sizing feature stands in your favor to increase or decrease the item width and height. Even you can set a min or max-height & width for the item.
Border
The Border feature of the child item 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.
Box-shadow
This Box shadow affects the entire child item, and this feature consists of distinct shadow effect styles with all the necessary settings.
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 a particular child item. The filter setting is responsible for adding effects like hue, saturation, brightness, contrast, opacity, blur, and suchlike to the item. So, increase or decrease the value of these effects as you want them to your design.
Note; this feature applies only to the child item that consists of an image.
Transform
The transform feature of the child item design tab provides you with five different types of transform facilities. For instance, transform scale, translate, rotate, skew, and origin options. Implementing these functions on your items will give you better control over the design.
Child Item Advanced Tab
The child item advanced tab brings a bit more freedom to play with the items. In addition, this tab has several remarkable features like Custom CSS, condition, visibility, position, scroll effects, and more to style items with an innovative look.
Note: All the features and effects you get here apply individually to each child item of the product carousel module.
Global Features of Divi Product Carousel Module
The global feature of the product carousel impacts the entire module at a time, and all of the features are separated into three categories. So, it’s time to learn how these features work and the possibilities you get to go beyond limitations.
+ Content Tab
+ Design Tab
+ Advanced Tab
Divi Product Carousel Module – Content Tab
The content tab of this module has the prominent and initial role of establishing the product carousel over an alluring look. It has multiple advanced features, including carousel settings and others. A detailed demonstration of all the features has given below.
Settings
This feature allows you to select the product’s type to show, such as the latest, featured, best selling, ratting, and category. Also, you can set the product count and order settings to define the number of products that will be displayed on the viewport accordingly.
Carousel Setting
The Carousel setting is the most valuable feature of the divi product carousel module. Several advanced carousel functionalities are added in this setting, so let’s drive to know how these features work?
Carousel Type
Here you have two types of carousel sliders to choose from. One is the regular slider, and another is Coverflow. The coverflow effect comes with advanced settings, which are described below.
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 devices is just a matter of a click under the max slide attribute. Here, you can easily determine the number of slides displayed on the screen of several devices.
Spacing (px)
You may already get the answer to why the Spacing feature is used for? This feature lets you set a perfect distance between the products. 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 carousel slides while clicking the arrow navigation. This property is measured in milliseconds.
Centered Slides & Loop Effect
Centered slides help you start showing products from the center of the carousel slides. In contrast, the Loop effect allows you to create an endless spherical product exhibition inside the carousel.
Autoplay
The product carousel Autoplay feature is responsible for creating 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 produces the arrow icon on the left & right sides of the carousel. 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
Here we have a handy feature to make each container equal in height. Of course, your content can be in different lengths, but with this feature, your container can be the same in height. Just turn it On and see it in action.
Advanced Setting
The Advanced setting brings a lot of magic features to play over the carousel artistically. Unfortunately, these features are only available when carousel-type coverflow is selected.
Enable Slide Shadow
The enable slide shadow is a splendid way to provide a shadow effect to the product carousel slider. This feature consists of two different coloring methods, such as shadow color dark & light.
Slide Rotate in Degree
Designers often 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 feature allows you to give an appropriate distance among the carousel sliders.
StreDepth Offset
The Stredepth Offset feature defines 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 clarify that if you set the value 2 here, it will double the normal values of all other features in the Advanced setting.
Please note that every feature under this setting is related to each other and requires a proper combination of values.
Sale Badge Setting
Turning on the show badge feature allows you to display a badge on the module. Further, you can take the badge to the image container and place it in various positions with custom badge text if the design requires it. Nevertheless, you get the freedom to write an after badge and custom sold-out text to show the price percentage and availability.
Item Background
The item background feature of the divi product carousel module decorates the background of each product at a time. Here, you are allowed to implement new color, gradient & image as the product post background.
Background
The background features of the 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 desired. Note that this background will apply to the entire module.
Admin Label
Admin Label of the divi product carousel module allows you 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 Product Carousel Module – Design Tab
The design tab of the product carousel stands beside you to decorate the entire module easily and quickly. All of the features are highly organized and can bring charms to the module.
Alignment
The alignment feature makes an alignment for the entire container of the product carousel module.
Sales Badge Text
The sales badge text is dedicated to modifying the font style, weight, text color, size, letter spacing & line-height of the badge text with a shadow effect. Also, all these options are available for the After & Suffix badge texts.
Sales Badge Style
You can style the sale badge container with a new background color, border corner rounding effect, and color. This feature allows you to apply a compatible border-width alongside the box-shadow effect. Also, you can apply a gradient to the background of the sale badge.
Item Outer Wrapper
This feature applies to the child items that were taken outside the wrapper. Item outer wrapper lets you apply a border corner rounding effect with an attractive border style, width, and color at a time to every item. Moreover, you get seven distinct box-shadows with other adjustment settings.
Item inner Wrapper
Every design possibility you get in the item’s outer wrapper is also available for the item’s inner wrapper. But you get one big difference here; it affects only those items inside the wrapper.
Arrows
The Arrow feature allows for making 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 product carousel has a different attribute to adjust the arrow position, alignment & opacity level.
Circle Arrow
The Circle Arrow feature provides an excellent circle shape around the Arrow.
Arrow Icon
Under Arrow Settings, you can select your preferred icon for the arrow previous and next icons.
Arrow Margin & Padding
The Arrow is considered a self-sufficient feature regarding the embellishment of an arrow icon. This feature provides two different margin & padding facilities for the two icons.
Arrow Layout Style
Under this feature, you can provide a corner rounding effect with a stylish border width, color, and shadow effects.
Dots
The Dots feature authorizes you to design the dots icon by changing its alignment, position & color. Also, you can provide a unique look to the dot in the active stage by implementing the large active dot & active dot color features. However, the dots wrapper margin and padding feature are available inside this feature.
Sizing
As a designer, you would love to control the alignment, width, and height of the divi product carousel module, right? Here, the sizing feature stands in your favor to increase or decrease the module width and height. You can set a min or max height & width for the module.
Spacing
The spacing feature allows you to apply margin & padding around the container, product item inner wrapper, and sale badge. Also, you can play with the product item’s outer wrapping by giving compatible padding. Nevertheless, you get the general margin & padding here as well.
Transform
The transform feature of the module provides five different types of transform options. For instance, transform scale, translate, rotate, skew, and origin options. Implementing these functions gives you better control over the section.
Animation
Animation settings exist in all Divi modules and work as a default feature. It has seven different effects and other options to adjust the beauty of the animated section.
Divi Product Carousel Module – AdvancedTab
The advanced tab enriches the design possibilities and allows developers to play over the product carousel module precisely. So, let’s look at the features explained below and understand their possibilities.
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 product 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.
Condition
The conditions feature of the advanced tab allows you to hide or show any module based on post info, location, user, interaction, and device.
Visibility
The advanced setting’s visibility option allows designers to hide the product 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 product 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 with a mobile icon will allow you to customize according to the device. 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.
