How To Align The Divi Blurb Body Text To The Left Under The Icon or Image Tutorial by Pee Aye Creative

How To Align The Divi Blurb Body Text To The Left Under The Icon/Image 

In this tutorial I will show you how to align the Divi Blurb body text to the left under the icon or image.
Categories: Divi Blurb Tutorials

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

Setting Up The Divi Blurb

First let’s get the Divi Blurb module set up correctly. This tutorial will only work if the image or icon is relatively small. Otherwise, it would not look very good. In our example, we will be choosing an icon with the default size.

Select Image Or Icon

In the Content tab, open the Image & Icon toggle. By default, the blurb uses an image, but you can choose to select Use Icon and then select any icon of your choice.

Select Left Placement

In the Design tab, open the Image & Icon toggle and set the Image/Icon Placement to Left.

set the Divi Blurb icon to left alignment

Below is an real live example of a Blurb module, how it would look so far. Notice the title text and body text is aligned, but the icon or image is off to the left. This is exactly what we will solve in this tutorial.

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Add CSS Directly To The Divi Blurb Module

We could make the adjustment by adding a custom CSS and giving some snippets, but I think it will be easiest to simply add the code directly to the Divi Blurb module. This is very easy, so no worries! We have the actual code below, which you can copy and paste into the Advanced tab in the Custom CSS toggle. Here is a screenshot of how it will look once you have added the code. 

add code to the Divi Blog module to align the text and icon

Blurb Image

left: 46px;
position: relative;

Blurb Title

left: 46px;
position: relative;

Blurb Content

min-width: calc(100% + 46px);
left: -46px;

Below is the same live example of a Blurb module after the code has been applied:

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Customize The Numbers

Keep in mind, the numbers can be changed, especially if you change the size of the image or icon. You may need to play around with the number, and just make sure to match it in all three code boxes.

NOTE: I also added “margin-top: 4px;” to the Blurb Title to make the title text look more aligned vertically with the icon.

Last updated Jun 2, 2022 @ 11:47 pm

Subscribe

Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore :)

Blog Post Optin

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

2 Comments

  1. Jon Laakso

    Thank you for this tutorial Nelson.

    Is there an easy way to get the blurb image to appear below the Title and body text?

    Just wondering if this is easily achieved.

    Thanks again!

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hmm, so image at the bottom? That should be doable. add display: flex; and flex-direction: column; to the .et_pb_blurb_content and then assign the opposite order to the child divs, order: 2; to et_pb_main_blurb_image and order: 1; to et_pb_blurb_container

      Reply

Submit a Comment

Your email address will not be published.

Recent Posts

0

Your Cart