The Divi Blog module has a layout option in the form of a useful grid for your blog posts. The grid template organizes your blog posts into boxes or maps that simplify the visibility of items on a screen in comparison 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 style options are limited to the design of the grid as a whole, which makes it difficult applying 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 the grid. your blog using custom CSS. I'll show you how to apply a different style to each other card, to create a checkerboard effect. I will also show you how to style each card differently per row and I will show you how to target any individual card.

So these are 4 examples on how to customize your blog, including some hover effects you can use. By the end of this tutorial, you will be able to create awesome designs for your blog.

Other tutorials on Divi theme

Let's start.

Configuration Layout Grid for your blog

Before starting with the design of the blog module cards, make sure you have at least 12 articles already created with an image in the box.

Once your messages have been created, create a new page. On your new page, deploy the blog module on a full-width column in a standard part:

Configuring the layout of a divi blog

Click to edit the settings of the Blog module. Under General Settings, change the following settings:

  • Layout: Grid (Grid)
  • Number of articles: 12
  • Show featured image: YES
  • Button Read more: ON

Divi grid configuration

Under Custom CSS, enter "gridcard" in the CSS ID text box. It will be a way for us to personalize only this blog module.

Gridcard css divi

Save your changes

How to understand the "Grid" layout for the blog

Now that you have your blog grid in place, it is important to understand the structure of the layout of the grid so that you can locate maps of the blog module you want to customize.

The blog grid is configured with a three-column layout. The following is an illustration of the blog grid with 12 blog articles divided into three columns:

Presentation of the grid divi layout

The blog ticket cards 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 1 to 4 on each length from top to bottom:

Count divi articles

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 as follows:

Even and odd number divi

Designs gate Example

Example n ยฐ 1: Design of a "Checkered" grid

For this first example, I'll target all of 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:

#gridcard .column: first-child article: nth-child (odd) {background: #333; }

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) = selects all odd items (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 "gridcard".

Then add your white text that will go on the dark background by adding the following CSS:

#gridcard .column: first-child article: nth-child (odd) .entry-title, #gridcard .column: first-child Article: nth-child (odd) .post-meta a, #gridcard .column: first-child }

This code targets all text elements in blog module cards (including title, post metas, post meta links, and contents of the article) and gives them the color white.

Here is the result:

Customization of odd divi grid

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:

#gridcard .column: last-child article: nth-child (odd) {background: # 333; } #gridcard .column: last-child article: nth-child (odd) .entry-title, #gridcard .column: last-child article: nth-child (odd) .post-meta, #gridcard .column: last- child article: nth-child (odd) .post-meta a, #gridcard .column: last-child article: nth-child (odd) .post-content p {color: #ffffff; }

This code targets the "last" column (in this case, the third column is the last column) with the nickname element "last-child".

For the second column (or middle), target even cards to complete the checkerboard effect. To do this we need to add the following CSS:

#gridcard .column: nth-child (2) article: nth-child (even) {background: # 333; } #gridcard .column: nth-child (2) article: nth-child (even) .entry-title, #gridcard .column: nth-child (2) article: nth-child (even) .post-meta, # gridcard .column: nth-child (2) article: nth-child (even) .post-meta a, #gridcard .column: nth-child (2) article: nth-child (even) .post-content p {color : #fff; }

Now go check out the blog page to see the checkerboard layout of the Blog module cards.

Checkerboard grid divi layout

Example # 2: Adding Hover Effects with the Checkered Layout

Once you know how to target the blog module cards, you can creatively edit any of the elements inside the card.

For this example, I'm going to use the checkerboard layout and this time I'm going to change the featured 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):

#gridcard .column: first-child article: nth-child (odd), #gridcard .column: last-child article: nth-child (odd), #gridcard .column: nth-child (2) article: nth-child (even) {background: # 333; } #gridcard .column: first-child article: nth-child (odd) .entry-title, #gridcard .column: first-child article: nth-child (odd) .post-meta, #gridcard .column: first- child article: nth-child (odd) .post-meta a, #gridcard .column: first-child article: nth-child (odd) .post-content p, #gridcard .column: last-child article: nth-child (odd) .entry-title, #gridcard .column: last-child article: nth-child (odd) .post-meta, #gridcard .column: last-child article: nth-child (odd) .post-meta a , #gridcard .column: last-child article: nth-child (odd) .post-content p, #gridcard .column: nth-child (2) article: nth-child (even) .entry-title, #gridcard. column: nth-child (2) article: nth-child (even) .post-meta, #gridcard .column: nth-child (2) article: nth-child (even) .post-meta a, #gridcard .column : nth-child (2) article: nth-child (even) .post-content p {color: #fff; } #gridcard .column: nth-child (2) article: nth-child (even): hover img, #gridcard .column: first-child article: nth-child (odd): hover img, #gridcard .column: last -child article: nth-child (odd): hover img {-webkit-filter: grayscale (1); filter: grayscale (1); } #gridcard .column: nth-child (2) article: nth-child (odd): hover img, #gridcard .column: first-child article: nth-child (even): hover img, #gridcard .column: last -child article: nth-child (even): hover img {-webkit-filter: brightness (1.5); filter: brightness (1.5); }

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 and more CSS above:

