Divi Ads VI - Side Titled Ad on Blog with Bloom and jQuery

SUGGESTED POSTS

The following article assumes you have already read the articles on the side. Take a look!

How to use jQuery .find, .text and .before with Bloom and Divi

Divi Ads V - Side Ad Cards on Blog page

Hi everyone, today we will see how to design our Side Ads system on Blog page in a little different way thanks to Bloom – here nothing new – and few lines of jQuery in addition to the code we already wrote in our Divi Ads V post.

Let’s get started!

OUR PREVIOUS CODE

First of all, let’s give a quick look (for more details take a look at Suggested Posts above) at how our Side Ads on Blog page looked till yesterday and the jQuery code needed for making it work.

// Our Previous jQuery Code

jQuery(document).ready(function(){
 var optins = jQuery(".page-id-1277 .et_bloom_form_container").get().slice(0).sort(function()
 {
 return Math.round(Math.random())-0.5;
 }).slice(0,3);

 jQuery(optins).slice(1).css("bottom", "24vh");
jQuery(optins).slice(2).css("bottom", "48vh");

 jQuery(optins).show();
});

WRITE TITLES IN BLOOM

The first thing we have to do is obviously write the title we want to see for each banner in Bloom. So simply enter each optin, go to the Design tab and write our Title.

Note that we write the title in <h3>. This is important ’cause writing it in the default <h2> will comport an issue when we will write our jQuery code! In order to select <h3> you just have to click on ‘Text’ tab in the top-left corner of the editor and change the tag that wraps your title.

CAN WE SIMPLY MAKE THE TITLE VISIBLE?

Remember? According to our previous Series Post we have in Divi Theme Options -> Custom Css the following code:

/* Our Previous Css code */

.page-id-1277 .et_bloom_flyin_left {
padding-right: 0 !important;
left: 0 !important;
bottom: 0;
transform: scale(.8);
}
.page-id-1277 .et_bloom_form_container {
-webkit-transform: perspective(500px) rotateX(45deg);
 -moz-transform: perspective(500px) rotateX(45deg);
 -ms-transform: perspective(500px) rotateX(45deg);
 -o-transform: perspective(500px) rotateX(45deg);
 transform: perspective(500px) rotateX(45deg);
box-shadow: 0 29px 72px -21px #27005e !important;
max-width: 200px !important;
display: none;
max-height: 200px !important;
border: solid 7px transparent;
transition: all 1s;
}
.page-id-1277 .justImageAds .et_bloom_form_container:hover { 
transform: rotateX(0deg) scale(1);
transition: all 1s;
} 
.page-id-1277 .justImageAds .et_bloom_close_button, .page-id-1277 .justImageAds .et_bloom_form_content, .page-id-1277 .justImageAds .et_bloom_form_text { 
display: none !important; 
} 
.page-id-1277 .et_bloom_form_container div { 
padding: 0 !important;
}
.page-id-1277 .justImageAds .et_bloom_header_outer img {
transition: all 1s; padding: 0 !important;
}

The question arises. Can we simply make the Title visible removing the “.page-id-1277 .justImageAds .et_bloom_form_text { display: none !important; } ” ? The answer is yes, you can. But the result will be something like this:

Not really what we want!

ADD THE jQUERY

What we want is something different, we want put the title outside of the optin itself. So first of all we go to Divi Theme Options -> Integration -> <head> and change our code in order to slice one single optin:

// Slice one single optin

<script type="text/javascript">
jQuery(document).ready(function(){
    var optins = jQuery(".page-id-1277 .et_bloom_flyin_left .et_bloom_form_container").get().slice(0).sort(function()
 {
 return Math.round(Math.random())-0.5;
   }).slice(0,1);
jQuery(optins).slice(0).css({
"bottom": "10vh"
});

jQuery(optins).show();

});
</script>

Then working with the jQuery methods we have seen on our last Tuesday post we change our script code in Divi Theme Options -> Integration -> <head> so that our final jQuery will look like this:

// Our final jQuery code working with .find, .text and .before methods

<script type="text/javascript">
jQuery(document).ready(function(){
    var optins = jQuery(".page-id-1277 .et_bloom_flyin_left .et_bloom_form_container").get().slice(0).sort(function()
 {
 return Math.round(Math.random())-0.5;   }).slice(0,1);
jQuery(optins).slice(0).css({
"bottom": "10vh"
});

var text = jQuery(optins).slice(0).find("h3").text();

 jQuery(optins).before('<div class="optin_txt">' + text + '</div>');
jQuery(optins).show();

});
</script>

ADJUSTING WITH CSS

All that remains is a few small Css adjustments:

/* Some Css Adjustments */

.page-id-1277 .et_bloom_form_container {
max-width: 220px !important;
}

.optin_txt {
position: relative;
top: -120px;
left: 10%;
text-align: center;
font-weight: 800 !important;
font-size: 2em !important;
line-height: 1.3;
color: black;
max-width: 15%;
}
@media screen and (max-width: 1200px) {
.optin_txt {
display: none;
}
}

FINAL THOUGHTS

Giving a look now at our Blog you will see a single banner randomly appearing on loading the page and just above it the relative Title. It’s just another little example of how much powerful can be using Divi and Bloom boosted by jQuery and some Css.

Hope it can be useful.

See you next post!