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

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 Dec 16, 2022 @ 11:45 am

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

7 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.

Submit a Comment

Your email address will not be published.

Recent Posts

0

Your Cart