Getting started

The divi post grid module is an extended version of the divi blog module invented by Diviflash. This module is announced as one of the most precious products of the Divi flash. It’s mainly dedicated to demonstrating blog pages or sections with a fantastic look. However, discovering many advanced features is very common under this module, such as the child item, post setting, item background, layout, item inner & outer wrapper, pagination button & active number styler, spacing, etc. As a consequence, you might get stuck somewhere with the customizing process. Therefore, today we will walk you through all the features and customizing process in detail.

Child Item

Under the divi blog grid module, you will discover 11 different child items generally available in a blog post. 

Those are-

1. Post Image

2. Post Title

3. Post Content

4. Read More Button

5. Post-Author

6. Publish Date

7. Post Categories

8. Post Tags

9. Post Comments

10. Custom Text

11. Divider

However, it would help if you were careful about these child items and that they carry several pro attributes along with themselves. These features allow designers to embellish each ingredient applied in a particular child item. So, before jumping into the deep global parts, let’s learn how the child features work. The child item feature list is divided into three categories,

+ Content Tab

+ Design Tab

+ Advanced tab

Child Item Content Tab

The Content tab of the child items brings the 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 post image as a type to pull featured images of your blog post. A new feature will show after setting type as image, allowing you to put the image outside the inner wrapper. 

Overlay & Scale

Achieving overlay & scale hover effects on the content 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 are allowed to add an icon while giving an overlay effect to the image. In contrast, the image scale feature lets you apply various scale animation effects for the post image.  

Element Type – Title 

First, under the element feature, you need to select the title as a child item. After that, the title element feature allows defining the heading tag of the post title.

Element Type –Content

The content element feature of the content tab is presented to define multiple settings. For example, the element gives the authorization to show post excerpt by activating Use Post Excerpt setting. Also, the number of excerpt characters can be ordered with this setting. And don’t forget you have an option to determine whether a proportion of the main content or the excerpt would show for the post. 

Element Type – Read More Button

First, you need to select the read more button under the element feature as a child item. The read more button helps the designer to provide a custom name to the Read More Button based on the design’s requirement.

Icon Setting 

Activating the icon settings of the read more button imports an icon after the button. This feature also has the power to play over the icon size & color. 

Element Type – Post Author

The element setting of the post-author child item can bestow an outside inner wrapper for a better demonstration. Also, showing the author image with the perfect text size is super easy here. Of course, as a designer, you can hide the author’s text if required with this feature. Nevertheless, this setting allows displaying the post-author box in three different ways, the inline-block, inline & block. 

Icon Setting

The icon settings are introduced here for the designer to place an icon before the author’s image. And designers can precisely change the icon size and color as well.  

Element Type – Publish Date

The element feature is responsible for applying the outside inner wrapper and changing the post publish date format. Moreover, this setting allows displaying the post publish date under three different styles, inline-block, inline & block.  

Icon Setting 

The icon settings are introduced here for the designer to place an icon before the post date. And designers can precisely change the icon size and color as well. 

Element Type – Post Categories

The element setting of the post-category child item lets designers apply the outside inner wrapper effect. Also, it defines the way to display the post category among three different styles.    

Icon Setting 

The icon settings are dedicated for the designer to place an icon before the post category. Besides that, a designer can precisely change the icon size and color under this setting.    

Element Type – Post Tags 

The post tag contains the customizing features available for the post categories.  

Element Type – Post Comments 

The post comment item has the proposition to add effects like the outside inner wrapper and inline-block, block & inline styles to the content comment section. In addition, depending on the requirement, designers can turn off the visibility of the comment text.   

Icon Setting

The icon settings are dedicated for the designer to place an icon before the post comments. Besides that, a designer can precisely change the icon size and color under this setting.      

Element Type – Custom Text

The element setting of the custom text child item allows designers to apply the outside inner wrapper effect to the custom text. However, you can change the custom text if you want to use something different that interacts with the audience promptly. Nevertheless, this setting allows displaying the custom text under three different styles, the inline-block, inline & block. 

Element Type – Divider

The divider child item of the divi blog 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 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 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

It’s time to decorate each ingredient of the child item applied previously through the content tab. The design tab contains many supportive features like the image setting, text, text style, spacing, sizing, border, box-shadow, etc. The entire responsibility of these features is to embellish each child item with an enticing look.

Image Setting

The image setting of the design tab has an intention to compress the image into different sizes. Besides that, you get the opportunity to activate the force full-width attribute for the image. Note down; this feature is only available for the design tab of the post image item.   

Text 

The text feature is dedicated to defining the text alignment alongside a text-shadow effect. Remember, this feature only works with an item that contains text ingredients.  

Text Style

The Text Style feature provides the chance to change the text font, weight, alignment, text color, etc. Further, you can control the text size, letter spacing & line-height under this attribute. Remember, this feature only works with an item that contains text ingredients.

Spacing

