Make The Blog Layout Into A List
We have an exciting series on the Divi Blog module, and this will be a great addition. This is a quick CSS code snippet that changes the Divi blog module into a nice list with the image on the side and the details on the other side. I’ll show you how to have the image on the left, or on the right. I’m really excited about this, because it’s so quick and easy even for beginners!
▶️ Please watch the video above to get all the exciting details! 👆
Make The Divi Blog Module Image On The Left And Details On The Right
Step #1: Set The Blog Module To Fullwidth Layout
Go the Blog Module settings to the Design tab and set the Layout to Fullwidth. Don’t worry if this looks wrong. We need to set it this way to make the next step much easier. If we kept it as a grid layout, it would be much harder to achieve the desired layout.
Step #2: Add The CSS Class To The Blog Module
In order to only affect certain Blog modules on the site, we can use a custom class. So open up the Divi Blog module settings and go to the Advanced tab. From there, open the CSS ID & Classess toggle. Place the class “pa-blog-list” into the CSS Class input field there.
Step #3: Set The Image and Details Width With CSS
Basically, we are telling the image to be only 30% wide. Then we tell the title, meta, and excerpt to be 70% wide. By adding a float left on them, it makes them stack up beside each other. This is better than some of the other similar tutorials because it keeps all the text on the side instead of wrapping around the image.
Where To Paste The CSS Code
1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.
2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.
3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.
If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.
/*add media query so changes only affect tablet and desktop*/
@media (min-width: 767px) {
/*set the image width*/
.pa-blog-list .entry-featured-image-url {
width: 30%;
float: left;
margin-bottom: 0!important;
}
/*set the details width*/
.pa-blog-list .entry-title,
.pa-blog-list .post-meta,
.pa-blog-list .post-content {
width: 70%;
float: left;
padding-left: 30px;
}
}There you go! You now can adjust the widths if you want, just make sure the percentages equal 100%.
Add Some Fancy Styling
While we are here, let’s add some little touches that will make a huge impact. In the follow snippet, we are going to style each one of the events by adding spacing around them, a border radius, and a box shadow.
/*style the individual posts*/
.et_pb_post {
box-shadow: 0px 2px 80px 0px rgba(160,190,212,0.22);
border-radius: 6px;
padding: 60px;
}
Much better, right? Feel free to play around with this, and be on the lookout for more tutorials about the Divi blog module!
Make The Images Square
You may have seen our series on cropping Divi images to a certain aspect ratio. Those were so fun, and we wanted to show you how to do that here as well. So let’s make the blog image square, even if it isn’t when you upload it.
First of all, add “padding-top: 30%” to the first snippet above. That will make the height the same as the 30% width that we designated. Note that if you changed that number to something else, you will also have to make this number match.
Add the following snippet to your code in the Divi Theme Options.
/*blog image aspect ratio square 1:1*/
.entry-featured-image-url {
padding-top: 30%;
display: block;
}
.entry-featured-image-url img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}
Much better, right? Feel free to play around with this, and be on the lookout for more tutorials about the Divi blog module!
Make The Divi Blog Module Image On The Right And Details On The Left
So if you want, you can use the same snippet as above and just change one thing. Instead of saying to float left, just say float right!
I’m not going to provide this snippet, because you should learn to edit CSS on your own! You can do it! :)
NEW: Vertically Align The Details
I am updating this post with a new option. Now that the image is on the left, and details on the right, it might be nice if the details were aligned vertically. This gets a bit trickly, but it’s pretty easy to do if we use jQuery. However, note that this code is totally different than what was given above, so either use this, or the code above.
CSS
.pa-blog-list article{
display: flex;
align-items: center;
}
.pa-blog-list article a{
width: 30%
}
.pa-blog-list article .wrap{
width: 70%
}
.pa-blog-list .entry-title,
.pa-blog-list .post-meta,
.pa-blog-list .post-content{
width: 100%;
}
@media all and (max-width: 768px){
.pa-blog-list article{
flex-direction: column;
}
.pa-blog-list article a{
width: 100%
}
.pa-blog-list article .wrap{
width: 100%
}
}jQuery
<script>
jQuery(document).ready(function(){
jQuery(".pa-blog-module article").each(function(){
jQuery(this).children('h2,p,div').not(':first-child').wrapAll('<div class="wrap"></div>');
})
})
</script>
I am looking to do something like this with the portfolio module.
Is this possible?
Yes for sure anything is possible, probably a very similar approach, just change the CSS selectors.