How to Make Divi Blurb Images Bigger

Written by Gerald Huffman

Owner @ Syzmic

August 17, 2020

I was recently working on a Divi WordPress theme project that required a few blurbs with images. The issue was that the default Divi blurb image was way too small. I looked through the module settings, but couldn’t find a way to adjust the image size.

I decided to use the Google Chrome inspect tool and discovered the issue. Divi sets the blurb module default image width to 64px and there is no way to adjust the width in the settings. With a little CSS, I was able to increase the blurb image size.

I’m sure other people have had this issue as well. Hope this helps!

Here’s the final look:

Showing the divi blurb image at 200px
Divi Blurb Module with Image on Top

Here’s the CSS Code:

.et_pb_main_blurb_image .et_pb_image_wrap {
    max-width: 1000px!important;
    width: 200px!important;
}

Note: you can change the “width” to whatever number you need.

If you want to adjust all of the blurb images on your website, you can add the code to “Additional CSS” in the theme customizer.

For this project, I only wanted to adjust the blurbs on a single page, so I added the CSS just to that page.

Here’s how you add CSS to a specific page:

Getting to the Divi page specific CSS (Step 1)
Step 1: Click on the gear icon in the Divi page settings bar.
Getting to the Divi page specific CSS (Step 2)
Step 2: Choose the “Custom CSS” dropdown item in the “Advanced” tab.
Getting to the Divi page specific CSS (Step 3)
Step 3: Paste the CSS code provided above.

Links Mentioned:

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Are you ready to shift?

Syzmic Logo

Headquarters

  • 900 4th St., Suite 400
  • Alexandria, LA
  • 71301
  • Phone: (318)451-1917

Syzmic Portal

Share This