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
- 5 websites for restaurant use Divi theme
- How to add text on a WooCommerce product on Divi
- How to change the menu color between pages on Divi
- Features you do not know about Divi
- How to create a slider on Divi
- How to edit a user role on Divi
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:
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
Under Custom CSS, enter "gridcard" in the CSS ID text box. It will be a way for us to personalize only this blog module.
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:
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:
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:
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:
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.
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.
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:
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:
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
- 5 websites for restaurant use Divi theme
- How to add text on a Divi WooCommerce product
- How to change the menu color between Divi pages
- How to personalize the grids of a blog with Divi
- How to use the role Divi editor on WordPress
- How to create a full screen Divi slider
- How to change the color of menus between Divi pages
- Features you probably do not know about Divi
- How to use Divi Builder on WordPress
- How to use the Divi video scrolling module
- How to use the Divi Builder Flip module
- How to add a testimonial module on Divi Builder
- How to use the Divi text module
- How to create a slider on Divi
- How to edit a Divi user role
- How to use the Divi Social Media module
- How to use the shop module on the theme WordPress Divi
- How to use the Divi sidebar module
- How to use the Divi Price Table Module
- How to use the title module of Divi publications
- How to add a video module of Divi
- How to use the article navigation module
- How to use the Divi search module
- How to use the Divi wallet module
- How to use the person module on Divi Builder
- How to use the wallet module with Divi filter
- How to use the full width slider module
- How to use the Divi Builder Image Module
- How to use the full-width navigation module of Divi Builder
- How to use the image gallery module
- How to use the Divi Builder Full-Width Card Module
- How to use the Divi Full Width Portfolio Module
- How to use the Divi full-width header module
- How to use the Divi Counter Module
- How to use the articles slider on Divi Builder
- How to use the Divi Email Optin module
Good morning ! Do you know if it is possible to modify the number of columns of this Blog object?
I would like each card to be displayed in full width. THANKS !
Hello,
I tried to display the blog posts in "grid" with the id "gridcard" but it does not work. Can you help me ?
Hi,
Sorry for the late response.
Can you rephrase your request please?
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 ๐
You're welcome. Thank you for reading us.
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"
Hello,
Yes it is possible to change this element with Divi.
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
Hello,
Yes it's possible.
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?
Hello,
No Unfortunately.
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
Hi ๐ To change the text of the โread moreโ button, it happens in Blog Settings > Style > Read more Text. You can modify the typography and the text of the "read more". However, I don't know how to make a button out of it. Good setup!
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
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.
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:
Hi,
70 others languages.
Hello
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
Hi,
Sorry, but our divi support is limited to our tutorials. Please contact Eleganthemes SVP.
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
Hello Julien,
I recommend that you contact the DIVI team. It is more convenient in this case.
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