#gridcard .column article, #gridcard .column article img {-webkit-transition: all 0.8s; -moz-transition: all 0.8s; transition: all 0.8s; } #gridcard .column: first-child article: nth-child (odd): hover, #gridcard .column: last-child article: nth-child (odd): hover, #gridcard .column: nth-child (2) article: nth-child (even): hover {background: #fff; } #gridcard .column: first-child article: nth-child (odd): hover .entry-title, #gridcard .column: first-child article: nth-child (odd): hover .post-meta, #gridcard. column: first-child article: nth-child (odd): hover .post-meta a, #gridcard .column: first-child article: nth-child (odd): hover .post-content p, #gridcard .column: last-child article: nth-child (odd): hover .entry-title, #gridcard .column: last-child article: nth-child (odd): hover .post-meta, #gridcard .column: last-child article : nth-child (odd): hover .post-meta a, #gridcard .column: last-child article: nth-child (odd): hover .post-content p, #gridcard .column: nth-child (2) article: nth-child (even): hover .entry-title, #gridcard .column: nth-child (2) article: nth-child (even): hover .post-meta, #gridcard .column: nth-child ( 2) article: nth-child (even): hover .post-meta a, #gridcard .column: nth-child (2) article: nth-child (even): hover .post-content p {color: # 333; } #gridcard .column: first-child article: nth-child (even): hover, #gridcard .column: last-child article: nth-child (even): hover, #gridcard .column: nth-child (2) article: nth-child (odd): hover {background: # 333; } #gridcard .column: first-child article: nth-child (even): hover .entry-title, #gridcard .column: first-child article: nth-child (even): hover .post-meta, #gridcard. column: first-child article: nth-child (even): hover .post-meta a, #gridcard .column: first-child article: nth-child (even): hover .post-content p, #gridcard .column: last-child article: nth-child (even): hover .entry-title, #gridcard .column: last-child article: nth-child (even): hover .post-meta, #gridcard .column: last-child article : nth-child (even): hover .post-meta a, #gridcard .column: last-child article: nth-child (even): hover .post-content p, #gridcard .column: nth-child (2) article: nth-child (odd): hover .entry-title, #gridcard .column: nth-child (2) article: nth-child (odd): hover .post-meta, #gridcard .column: nth-child ( 2) article: nth-child (odd): hover .post-meta a, #gridcard .column: nth-child (2) article: nth-child (odd): hover .post-content p {color: #fff; }

Now go see the effect on your blog.

Customizing the grids when hovering divi

Example # 3: Customize maps by lines

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:

#gridcard article: nth-child (even) {background-color: # 333; } #gridcard article: nth-child (even) .entry-title, #gridcard article: nth-child (even) .post-meta, #gridcard article: nth-child (even) .post-meta a, #gridcard article : nth-child (even) .post-content p {color: #fff; }

Here is what the result:

Configuration result by divi line

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 which 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 inspected to find the id "post-3466".

As below:

Modification of a single article

To target this CSS card to give him a gray background with a white font, you must use the following CSS:

# post-3466 {background: # 333333; } # post-3466 .entry-title, # post-3466 .post-meta, # post-3466 .post-meta a, # post-3466 .post-content p {color: #fff; }

Now the map has that specific style applied to it.

That's all!

Latest Thoughts

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.

If you have any questions or suggestions feel free to offer them to me.

[vc_row center_row=โ€yesโ€][vc_column width=โ€1/2โ€ณ][vcex_button target=โ€blankโ€ layout=โ€expandedโ€ align=โ€centerโ€ font_family=โ€Ralewayโ€ font_weight=โ€700โ€ณ style=โ€flatโ€ custom_background=โ€#18b69dโ€ custom_hover_background=โ€#118d7aโ€ custom_color=โ€#ffffffโ€ custom_hover_color=โ€#ffffffโ€ icon_right=โ€fa fa-downloadโ€]DOWNLOAD DIVI THEME [/vcex_button][/vc_column][vc_column width=โ€ 1/2โ€ณ][vcex_button url=โ€https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorialsโ€ target=โ€blankโ€ layout=โ€expandedโ€ align=โ€centerโ€ font_family =โ€Ralewayโ€ font_weight=โ€700โ€ณ style=โ€flatโ€ custom_background=โ€#c4226eโ€ custom_hover_background=โ€#8d184fโ€ custom_color=โ€#ffffffโ€ custom_hover_color=โ€#ffffffโ€ icon_right=โ€fa fa-downloadโ€]DOWNLOAD THE TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

Other Divi tutorials