Hello Divi Lovers!! I am back after few weeks with another great tutorial on how to add a slid-in promo banner 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. Lets start by designing our banner.
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 custom CSS section.
Add the below CSS snippet to the Advanced > Custom CSS > Main Element.
Then design your banner with any content you want. Below is what I did on my demo.
The ‘No Thanks’ word here act as a Close Button. so you can add anything you wish to close the banner. We just need to give it the ID ‘close’ and on main element CSS section I put ‘cursor: pointer‘ . It will show the ‘pointing hand’ cursor when hovering.
All Done! We now 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 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 and ‘bottom’ there. like ‘bottom: 0;’. Then it will slide-in from the bottom of the page.
Thats it guys. Enjoy! 🙂