There are many ways to customise the Divi theme blog layout but when I tried the built-in options, they just didn’t deliver the results I wanted for our blog.

The method I’m going to show you involves a bit more work but gives you much more control over the design and looks pretty sexy ;-)

UPDATE 13/11/14: I’ve published an update to this post, How to Customise Divi Thumbnail Sizes, with some additional code that enables you to customise all Divi thumbnail sizes, not just the blog module images.

 

What you’ll need

First off, you’ll need to install the latest version of Divi, which at the time of writing was 2.1.2 (this is the only version I’ve tested with so far but it should work with earlier versions).

Then you’ll need to create and activate a child theme. There are loads of tutorials on this so I’m going to skip explaining it and assume you’ve already got one set up.

 

What I wanted for our blog

OK, so I wanted to redesign the Divi blog to look more like a business blog than a personal one. By that I mean having:

  • Featured image in the blog page and inside the post
  • Square hard-cropped thumbnails on the blog page
  • Text wrapped around the first image in the blog post
  • Independent control over other image sizes in the post
Divi Pagebuilder Blog Module

Divi’s standard pagebuilder blog module – image is pretty big!

The only way I could see to achieve this was to modify the shortcode for Divi’s blog module because while you can set the thumbnail image sizes, that doesn’t crop the images so you still end up with distorted or different sized images on the blog page.

There may be a more elegant (no pun intended) solution to this but I’m not a fully fledged WordPress developer and this does the job quickly and easily. It’s also easy to customise for whatever image size you want.

 

Step 1 – Replace the original Divi shortcode

The first step is to remove the original shortcode and replace it with the new one.

First create a file called functions.php in the root of your child theme folder, then open the file in a text editor like Notepad++. Next copy and paste the following code into your functions.php file, not forgetting the opening and closing PHP tags, <?php and ?>, then I’ll walk you through it.

Lines 3-7 tell WordPress to remove the shortcode created by Divi and replace it with the one we’ve created. We have to use the init hook here to successfully remove the shortcode because the child theme’s functions.php is parsed before the parent theme’s, so at the time our function is executed, there nothing to remove.

[box]

The init hook fires after WordPress is loaded so we can successfully remove and replace the original Divi shortcode. It isn’t the only hook we could use but it’s tried and tested.

[/box]

I haven’t set a priority for the action because it’s not critical, so it will just be set to the default value.

The rest of the code is identical to Divi’s original shortcode except for the image sizes. For a full width page like we use on our blog, I wanted 150x150px thumbnails so I enter 150 on lines 63 and 66. This ensures the thumbnails will be hard-cropped to that size so they’re not distorted even if the full size image isn’t square.

You can also soft-crop the images so they’re scaled to fit the largest dimension but if your images are a long way from square, they can end up pretty small. Plus, I prefer the look of hard-cropped thumbnails.

WPTechCentre Pagebuilder Blog Module

Our modified pagebuilder blog module – much smaller, hard-cropped images

To get the same result we have on our blog, you’ll also need to add the following CSS to your child theme stylesheet or Divi options panel:

[box]

.blog-page article.post img { float: left; margin-top: 0.6em; margin-right: 1.4em; }

[/box]

Note that blog-page is a CSS class I defined in the pagebuilder blog module.

 

Step 2 – Style the first image in the blog post

The next thing I wanted to do was style the first image in the blog post (and every blog post) from my child theme CSS file, without affecting the other images in the post. I like using the featured image because it’s easy to add to your RSS feed (some plugins and themes even have this as an option) and grab from other places online.

If you prefer to include the image in your text and grab the first image as your blog page thumbnail, you don’t need this step but it’s worth reading through to the end to see how I did it.

First you need to copy single.php from your Divi theme folder into your child theme folder, then insert the following lines of code:

The code assigns a CSS class to the featured image so you can style it in your child theme or the Divi options panel. I used wpt_featured_image but you can use whatever you want. Line 28 is where you define the name for the class and line 41 is where you insert the class into the function.

Here’s the CSS code I used to style our blog posts. I wanted the image to occupy no more than 50% of the screen so it’s mobile friendly (responsive) and the text will wrap around on the right.

[box]

article.post img { float: left; max-width: 50%; margin: 2.6em 1.4em 1.0em 0em; }

[/box]

 

Step 3 – Test it out!

That’s it – just refresh your pages and the changes should appear. If you don’t see the changes first time, it’s probably because your browser has cached the CSS data so you might need to clear that first (or force the CSS to be reloaded using CTRL + refresh).

 

So while there are different ways to customise the Divi theme blog layout, this method gives you lots of control over the design and nice, clean, crisp result, which is just what we wanted for our blog. It’s a bit more work than some methods but you can copy and paste the code from this tutorial and get the result you want in a matter of minutes.

Check out the Facebook Divi forum for other ideas and if you have a better way to achieve the same result we have, let me know, I’m always eager to learn :)