Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

Are you looking for a quick and easy way to swap the Divi Blurb Header and Image?

I assumed this would be an easy solution using CSS & Flex. Once I realized that the header is nested in a DIV within a DIV, other than the parent, I knew I might have some issues.

I figured a little jQuery must be the way to go. After a lot of trial and error, a post on Stack Overflow, and then being thrown a safety line by my good friend Jerry (yes, that Jerry), we finally have a pretty good solution that only takes minutes.

In this tutorial, I will show you how to use a little custom jQuery to swap the Divi Blurb Header and Image so that the header is on the top of the blurb.

View The Live Demo

All Blurb Modules or Specific Blurb Modules?

We have the option to target all Divi blurb modules on the website or just ones with a specific class.

First I will show you how to target all blurb modules.

All Blurb Modules

1.  Once you have created the blurb modules, go to Divi Theme Options>Integrations

 

2. Scroll down to the section that says Add code to the < head > of your blog

 

3. Download & unzip this text file to grab the snippet you will need to copy and paste into the integration box.

Download Snippet

 

4. Once you open up the zipped folder and the .txt file, copy and paste the snippet as is, into the “Add code to the < head > of your blog” box.

 

And that’s it.

If you would prefer to use this on specific modules only, then the these next steps are for you

 

Specific Blurb Modules

1.  Create a blurb module, and go to the Advanced Settings

 

2. Add a custom class to the CSS Class section. I am using this one for the tutorial: mp_m_blurb_header_switch

 

3.  Once you have created and saved all the blurb modules, go to Divi Theme Options>Integrations

 

2. Scroll down to the section that says Add code to the < head > of your blog

 

3. Download and unzip this text file to grab the snippet you will need to copy and paste into the integration box.

Download Snippet

 

4. Once you open up the zipped folder and the .txt file, copy and paste the snippet as is, into the “Add code to the < head > of your blog” box.

 

And that’s it.

If you used this on one of your projects, please share a link below so we can see how you used it.

Have fun!


Well, that’s all for now. I hope you find this article useful.


The following two tabs change content below.
Geno is an entrepreneur who has been designing websites since 1996. He also enjoys all things design, traveling, hanging out with friends, encouraging other believers, and experimenting with new technologies. When not doing any of the above, you can find Geno blogging or writing Divi customization tutorials here on Quiroz.co.

Latest posts by Geno Quiroz (see all)

©2012-2019 Geno Quiroz | Teach Learn Build Love | Divi Expert ServicesJohn 3:16

Divi is a registered trademark of Elegant Themes, Inc. This website is not affiliated with nor endorsed by Elegant Themes.

STAY RELEVANT | BE INFORMED | SIGN UP NOW

IT DOES NOT TAKE LONG TO GET LEFT BEHIND!

You have Successfully Subscribed!

Pin It on Pinterest