Subscribe On YouTube

Join other subscribers and enjoy other Divi video tutorials!

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

Nelson Miller Profile Orange
In this tutorial I will show you how to align the Divi Blurb body text to the left under the icon or image.

▶️ Please watch the video above to get all the exciting details! 👆

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.

Categories: Tutorials

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin
Divi Logo (2)

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Featured Products

Asset 4

New! Trail Guides

Follow a series of blog posts carefully arranged around a specific topic or goal! Keep track of your progress by marking posts completed, just like a free course!

View Trial Guides

Divi Tutorials On YouTube

Our videos have views! Join subscribers and enjoy over video tutorials!

Visit Our Channel

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

6 Comments

Comments By Members

These comments are highlighted because they were posted by fans who have a membership on this site.

  1. William <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

    How would one actually align the blurb module centre horizontally within a column? I was 100% sure there was a way of doing this from the module settings but there isnt which seems very strange.

    Reply
    • Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label author-label">Author</span>

      It depends what you mean. If you mean to align any modules within a Divi column, you can enable the Equalize Column Height in the row add align-self: center; to the column main element.

      Reply
  2. Jon Laakso <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

    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) <span class="comment-author-role-label author-label">Author</span>

      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

Comments By Others

  1. Kayla Quinn

    Hi Nelson! Firstly, thank you so much for this tutorial! I come to you every time I want to do somehting that is out of the scope of divi’s normal behaviour..

    I just want to ask if there is a specific way I could enlarge the image a bit. I am not using an icon but an actual image so the image width slider that would usually make something bigger doesn’t seem to be working. I have also tried to manually enlarge it by placing code but that just makes the text overlap th image. I might be missing something horrifyingly obvious here as I am exhausted but hopefully you could help out!

    Thanks again.

    Reply

Submit a Comment

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

Recent Posts

0

Your Cart