Here’s a great way to customize your blog page and category archives. In this tutorial, we show how to add the following:
- Equalize blog rows
- Three column grid layout
- Grow class with shadow on hover
- Featured image height crop on mobile devices
- Widget title borders
- Blog pagination borders
If you would like to start with the blog module and sidebar configured like they are in the video tutorial, you can download the .json file by clicking the button below. Then go to Divi Library under the Divi/Extra theme menu and import the file.
Once you have the blog page up and running, copy the Javascript below to equalize the blog rows. Add it to the Theme Options –> Integration –> Head text area. Then copy the CSS below and place it in the Theme Customizer under Additional CSS or in your child theme style.css file.
Once the blog page is complete, go to the Theme Builder under the Divi/Extra menu and create a new template. Click on the pencil icon in the body section and create a custom body area. Choose the column layout that matches the layout of the blog page. Add your sidebar in one column and the Blog module in another. In the settings for the blog, enable the “Posts for current page” option. In the advanced tab, add the following classes so that the design matches the blog page: trumani-blog et_blog_grid_equal_height. That’s it!
Javascript
Credit: Divi Sensei
/*Equalize Blog Columns*/ .bloggrid .et_pb_salvattore_content { display: -webkit-box; display: -ms-flexbox; display: flex; } .bloggrid article { margin-bottom: 20px !important; -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .bloggrid .post-content { -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .bloggrid .column { margin-bottom: 20px !important; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
CSS
/*** Begin Blog Customizations ***/ /* 3 Column Grid */ .trumani-blog .et_pb_salvattore_content[data-columns]::before { content: '3 .column.size-1of3' !important; } @media only screen and ( min-width: 981px ) { .trumani-blog .column.size-1of3 { width: 32% !important; margin-right: 1%; } } /* Hover Shadow & Grow */ .et_pb_post { box-shadow: 0 1px 2px rgba(0, 0, 0, 0); -webkit-transition: all 0.6s; transition: all 0.6s; } .et_pb_post:hover { -webkit-transform: scale(1.01, 1.01); transform: scale(1.01, 1.01); box-shadow: 1px 5px 14px rgba(0, 0, 0, 3); z-index: 1; } /* Shrink image on mobile */ .et_pb_image_container img { max-height: 350px !important; object-fit: cover !important; } /* Pagination border */ div.alignleft { padding-right: 5px; border-right: 2px solid #f06449;} div.alignright { padding-left: 5px; border-left: 2px solid #f06449; } /* Widget header */ h4.widgettitle { display: flex; align-items: center; text-align: center; } h4.widgettitle::before, h4.widgettitle::after { content: ''; flex: 1; border-bottom: 2px solid #f06449; } h4.widgettitle::before { margin-right: .25em; } h4.widgettitle::after { margin-left: .25em; } /*** End Blog Customizations ***/
Hi there, thanks so much for your video and post, it is just what I was looking for! However, I just wanted to draw your attention to the fact that the javascript is actually not the javascript we should be using. It seems you copied in the wrong thing, anyway I went to the source and found their correct post with the correct javascript to use and it worked fine. Also, your CSS codes work wonders but I have noticed that you have a very little gap in between your posts and my gap in between the 3 posts within one signle row is huge. Could you please give me the CSS code in order to adjust the number of pixles in between the columns? Many thanks in advance! 🙂
sorry, forgot to say, if you also had a code for adjusting the gap between the rows that would be fab! thank you
Great post – quick note – the reference to the original divi sensei post was javascript, but they’ve changed it to CSS instead. Just wanted to point out if people are confused about the javascript part!
https://waterfallmagazine.com
Hi, just wanted to mention, I enjoyed this blog post.
It was funny. Keep on posting!
Where is the JAVASCRIPT? What you show in the video does not match what you have on the page!! All you have listed is CSS!