Under the spacing feature, you will find two standard margins and padding settings that work the same for all the child items.

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 design tab 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 if it’s easier than you thought.

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 your module. So, increase or decrease the value of these effects as you want them to your design. Not down; 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 Down: All the features and effects you get here apply individually to each child item of the divi blog grid module.

Global Features of Divi Blog Grid Module

Now, the moment arises when you need to utilize the global feature of the divi blog grid module. The global features should be in your concern that they impact the entire module at once. like any other divi module, the structure of the divi blog grid module global features is established into three categories,

+ Content Option

+ Design Option

+ Advanced Option

Divi Blog Grid Module Content Tab

The content tab was invented to achieve a couple of initial features for the blog grid module. The post setting & item background are regarded as the prominent features of the divi blog grid module. Besides these, a few supportive settings are included in this module for premium performance. A detailed explanation of all the content tab features has been given below.

Post Settings

The post settings are counted as a first-line feature of the content tab. It’s an integration of all the pro attributes dedicated to define various components of the module. 

Post Count

The post count attribute of the post setting brings the opportunity to determine the number of posts shown on the viewport.

Display Post & Older By

The Display Post By option allows designers to fix displaying posts depending on three facts; the recent bog, blog category & blog tag. 

Post Offset Number

The post offset number is a crucial feature considering a few designing prospects. Under this attribute,  you can provide a numeric value of the recent posts that would be left behind from the viewport. To be specific, when you seek to hide the first 2 or 3 posts from the viewport, you can provide that numeric value as a post offset number.

Pagination

The Post Setting also allows designers to apply the pagination on the blog page. In addition, designers can call posts based on their numeric values by activating the Use Number Pagination attribute.

Older & Next Entries Button Text

Under the Post Setting, you also get yourself an option to give a custom text for the button of older & next entries.

Use Image As  Background

Use Image As Background feature of the post setting lets designers apply the blog post featured image as the background of the blog post. 

Item Background

The item background feature of the divi blog grid module is imported to decorate the background of each blog item with an enticing look. Here, you are allowed to implement new color, gradient & image as the item 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 blog 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 Blog Grid Module Design Tab

As a designer, when you are done with putting elements on the content tab, it’s time to embellish these ingredients with an attractive look. The design tab of the blog grid module is presented for you to play precisely with the module’s appearance. A range of advanced features included here lets you follow an effortless procedure to adorn each element. Now, let’s learn all the features in detail, demonstrated below.

Alignment

The Alignment feature of the divi blog grid module is deployed to make alignment for the entire container. This feature lets the designer make an alignment for every single element under one click.

Layout

Under the layout feature, you can apply two different layout models for the blog page, the grid &  masonry layouts. Moreover, it provides an opportunity to determine the number of up to 5 columns displayed on the viewport. Finally, you can apply a compatible space between columns and make an equal height for each column.                   

Item Outer Wrapper

The item outer wrapper feature is responsible for adding a border coroner rounding effect to the item outside of the container. Also, you can modify the border style, width & color over several shadow effects.

Item Inner Wrapper 

Every customizing feature is included in the Item Outer Wrapper, also available for the Item Inner Wrapper setting. But there is a big difference between these two features; the inner wrapper applies to an item placed inside the container, and the outer wrapper does the opposite.

Pagination Button Styles

The pagination button style is an extraordinary feature deployed to decorate the pagination button. This feature allows designers to change the alignment, next & previous icon, and background of the pagination button. Also, it defines the pagination button font weight, style, alignment & color, text size, line height & latter spacing alongside text-shadow effects. You can also modify the button border style, width & color with corner rounding & box-shadow effects.     

Active Pagination Number 

Under the active pagination number attribute, you achieve all the customizing properties available in the pagination button style attribute. Remember, this feature affects the page number that is active now. Let me clarify when you click on the next page, the existing page numeric value lost the active style, and the next one got it.  

Sizing 

As a designer, you would love to control the alignment, width, and height of the divi blog grid module, right? Here, the sizing feature stands in your favor to increase or decrease the module width and height. Even, you can set a min or max-height & width for the module.

Spacing

Don’t consider the divi default spacing system; the Diviflash invented this spacing as an extraordinary feature for the divi blog grid module. This feature authorizes you to apply margin & padding over the entire container, blog item inner wrapper, and module pagination. Also, this spacing attribute can provide padding over the blog item’s outer wrapper. However, you can implement the general margin and padding for the entire module. So, apply proper margin & padding in all the ingredients’ directions, and fabricate a design that you ever wanted.     

Transform

The transform feature of the divi blog grid module provides you with five different types of transform facilities. For instance, transform scale, translate, rotate, skew, and origin options. Implementing these functions on your blog grid will give you better control over the section.

Animation 

Animation setting exists in all the Divi modules works as a default feature. It has seven different effects and other options to adjust the beauty of the animated section.

Advanced Divi Blog Gird Module Advanced Tab

All you seek to achieve in your design is possible under the content and design tab. However, the Diviflash blog grid module’s advanced tab stands beside designers to provide direct control over the module. As a designer, you can precisely play with each element of this module 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 blog 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 blog 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 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.