How To Change The Divi Blog Module Into A List Layout
In this tutorial, we will learn how to change the layout of the Divi blog module to create a list view with the image on the left and details on the right.
Blog Post + Snippets: https://www.peeayecreative.com/how-to...
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!
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: 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.
Go ahead and copy and paste the snippet from the blog post into your Divi Theme Options or child theme.
Become a member of our Divi Adventure Club!
https://www.peeayecreative.com/produc...
Join The Divi Teacher Facebook group: / thediviteacher
Visit our Divi child themes, plugins, tutorials, and courses here: https://www.peeayecreative.com/
Thanks for watching!