How To Move The Divi Blurb Module Title Above The Image Tutorial by Pee Aye Creative

How To Move The Divi Blurb Module Title Above The Image

Nelson Miller Pee Aye Creative
In this tutorial I will show you how to quickly and easily move the Divi Blurb module title text above the image.
Categories: Divi Blurb Tutorials

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

1. Add A Custom CSS Class To The Divi Blurb Module

The first step is to place the Divi Blurb module in your layout and add your own image, write the title text, and write the body text. After that, we can go ahead and get this thing rearranged!

Go to the Blurb module settings>Advanced tab>CSS ID & Classes toggle and add the class “pa-move-blurb-title” to the CSS Class input field. This allows us to only target this particular module with the CSS. 

move Divi blurb title above image jquery tutorial

2. Add The jQuery Snippet

The next step is to simply copy the jQuery snippet below into your site. The code is simply prepending the header to the image, meaning it is taking the title text container and detaching it from its current place in the module and attaching it before the image.

If you are using our free Divi child theme, place this snippet into the scripts.js file and remove the <script> tags at the beginning and end. Otherwise, place this in your Divi>Theme Options>Integrations tab in the “Add code to the < head > of your blog” code area.

<script>
jQuery(document).ready(function() {
jQuery(".pa-move-blurb-title").each(function () {
 var modhead = jQuery(this).find('.et_pb_module_header')
 var modimg = jQuery(this).find('.et_pb_main_blurb_image');
      jQuery(modhead).prependTo(modimg);
});
});
</script>

Before

blurb title below image

After

Divi blurb title above image

We hope you enjoy this simple little trick!

Last updated [last-modified %date%]

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

9 Comments

  1. Charly

    It doesn’t work when you have multiple blurbs in the same row? I got 5 blurbs and now every blurb has 5 titles.

    Reply
  2. madu sumatera

    PayaCreative is awesome site .. I’ve search many times for DIVI problem and solutions always come on this site.

    Reply
    • Hemant Gaba

      Thank you, Madu! 😉

      We are glad to know that our guide helped you in some way. Stay tuned for more such guides.

      Reply
  3. matt robinson

    I love your tutorials – but this one didn’t seem to work. I’ve refreshed the cache and still no luck…

    Reply
      • Aaron

        Key step: Exit the Visual Builder 🙂

        It switches back in the builder.

  4. Stacey Harris

    Hello, Nifty solution to this problem (in which I need to keep this kind of content together for a client) Question: I have to get the photo to bottom align with the very bottom of the module (I have a background color within the blurb) — I’ve removed both the padding and the margin on the the photo (via the custom CSS box) as well as all of the padding in the module, but I still have this very small gap at the bottom of the module. Any suggestions? I know you mentioned that assigning flexbox values doesn’t work to rearrange the blurb elements, but can I use it to force the photo to the bottom of the module (a la flex-end?). Any hints would be great — Thanks!

    Reply
    • Hemant Gaba

      Hi Stacey!

      Please add the following code in Blurb settings > Advanced > Custom CSS > Blurb content:

      display: flex;
      flex-direction: column-reverse;

      Let me know how it goes!

      Reply

Submit a Comment

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

Recent Posts

0

Your Cart