Skip to Main Content

How to personalize the grids of a blog with Divi

Divi: the easiest WordPress theme to use

Divi: The best WordPress theme of all time!

With over 901.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]

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 your blog's grid 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 show you how to target any individual card.

So this is 4 examples on how to customize your blog, including some hover effects that you can use. At 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

Easily create your website with Elementor

Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]

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 the blog's module cards (including title, article metas, article meta links, and article content) and assigns them the white color.

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.

Other Divi tutorials

This article features 20 comments

  1. Hello,
    I am really a beginner but, thanks to the online tutorials, I manage to build a nice blog.
    Really, thanks for this one because I just had to copy the codes and everything went flawlessly, I'm delighted with the result.
    Thanks again, have a nice day 🙂

  2. Hi,
    the DIVI blog, next to the author's name, places the preposition "of" (eg Stefano). I would like to know if it is possible to change it to "de"

  3. Hello Thierry
    Super tutorial
    I would like to know if it is possible to increase the size of the featured image
    I would like to apply this style to my blog
    Thank you

  4. Hello,
    How can I optimize this layout for mobile (tablet)? I don't have a Schabrettmuster but different colors for each blog post, in a specific order. Of course, that changes when you switch to mobile and the colors are no longer associated with the right posts ...
    Does anyone have an idea here?

  5. Hello,

    Thanks for this article! I would also like to modify the "read more" at the bottom of the articles.
    Could you give us examples of CSS code to change the text and put it in a nice centered button for example?

    Thanking you.
    Sophie

  6. Cuándo lo pones in the CSS personalizado, por ejemplo:
    #gridcard .Column: first-child art: nth-child (impar) {background: #333; }

    da error como el seigue: Expected a FUNCTION or IDENT after colon at line 1, col 18

    regards

    1. Hi,

      Our Blog is automatically translated from French. I therefore invite you to choose the French language in the language widget located on the topbar of our blog and the correct CSS code will be displayed.

    2. usted escribió a bad artículo escrito, debería ser: artículo del primer hijo: no primer hijo del arte:

      You misspelled article, it should be: first-child article: not first-child art:

  7. Hi
    Thanks for the article. I have a grid presentation (Divi Theme) I have thumbnails (photos) for the presentation of the articles, on the other hand when I click to have access to the article, the image is displayed in large at the beginning of the 'article. Is there a way to make it the same size as the thumbnail or delete it from the post view.
    Thank you
    Patrick

  8. Bonjourn, super article
    I try my luck here, sometimes we went around a subject for weeks without finding the answer when the same subject makes sense to others.

    I am therefore looking for the solution in order to set up a post grid, only composed of visuals but of different heights, to be more explicit, that one in two visuals has double the height of the visual next to it.

    An idea ?

    Julien

  9. Super tuto! I will test this weekend for my site.
    Do you have a solution to remove the extracts in the grates?
    Merci à vous
    Sofhy

Leave a comment

Your email address will not be published. Required fields are marked with *

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.

Back To Top
20 shares
Share7
tweet2
Save11