*Updated on 4/10/2017 to include archive, category and search pages.

The Divi Blog Module gives you two layout options that are both fantastic. The fullwidth layout allows you to have large images for those who really want to showcase the image. But sometimes the images are too large and so you might opt for the grid option that shrinks the image down.

The grid layout is really modern and popular allowing you to list your blog posts in card like positioning 2-3 per row depending on if you are using a sidebar or not. But some people dont like the fact that it crops the sides of the images and really doesn’t work if you intend the visitor to see the entire image.

Another option is to shrink the image, align it to the left, maintain it’s aspect ratio, and wrap the text around the image. This can easily be done using a little CSS.

In this tutorial we will make your blog pages go from this to this…

003Ā  Ā 004

 

View Demo

 

 

Lets Get Started On Your Blog

 

First thing you need to do is create the blog module.

1. On your page go ahead and add the blog module where you intend to have it

001

 

2. Go ahead and use the Fullwidth layout

002

 

3. Next you will want to make sure that you have chosen to “Show Excerpt”

005

 

4. Also you will want to make sure you include an Excerpt on the post page as this is what will show up on the page that shows all your posts.

006

 

5. Now here is an example of what the page might look like with a sidebar and a fullwidth header as comes with Divi‘s pre-loaded Standard Blog Layout.

003

 

 

The Magic of CSS

Now lets start to dazzle things up a bit with some CSS.

If you are working with a child theme you can go to Appearance>Editor and open your stylesheet. If not, go to Appearance>Divi Theme Options>ePanel>Custom CSS (which is located at the bottom of the ePanel)

Add this CSS.

(This code includes the mobile query to keep in friendly on your smaller devices)


/*------------------------------------------------*/
/*--------[GQ - LEFT ALIGN BLOG IMAGE]------------*/
/*------------------------------------------------*/

	.et_pb_posts .et_pb_post a img, 
	.archive .et_pb_post a img, 
	.search .et_pb_post a img {
    		max-width: 210px!important;
    		float: left;
    		padding-right: 20px;}

	@media only screen and (max-width: 980px) {
		.et_pb_posts .et_pb_post a img, 
		.archive .et_pb_post a img, 
		.search .et_pb_post a img{
			float:none;
			max-width: 250px!important;}}

 

Now your blog should look something like this.

004


Well that’s all for now. I hope you find this article useful.


The following two tabs change content below.
Geno is an entrepreneur who has been designing websites since 1996. He also enjoys all things design, traveling, hanging out with friends, encouraging other believers, and experimenting with new technologies. When not doing any of the above, you can find Geno blogging or writing Divi customization tutorials here on Quiroz.co.

STAY RELEVANT | BE INFORMED | SIGN UP NOW

IT DOES NOT TAKE LONG TO GET LEFT BEHIND!

You have Successfully Subscribed!

Pin It on Pinterest