~Just the Facts~

DIVI TUTORIAL: MAKING BLURB LEFT SIDE IMAGE LARGER

written by Divi Dude

While working on a Game of Thrones gift idea site, I encountered an issue with the blurb module. I wanted to create a horizontal blurb, but the blurb module seems to work best when vertical. Here’s a photo of the issue I encountered.

Fixing Left Image in Blurb Module

Obviously, not quite the effect I was hoping for. Elegant Themes’ Divi 3 is great in many ways, creating a horizontal blurb with a large image is not one of them — unless of course you customize the CSS. Fortunately, it’s relatively easy to do. Works with both images and icons, although you will need separate CSS for each of them.

First thing I did was use a modern browser (in my case I used Chrome, but it will also work with Edge and Firefox … sorry Safari, I have no idea about you). After creating the blurb module with the headline, image, links and text I wanted, I switched the image view to left and was left with a tiny — I’m talking miniscule — photo. So I did what any rational personal would do: I cursed Elegant Themes and Divi until my voice became hoarse, and then I positioned my mouse over the small image and pressed the right button and chose “Inspect”.

When you Inspect the code, a new panel will open up showing you the behind the scenes code. In Chrome, make sure Elements in the toolbar is chosen and it will show you the HTML markup of the site, pictured below.

Using Inspect in Blurb Module

At this point, I used my mouse pointer and clicked on the div tag right above my image which is “et_pb_main_blurb_image”. And now in my style section (which will either be below or to the right of the HTML markup), I look for the CSS code that is affecting my image’s size. And there I see it.

So the great thing about using Chrome is you can change the width settings inside the Inspect tab to see what size works. You can also add additional CSS styling to see how it will affect the page. Caution here: This does not change the code, it’s just giving you a preview. You will still need to update your Style sheet either via the Theme Options Panel or in your Child Theme. After you’ve changed the width to the appropriate size, go ahead and copy and paste just that portion of code (including the classes) and then paste them into your style sheet. Save it and then review your page and you you should have an appropriate size blurb image on the left.

Using Inspect in Blurb Module

Faster WordPress Hosting

Load WordPress Sites in as fast as 37ms!

Build Better Websites

Affordable Domain Registration

Get $1.00 off.
DiviDudeWeb16

Subscribe

Must Have Plugins

WP Theme FAQs

WP Rocket - WordPress Caching Plugin

Favorite WordPress Theme

Divi WordPress Theme

Affiliate marketer: Which means when you click a link and purchase an item, I may receive a commission. Thank you for your support.

Join Our Awesome List

Join our mailing list to receive the latest news and updates from Divi Dude. We don't write often, but when we do, everything will more or less be spelled correctly (oh, and be interesting and fun and knowledge based).

Thanks Dude! You've successfully subscribed.

Pin It on Pinterest

Share This