Hello Divi Lovers!! I am back with another great tutorial on how to add slide-in promo banners to your Divi powered WordPress site. Importantly, without using any 3rd party plugins 🙂
Cool. isn’t it?
You can add the banner on top or on the bottom of the page. Easy and simple.
Let’s start by designing our banner.
STEP ONE – Add promo banners in Divi
I started by adding a new section to the page. You can add the section anywhere on the page. It’s not a problem at all. Most importantly give it the ID ‘banner‘ in Section Settings > Advanced > CSS ID & Classes.
Then design your banner with any content you want. Below is what I did on my demo.
The ‘No Thanks’ word here acts as a Close Button. So, you can add anything you wish to close the banner. Important thing is to give it the ID ‘close’. And on the main element CSS section I put ‘cursor: pointer‘ to show the ‘pointing hand’ when hovering over it.
Once done with your design add the below CSS snippet to the Advanced > Custom CSS > Main Element. This will hide the banner section from the front-end of the website.
position:fixed; top:0; width:100%; display:none; z-index:999999;
All Done! Now we have to add some jQuery as the final step to make this work. Add a Custom Code Module somewhere else on the page and paste the below code. You can use any method here to add jQuery to your WordPress site. Instead of adding a code module you can paste in Divi > Theme Options > Integration > Add code to the < body> Section.
You can customize the timing to match with your needs here. As you can see there are two numbers here before SlideDown and SlideUp. 1000 means 1 second. Play with the numbers here and find the perfect timing you want. SlideUp number here is for auto-hiding the banner in 7 seconds.
Also if you want to put this banner on the bottom of the page, you just need to do a simple fix.
Do you remember we added ‘top:0;‘ to the banner section.?
Instead of the top add ‘bottom’ there. like ‘bottom: 0;’. Then it will slide-in from the bottom of the page.
That’s how to add simple promo banners in Divi, guys!! Comments below if you need any help.
Also, don’t forget to read our blog to find more exciting things.