The popular Divi 2.0 WordPress theme from Elegant Themes includes a really nifty Page Builder that makes creating custom layouts simple and easy for anyone. The built-in Blog Module for the Page Builder allows you to quickly set up a nice Blog page for your WordPress site with a listing of your blog posts. Unfortunately, it only has two layout options: Fullwidth or Grid.

What if you want to change the size of your featured post thumbnail image in the blog layout so that it floats to the left or right of the post excerpt instead of full width above it?

Featured-Image

I was surprised to find that achieving this basic blog layout was not clearly documented. Fortunately, it was easy to do, thanks to the many built-in WordPress filters that Divi utilizes.

Create a Custom Featured Post Image Size

To create a smaller featured image size and cause the Blog Module to use it, all I had to do was add the following code to my functions.php file:

Now WordPress generated a custom featured post image that was the correct width and height dimensions (e.g. 320px by 260px) and the Blog Module used it as the featured image! (You may have to to Regenerate Thumbnails if you are working with images that have already been uploaded).

Style the New Image

All that remained was styling the image to float to the left and have a right-side margin (or I could just as easily have floated it the right with left-side margin). Because Divi 2.0 is a responsive theme, I chose to only do this on widths that were greater than 768px (e.g. non-mobile). I added the following code to my custom CSS file:

It was a surprisingly simple fix and worked beautifully!

****** Update 10/28/2014 ******

Change Layout on Default WordPress Blog Pages

The above code only applies to the Divi Blog Module in the Divi Page Builder. However, many people utilize the built-in WordPress option to create a static front page with a separate blog page. If you are using the Divi theme, this default blog page and all of the blog archive and category pages will display images full width.

To fix these blog and archive pages to also use a smaller featured image floated to the left or right, you will need to add filters for et_pb_index_blog_image_width and et_pb_index_blog_image_height in your theme’s functions.php file.  So the revised code in your functions.php file would look like this:

You will also want to modify the CSS code given earlier to include styles for these pages to float the image to the left or right:

(Update 12/27/2014: Added “.search .post img” and “.search article:after” below to also make the display work correctly on the search page.)

(Update 7/23/2015: Added “.blog .post img” and “.blog article:after” below to also make the display work on the default blog page in Divi 2.4).