Post grid layout is a blog page designed to bring an attractive and organizing look to your blog posts. As a Divi user, having an interest in stylish showcasing your blog posts through a grid layout is common.
Although you can design a simple grid layout with Divi, it lacks the functionality to display an intuitive and unique grid layout. Similarly, when it comes to creating a blog post in grid layout, most users are unsatisfied. So, how to display blog posts in grid layout? Like everyone else, we also wonder about it and come up with a solution to it. Here, DiviFlash Post Grid module comes with the support. And it was the easiest one.
We find everything we need to create an awesome WordPress blog post grid on our Divi website. So today, we will share with you exactly that experience in this tutorial.
Take a look at our design.
Follow this link and download the demo to learn more about this design. As you hover around this grid section, a tiny part of post content will appear with an overlay effect. This module also offers 11 child items, and you will see some of them in our design as well. So no more delay. We are taking through every step of this process.
Prerequisite:
- Divi Theme.
- DiviFlash Plugin.
How to Make Blog Post Grid in Divi?
Start with creating a new page or inserting a new section within an existing page.
Section Design
In this particular design, we need a regular section. There are no other customizations. So if you are making the same grid layout as in this tutorial, you don’t have to touch the section settings at all. However, for your own design interest, you can add an image or customize it as you want.
Row Design
Here, we will add two single-column rows. For the first one, we will also add some padding to the bottom.
In the Design Tab,
Under Spacing Options,
- Padding: 31px (Bottom)
And, there is nothing to do with the 2nd row. Hence, let’s start with the modules.
Divi Modules
For our design, we are placing three text modules. You will see them one after another. Then, beneath them, there is a divider module before the post Grid module from DiviFlash.
1st-Text Module
As per our design, we will start by adding our first text module. It comes on top of the first row. Here, we will add a short text as heading 4 and customize the font.
In the Content Tab,
Under Text option,
- Body: Our Blog (Heading 4)
Next, select the design tab and set the alignment of heading 4 to the center, and style the text.
In the Design Tab,
Under Heading Text option,
- Heading Level: H4
- Heading 4 Font: Poppins
- Heading 4 Font Style: TT
- Heading 4 Text Alignment: Center
- Heading 4 Text Color: #1976d2
Under Spacing option,
- Margin: 6px (Bottom)
2nd-Text Module
Then, add the second text module. Simply add text for heading 2. Here is the breakdown:
In the Content Tab,
Under Text option,
- Body: Stay updated (Heading 2)
In the design tab, align the heading 2 text to the center like the previous one.
In the Design Tab,
Under Heading Text option,
- Heading Level: H2
- Heading 2 Font: Poppins
- Heading 2 Font Style: TT
- Heading 2 Text Alignment: Center
- Heading 2 Text Color: #1a1a1a
- Heading 2 Text Size: 48px (Desktop), 32px (Mobile)
Keep other settings untouched and select the third text module.
3rd-Text Module
This will be our last text module. Here we will give some dummy text. You can add a short description of your posts.
In the Content Tab,
Under Text option,
- Body: Dummy Text
Afterward, do a few customizations like changing text color, font, and alignment in the design tab.
In the Design Tab,
Under Text Option
- Text Font: Poppins
- Text Text Color: #4b4b4b
- Text Text Size: 16px (Desktop), 14px (Mobile)
- Line Height: 1.8em
- Text Alignment: Center
Under Sizing Option,
- Max Width: 85% (Desktop), 100% (Mobile)
- Module Alignment: Middle
Divider Module
Now, it’s time to add the last module in the first row. It will be a divider module. To style it, open the design setting and apply the following changes:
In the Design Tab,
Under Line Option
- Line Color: #1976d2
Under Sizing Option,
- Divider Weight: 3px
- Max Width: 7%
- Module Alignment: Center
Under Spacing Option,
- Margin: -12px (Top)
- Padding: 0px (Top)
Post Grid Module
Now let’s get started with the post grid module. Add it to the 2nd row. Generally, it has several child items to display your blog posts appealingly. In our design, we are adding six different child items.
You can insert a child item from the content tab of the module setting tab. To do this, click the (+) icon above “Add New Post Element .”Eventually, the post element setting will appear in the module setting bar. Here you will find the child item settings as the same as the default module setting. Hit the “Select Type” under the Element option in the content tab. You can select a child item from the dropdown list.
And every time you complete the design of a child item, click the right mark below in this setting bar. Then you will be returned to the module setting. Here, you can add a child item again following the same process.
Note here that you can’t see the child items until you enable the background image. You will find it under the post setting option in the module content tab. Once you have done it, your child item will be visible as you add them.
Now, let’s see what customization we have done with our child times one by one.
Post Author: We are introducing our post author through this child item. To style this author, we don’t have to touch the content tab. Below, you can see the changes in this child item through the design tab.
In the Design Tab,
Under Text Styles Option
- Text Font: Poppins
- Text Text Color: #ffffff
Publish Date: You can style the publish date here. We are keeping all defaults in the content tab. Along with changing the hover margin under the spacing option, we are making the following modifications in the design tab.
In the Design Tab,
Under Text Styles Option
- Text Font: Poppins
- Text Text Color: #ffffff
Under Spacing Option,
- Margin: 7px (Left/ Right)
- Padding: 7px (Left/ Right)
Under Border Option,
Border Styles:
- Right Border Width: 1px
- Right Border Color: #ffffff
- Left Border Width: 1px
- Left Border Color: #ffffff
Post categories: We are showing our blog category. Here, we have only made a few changes to the text in the design tab.
In the Design Tab,
Under Text Styles Option
- Text Font: Poppins
- Text Text Color: #ffffff
Post Title: Here, you have to only select the h3 tag from the dropdown of Title Tag under the Element option in the content tab. Further, make these simple updates in the design tab.
In the Design Tab,
Under Text Styles Option
- Text Font: Poppins
- Text Font Weight: Bold
- Text Text Color: #ffffff
Post Content: You can show some portion of your content here. We have also decreased the Excerpt Length to 170 under the element option in the content tab. Furthermore, change the top and bottom margins for the hover.
In the Design Tab,
Under Text Styles Option
- Text Font: Poppins
- Text Text Color: rgba(0,0,0,0) and #ffffff (On Hover)
Under Spacing Option,
- Margin: -85px (Top), 105px (Bottom)
On Hover: 0px (Top), 20px (Bottom)
Read More Button: The last child item we added to this design is a read more button. “Continue Reading” will be our button text to encourage visitors to read our blog articles. And, to style the button, we have made customization below:
In the Content Tab,
Under Background option,
- Background Color: #03dac5 (On Hover Only)
In the Design Tab,
Under Text Styles Option
- Text Font: Poppins
- Text Font weight: Bold
- Text Text Color: rgba(255,255,255,0) & #000000 (On Hover)
Under Spacing Option,
- Margin: 0px (Top) & 0px (Bottom)
- Button Padding: 8px (Top/Bottom), 16px (Left/Right)
Under Sizing Option,
- Width: 220px
- Module Alignment: Center
Under Border Option,
- Rounded Corners: 15px (On Hover Only)
Under Box Shadow Option,
- Select a Preset shadow.
- Box Shadow Vertical Position: 0px & 3px (On Hover)
- Box Shadow Blur Strength: 0px & 6px (On Hover)
o, we have added all our child items. However, there is still some work to be done with the content tab of the post grid module setting. You may find some amazing features to control the post grid layout.
Before making the next step, read this short explanation: we want to display our post by category. And we choose food as our category. However, you may have a different scenario, where you can select the Recent option to show the newest post first or a different post category name.
Let’s go back to the content tab,
Under Post Settings Option,
- Post Count: 4
- Display Post By: Category
- Include categories: Food
- Show Pagination: On/Enabled
- Use Image As Background: On/ Enabled
Under Item Background Option,
- Background Color: rgba(0,0,0,0.56)
- Use Gradient Background: ON
- Gradient Background Color: rgba(0,0,0,0.6) (For Both)
- Background Image Size: Custom Size
- Background Width: 100%
- Background Height: 0% & 100% (On Hover)
- Background Image Position: Center
That’s all with the content tab of the post grid module setting. We can move to the design tab.
In the Design Tab,
Under Alignment Option,
- Alignment: Center
Under Layout Option,
- Column: 2 Columns (Desktop), 1 Column (Tablet &Mobile)
- Space Between: 50
- Equal Height: On/ Enabled
Under Item Outer Wrapper Option,
- Item Border Width: 5px
- Item Border Color: rgba(0,0,0,0)
Under Pagination Button Styles Option,
- Background Color: #474747
- Pagination Font: Poppins
- Pagination Text Color: #ffffff
- Border Width: 3px
- Border Color: #b3b3b3
Under Spacing Option,
- Blog Item Inner Wrapper Padding: 170px (top), 100px (Bottom), 20px (Left/Right)
On Hover: 150px (Top), 120px (Bottom)
- Pagination Padding: 5px (Top/ Bottom), 15px (Left /Right)
Finally, we have customized the blog post grid design for our Divi website. Just click the save button below on the right of your screen. Exit the visual builder, and you will find a post grid section. Hover over it to check that your blog content shows up.
So, it was our design. But the DiviFlash Post Grid module has something for everyone. Displaying a unique grid layout is possible if you put some effort into it. Now, let’s see what more impressive features you will have with this module.
Why Choose DiviFlash to Create Post Grid in Divi?
During the customization process of a blog grid post layout with DiviFlash, you will come to meet many features. Below, you will find some notable ones.
- Define the number & columns of a single row.
- Also, offers masonry layouts with vast customization options.
- Provide 11 different drag & drop elements.
- Seven image scale animation effects.
- Choose categories, order, tags, and other options for organizing posts.
Final Thoughts
This is all we can offer you on how to display a blog post grid in Divi. Now I’d like to hear about your post grid layout:
Are there any features from the DiviFlash module that we could use in our post grid layout?
Or maybe you have a query regarding the post grid design of your Divi website.
Or any other thing, share with us in the comments.
0 Comments