Skip to Main Content

How to customize the grids with a blog Divi

Divi: the easiest WordPress theme to use

Divi: The best WordPress theme of all time!

With over 600.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.

Blog module settings allow you to customize the overall design of your network. You can easily make sure 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 the application of multiple or different designs for the cards 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 map, to create a checkerboard effect. I will also show you how to style each map differently by line and I will show you how to target any individual map.

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:

Configuration de la mise en page dun blog divi

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

  • Layout: Grid (Grid)
  • Number of articles: 12
  • Show the picture in the head: YES
  • Button Read more: ON

Configuration de la grille divi

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

Gridcard css divi

Save your changes

How to understand the layout "Grid" 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 de la disposition grid divi

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:

Compter des articles divi

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:

Nombre pair et impair divi

Designs gate Example

Example # 1: Designing a Checkered Grid

For this first example, I will target all the odd cards of the blog module (1 and 3 cards) 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

Put everything together, this selects the odd numbered cards in the first column of the blog module with the gridcard ID.

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:

Are you looking for the best WordPress themes and plugins?

Download the best plugins and WordPress themes on Envato and easily create your website. Already more than 49.720.000 downloads. [EXCLUSIVE]

Personnalisation des grille impair divi

The next step in creating our checkered layout is to target the odd numbered cards on the third column and apply the dark gray background and white text as 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, #gridcard .column: last-child article: nth-child (odd) .post-content p {color: #ffffff; }

This code refers to the column "last" (in this case, the third column is the last column) with the pseudo "last-child" element.

For the second column (or middle), target the 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, #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.

Mise en forme damier grille divi

Example # 2: Adding Hover Effects with the Checkered Layout

Once you know how to target the blog module's maps, you can modify one of the elements inside the map creatively.

For this example, I'm going to use the checkerboard layout and this time I'm going to change the images to one of the black-and-white dark gray cards when hovering over the map. And, I will make the images to one of the brighter white cards when hovering over the map. To do this, add the following CSS in the custom CSS box (make sure to disable or cut the other code so that it is not incompatible with the new one):

#gridcard .column: first-child item: 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 item: 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 invert effect on cards so that when you hover over white cards, they become dark gray, and when you hover over darker 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, #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, #gridcard .column: last-child article: nth-child (odd): hover .post-content p, #gridcard .column: nth-child (2) : 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, #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, #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, #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, #gridcard .column: nth-child (2) article: nth-child (odd): hover .post-content p {color: #fff; }

Now go see the effect on your blog.

Personnalisation des grilles au survol divi

Example # 3: Customize maps by lines

For the third example, I will apply the same dark background and white text for the cards in each other row (and not column). To do this, you need to target all the even cards in each of the columns. Go to "Divi → Options" theme and make sure you disable or delete any previous CSS code that you have added since the beginning 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, #gridcard article : nth-child (even) .post-content p {color: #fff; }

Here is what the result:

Resultat configuration par ligne divi

Example # 4: Designing a specific grid map

Some of you may want to choose a specific card. To do this, you must find the ID of the unique item that is automatically assigned to each of your cards. For this example, I'm using the Chrome browser.

Go to the page displaying your blog module and right click on one of your cards. In the option box that appears, select "Inspect" (some browsers may have "Inspect Element" or something similar) This will deploy the Developer Tools window that displays both the html and css of your Web page, find the tag of the article that wraps your article and note the ID of the article assigned to it.This is the selector you need to use to target your individual card. right click and click on inspected to find the post-3466 ID.

As below:

Easily create your Online Store

Download free WooCommerce, the best e-commerce plugins to sell your physical and digital products on WordPress. [Recommended]

Modification dun article unique

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, # 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 as you wish.

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, thank you for this one because I only had to copy the codes and everything went flawlessly, I am delighted with the result.
    Thanks again, have a nice day 🙂

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

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

  4. Hello,
    How can I optimize this layout for mobile (tablet)? I do not have a Schabrettmuster but different colors for each blog post, in a specific order. Of course, this changes when we move to mobile and the colors are no longer associated with good posts ...
    Does anyone have an idea here?

  5. Hello,

    Thank you 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 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. Hello
    Thanks for the article. I have a presentation in grid (Theme Divi) 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 appears in big at the beginning of the Article. Is there a way to give it the same size as the thumbnail or delete it in the article view?
    Thank you
    Patrick

  8. Bonjourn, super article
    I try my luck here, sometimes, we turned around a subject for weeks without finding the answer while the same subject is logical for others.

    So I'm looking for the solution to put in place a post grid, only composed of visuals but different heights, to be more explicit, that a visual on two has double the height of the visual next.

    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
16 shares
Share7
tweet2
Save7