The Blurb module is a favorite among Divi users, and for good reason! It has a lot of flexibility. Since the et_pb_blurb_container and et_pb_main_blurb_image are sibling Divs, the module’s structure prevents it. Therefore, we need a little jQuery snippet to reorganize the module.
This article will show you “How to Place the Blurb Title over the Image in Divi”.
Results:
Adding and Modifying Blurb:
After adding the Blurb Module, go to Blurb Settings > Design > Title Text and do the following customizations:
- Title Font: Montserrat
- Title Font Weight: Bold
- Title Text Color: #000000
- Title Text Size: 24px
- Title Letter Spacing: 2px
Go to Blurb Settings > Design > Body Text and do the following customizations:
- Body Font: Montserrat
- Body Font Weight: Regular
- Body Text Color: rgba(0,0,0,0.65)
- Body Text Size: 15px
Adding the CSS Class:
Go to Blurb Settings > Advanced > Custom ID & Classes and add the following CSS Class:
hey-blurb-title-on-top
Adding Custom CSS Code:
There are two ways to Paste the Code:
1) Pasting Code in Div Theme Options:
Go to Site Dashboard > Divi > Theme Options > Integration > Add code to the <head> of your blog and paste this code there:
<script>
jQuery(document).ready(function() {
jQuery(".hey-blurb-title-on-top").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>
After Reloading the Divi Frontend Builder exit the builder to see your results will be shown.
2) Pasting Code in the Code Module:
Add a new Code Module below the Blurb Module and paste the above code there:
After Existing the Builder your results will be shown:
Results that you were looking for:
Conclusions:
All of the above words explain “How to Place the Blurb Title over the Image in Divi”. The Blurb Module is very flexible if you know how to use it. There are two ways to paste the code, you can use the second method by adding a code module. But it depends on you.