Divi product grid module by DiviFlash is a splendid way to show your woo-commerce products elegantly. This module carries a vast number of unique and compelling features like child items, setting, pagination & sale badge, and more for a faster & attractive design. These features are separated into three categories, Content, Design & Advanced tabs.
However, child items are a prominent part of the module and bring a lot of surprises for you.
Child item
There are 11 different elements indicated as child items required to display a product with an informative look.
Image
Title
Rating
Price
Short Description
Add to Cart
Categories
Tags
Button
Custom Text
Divider
These child items are busy beautifying your woo-commerce product appearance to attract consumers. Before jumping into the deep on global features, let’s learn how the child features can help you. The child item feature list is divided into three categories,
Content Tab
Design Tab
Advanced Tab
Child Item – Content Tab
The child’s content tab brings essential features to start creating designs from scratch. Remember, the structure of the content tab properties varies depending on each item design requisition individually. So, without further ado, let’s get started to know each item’s attributes one by one.
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 a type to pull the product images on the viewport. A few features will show after setting type as image, allowing you to put Outside Inner Wrapper and Z-index value.
Overlay & Scale
Overlay & scale hover effects for the product image summons the necessity of the Overlay and Image scale feature. This attribute 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 while giving an overlay effect to the image. In contrast, the image scale feature has 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.
Animation Settings
The animation setting feature lets you hide or show the product title over the hover mode. Moreover, by activating the Always Show on Mobile option, you can only turn off the hover effect for the title on the mobile screen.
Element Type – Product Rating
Here you get the opportunity to select the product rating as a child item. Afterward, you can define the display type as inline, block, and inline-block.
Animation Settings
The animation setting feature lets you hide or show the product ratings over the hover mode. Moreover, by activating the Always Show on Mobile option, you can show the product rating on the mobile screen.
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.
Animation Settings
The animation setting feature lets you hide or show the product price over the hover mode. Moreover, by activating the Always Show on Mobile option, you can show the product price on the mobile screen.
Element Type – Short Description
Select the product’s short description element as the child item and set a limit of characters to show the content description.
Element Type – Add-to-Cart
You can give a custom name for the add-to-cart under the element feature. Also, you can define the display type of the add-to-card element.
Icon Setting
Icon setting is placed to add an icon or image next to the add-to-cart. Also, you get a few more features that enhance the beauty of the icon. For example, if you want to show the add-to-cart icon without any text, utilize the Use only icon feature.
Animation Setting
The animation setting feature lets you hide or show the add-to-cart button over the hover mode. Also, you can always show the button on the mobile screen with this feature.
Element Type – Categories
You can define the display type for the categories item under this feature. Moreover, you can use an internal link and a separator to differentiate the categories for an organized view.
Animation Setting
The animation setting feature lets you hide or show the categories over the hover mode. Moreover, by activating the Always Show on Mobile option, you can show the product categories on the mobile screen.
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 categories for an organized view.
Animation Setting
The animation setting feature lets you hide or show the tags over the hover mode. Also, you can always show the tags on the mobile screen with this feature.
Element Type – Button
After taking the button as element type, you can apply the outside inner wrapper to the child item. Also, you get the privilege to implement custom text for the read more button and define its display type.
Icon Setting
Icon setting is placed to add an icon or image next to the read more button. Also, you get a few features like the icon placement & spacing that enhance the beauty of the icon. If you want to show the button icon without any text, utilize the Use only icon feature.
Animation Setting
The animation setting feature lets you hide or show the read more button over the hover mode. Also, you can always show the button on the mobile screen with this feature.
Element Type – Custom Text
After taking the custom text as element type, you can apply the outside inner wrapper to the child item with the element feature. Also, you get the privilege to write anything as custom text and define its display type.
Animation Setting
The animation setting feature lets you hide or show the custom text over the hover mode. Also, you can always show Custom text on the mobile screen with this feature.
Element Type – Divider
The divider child item of the DiviFlash product grid 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 determined here.
Common Feature Of Content Tab
The changes of 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.
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, this background will apply to the specific item.
Admin Label
Admin Label of child item provides the opportunity to modify the item name as you wanted. 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 has several features dedicated to embellishing the element with a unique look. So, let’s discover how all these features help you design promptly and creatively.
Text
The text feature of the child item design tab aligns and applies a shadow effect to the text.
Not Down; this feature is only applicable for items that contain texts.
Text Styles
The text styles feature provides a couple of options to modify the text font style, weight, text alignment, color, size, letter spacing, and line-height of the child item.
Note, this feature is only applicable for items that contain texts.
Pricing Styles
Pricing styles setting contains a number of features available for two different 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, this feature is only applicable for the price child item.
Rating
The rating feature is only available for the rating item, and it allows changing the rating size & color. You can define a color for the disabled rating status. Also, you can show the rating icons for which the product has 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
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. 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
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 object by implementing Custom CSS code. Further, The visibility, transitions, position, and scroll effects settings are included to work fluently.
Note: All the features and effects you get here apply individually to each child item of the product grid module.
Global Features of Divi Product Grid Module
Now it’s time to discover how the global features work and what possibilities you get. Remember, all these features impact the entire module at once. The product grid module isolated all the global features into three different categories,
Content Tab
Design Tab
Advanced Tab
Divi Product Grid Module – Content Tab
The content tab conveys all the initial features that structure the module from scratch. All these are alluring enough to influence the visitors instantly. So, let’s look at the content tab features list with an explanation.
Settings
This feature allows you to select the product’s type to show, such as the latest, featured, best selling, rating, and category. Also, you can set the product count and order settings to define the number of posts that will be displayed on the viewport accordingly.
Pagination & Sale Badge
Pagination and sale badges bring you many design options to style the pagination and badge. These are,
Show Pagination
Activating the show pagination feature brings the pagination on the module with some other facilities. For instance, you can enable the pagination result count and sorting off options to get a better design.
Show Badge
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 grid module decorates the background of each product at a time. Here, you can 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 you desire. Note, this background will apply to the entire module.
Admin Label
Admin Label of the Divi product grid 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 Product Grid Module – Design Tab
The design tab carries features like alignment, layout, sale badge text & style, item inner & outer wrapper, pagination styler, and more. All of these features are easy to customize and highly organized. Utilizing these features can take your eCommerce shop appearance to the next level.
Alignment
The alignment feature makes an alignment for the entire container of the product grid module.
Layout
Under the layout feature, you get the grid & masonry layout. Also, you can define the number of columns for the screen and the space between them. Finally, use the equal height option to equalize all the items simultaneously.
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 with a text-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. However, this feature allows you to apply a compatible border-width along with the box-shadow effect.
Item Outer Wrapper
This feature is applicable for the child items that were taken outside of the inner 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 outer wrapper feature is also available for the item inner wrapper. But you get one big difference here; it affects only those items at the inside of the wrapper.
Pagination Styles
The pagination style is devoted in the design tab for applying color, gradient, or image as the pagination wrapper background. Also, you can set the alignment and next & previous icons of the pagination. However, this feature brings the pagination background and other typography settings with a stylish border & text-shadow effect.
Active Pagination Button
Every design possibility you get in the pagination styles is also available for the active pagination button. Remember, this feature is applicable for the pagination active stage. However, you won’t get the wrapper background and pagination placement options here.
Pagination Result Count
Every design possibility you get in the pagination styles is also available for the pagination result count. Remember, this feature is only applicable for the pagination result that is visible at the top of the container. However, you won’t get the wrapper background and pagination placement options here.
Pagination Sorting
Under this feature, you get all design options available in the pagination style setting. However, the wrapper background and pagination placement options are not applied here.
Sizing
As a designer, you would love to control the Divi product grid module’s alignment, width, and height, right? Here, the sizing feature stands in your favor to increase or decrease the module width and height. In addition, 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 & outer wrapper parts. Also, it helps you to provide margin & padding over the pagination wrapper, button, result count, and sorting. Nevertheless, you can play with the sale badge and product item outer wrapping by giving them a compatible margin & padding.
Transform
The transform feature of the Divi product grid module provides five different types of transform facilities. For instance, transform scale, translate, rotate, skew, and origin options. Implementing these functions gives you better control over the section.
Animation
Animation setting exists in all the Divi modules and works as a default feature. It has seven different effects and other options to adjust the beauty of the animated section.
Divi Product Grid Module – Advanced Tab
The greatness you seek to bring in your design is possible under the content and design tab. However, the advanced tab opens the door for developers to have excellent control over the module. Under the advanced tab, you can precisely play with each 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.
CSS ID & Classes
CSS ID: The only purpose of the CSS ID section is to identify the ingredient separately while linking, scripting, or styling the module.
CSS Class: Assign any 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
The Custom CSS section has three distinct CSS implementing areas in the Divi product grid module. You have access to all the areas to write down any CSS Code and target any particular location.
Visibility
The visibility option of the advanced setting offers designers to conceal the product grid module on particular devices.
Transitions
Under the transition setting, you have features like Transition duration, Delay, and Curve Speed for better customization.
Position
Here you can take complete control over the relative, absolute, and fixed position. This option is also available in every Divi module and works almost the same for all.
Scroll Effects
If you want to provide a scroll effect to your module, you have the opportunity with the scroll effect setting. Under this setting, you get a Sticky position, scroll transform effects, vertical motion, and motion effect trigger functions like any other Divi module.
NOTE:
Mobile: Any setting with 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.
Find the breakdown of all the features available on the Divi product grid module. Then, understand the module well and utilize this to its optimal.
