How to align images and text in Divi blurb modules

Adding content to your page with Divi blurb modules is very easy, but, it takes a bit more effort and skill to get everything aligned correctly.

Here is an example of how a row of blurb modules looks with no styling taken from my clients site (this is a work in progress).

This is the same row of Divi blurb modules after, with image manipulation and the module size settings being tweaked.

I’m sure you agree that it’s worth the time to style it right.

This tutorial will explain how you can achieve the same look.

Step 1: How to make the images the same size

You need to identify what size you want your images to be then crop your image to that size.

Here is a blog post that goes into detail about how to do that. How to optimise images for your website. 

Once you have cropped all your images to the right size, upload them into the image section of the blurb module.

They should all now appear the same height and be correctly aligned.

Step 2: Make the blurb content areas the same size

The default height of the text area of the blurb is ‘auto’. That means it’s size depends on how much text is in there.

As you can see from the ‘before’ image, some blurbs have a few lines of text, one blurb has one line of text.

To make the text areas all the same height, open the blurb settings.

Go to the ‘Design’ tab. Look for the ‘Spacing’ settings.

Find the ‘Height’ setting. Change this to whatever you want. In the ‘after’ image above I used 330px.

When you have a height that looks good, apply that setting to the other blurb modules in your row.

Don’t forget to save your work.