Grid blog on Divi: Divi’s Blog module has a useful grid layout option for your blog posts. The grid template organizes your blog posts in boxes or cards that make the posts easier to see on a screen compared to the standard view.
The Blog module settings allow you to customize the overall design of your network. You can easily make all your cards have the same background color, font, margins, etc. However, the styling options are limited to the design of the grid as a whole, which makes it difficult to apply multiple or different designs to the maps within the grid.
Today I’m going to show you how to target and apply more than one style to the cards that make up your blog’s grid using custom CSS. I’ll show you how to apply a different style to each other cards, to create a checkerboard effect. I’ll also show you how to style each card differently per row and show you how to target any individual card.
So these are 4 examples of how to personalize your blog, including some hover effects that you can use. By the end of this tutorial, you are going to be able to create some awesome designs for your blog.
Grid blog on Divi: Setting up the Grid layout for your blog
Before you start designing the blog module cards, make sure you have at least 12 posts already created with a featured image.
Once your posts have been created, create a new page. On your new page, deploy the blog module on a full-width column in a standard part:
Click to modify the settings of the Blog module. Under General settings change the following settings:
- Layout: Grid
- Number of Items: 12
- Show featured image: YES
- Read more button: ON
Under Custom CSS, enter “grid card” in the CSS ID text box. It will be a way for us to personalize only this blog module.
Save your changes
Grid blog on Divi: How to understand the “Grid” layout for the blog
Now that you have your blog grid in place, it’s important to understand the structure of the grid layout so that you can locate the blog module cards that you want to customize.
The blog grid is set up with a three-column layout. The following is an illustration of the blog grid with 12 blog posts divided into three columns:
Blog postcards are ordered from top to bottom in each of the columns. So if you want to give them a number, you will need to count from 1 to 4 on each length from top to bottom.
Since you know the numerical order of each blog card under each column, you can also identify each card as an odd or even number.
Grid blog on Divi: Sample Grid Designs
Example n ° 1: Design of a “Checkered” grid
For this first example, I’m going to target all the odd cards in the blog module (cards 1 and 3) in the first column giving them a dark gray background color. To do this, go to “Divi → Theme options” and add the following CSS in the Custom CSS text box:
Here’s a breakdown of what this code does:
#gridcard = the id of the entire blog module.
column: first-child = select the first column in the blog module
post: nth-child (odd) = select all odd posts (or cards) in the column
Putting it all together, this selects the odd-numbered cards in the first column of the blog module with the ID “grid card”.
Then add your white text that will go on the dark background by adding the following CSS:
This code targets all text elements in blog module cards (including title, post meta, post meta links, and post content) and sets them to white.
The next step in creating our checkerboard layout is to target the odd-numbered cards on the third column and apply the dark gray background and white text just like you did in the first column. Add the following CSS in the Custom CSS text box:
This code targets the “last” column ( in this case, the third column is the last column ) with the nickname “last-child” element.
For the second column ( or middle ), target the even cards to complete the checkerboard effect.
Example # 2: Adding Hover Effects with the Checkered Layout
Once you know how to target the blog module cards, you can change any of the elements inside the card creatively.
For this example, I’m going to use the checkerboard layout and this time I’m going to change the front page images from dark gray maps to black and white when hovering over the map. And, I’m going to make the front page images of the white cards brighter when hovering over the card. To do this, add the following CSS in the Custom CSS area (make sure to disable or cut the other code so that it is not incompatible with the new one):
You can also add an inversion effect on the cards so that when you hover over the white cards they turn dark gray, and when you hover over the dark gray cards they turn white.
Add the following CSS in addition to the CSS above:
Now go see the effect on your blog.
Read more: How to use the Divi role editor on WordPress
Example # 3: Customizing cards bylines
For the third example, I’m going to apply the same dark background and white text to the cards in every other row (not column). To do this, you need to target all of the even cards in each of the columns. Go to “Divi → Options” of the theme and make sure to disable or remove any previous CSS code that you have added since the start of this tutorial. Then add the following CSS:
Example # 4: Designing a specific grid map
Some of you may want to choose a specific card. To do this, you need to find the unique item ID that is automatically assigned to each of your cards. For this example, I am using the Chrome browser.
Go to the page displaying your blog module and right-click on one of your cards. In the options box that appears, select “Inspect” (some browsers may have “Inspect Item” or something similar. This will deploy the developer tools window which displays both the Html and CSS for your webpage. Find the article tag that wraps your article and write down the article ID assigned to it. This is the selector you should use to target your individual card. For my example, I have right-clicked and clicked on inspected to find the id “post-3466”.
To target only this map in CSS to give it a gray background with white font, you must use the following CSS:
Now the card has this specific style applied to it.
These are just a few examples of the many different styles you can accomplish using this type of CSS targeting of Blog module cards. You no longer have to keep the same style for each card. You can design them however you want.
For website maintenance service contact us.