Hello Divi Lovers!! I am back with another great tutorial on how to add a slid-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.
Lets start by designing our banner.
STEP ONE – Add promo banners in Divi
I started with 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.
The ‘No Thanks’ word here act 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 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.
All Done! Now we have to add some jQuery as the final step to make this work. Add a Custom Code Module somewhere else in 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.