Divi Tutorial: Customizing Blurb Left Side Image To Make It Larger
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.
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.
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.
More From Divi Dude
Sometimes you screw up and forget to turn off comments on your WordPress website, or forget to configure your Askimet, or do both, and then you end up with thousands of comments that are nothing but spam. We’re talking hundreds of pages worth of comments that need to…
This is one of those plugins that’s only going to appeal to a certain number of people. People like me who have a need to add syntax code to websites. But if you’re one of those people, then I recommend you get the plugin — Divi Code Snippet Module — from the creator of Divi Booster. I tried 3 or 4 plugins in WordPress, every one of them …
Here’s the dilemma. When I build websites, I build them primarily for a landscape screen. Most of my photos are optimized for landscape screens. My Facebook and Twitter graphics are for landscape screens. But Pinterest prefers portrait style graphics for its pin boards. See the problem? My website has graphics that are wider than they are long (landscape). Yet, Pinterest wants graphics that are taller than they are wide (portrait).