Divi Freebies Are Always Fun, Right?
Hey folks, guess what, it’s freebie time! We decided to recreate the banner design for you that Elegant Themes was using for their Divi Marketplace sale. So in this post I am excited to give away this countdown timer banner as a free Divi layout complete with the additional CSS. Here is what it looked like when it was live, but by the time you see this post it may already be over (until next time):
In this post, you will be getting the banner as a JSON file (Divi Layout) that you can import in the Divi Library area and use it wherever you want on your website. You can customize every bit of the layout as per your preferences. There are some important steps to follow to get it looking exactly like theirs, so be sure to follow the instructions below.
Join subscribers on our YouTube channel and enjoy other Divi video tutorials!
Subscription Information
We spend a lot of time developing these FREE Divi resources. Quite frankly, all we ask in return is that you subscribe to our email newsletter. You won't get spammed. Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can't wait, but honestly not very often! So that's what you will get if you subscribe, and you can always unsubscribe at any time if you just can't take it anymore 🙂
If you are not subscribed, you will need to enter your name and email in the form below. Our system will send an opt-in confirmation email. Once you click confirm on that, then a second email will arrive in your inbox with the download link.
If you already subscribed, just enter your info and the email will arrive in your inbox with the download link.
Subscribe To Download The Divi Countdown Banner Layout
How To Use The Free Divi Countdown Banner Layout
#1. Download And Save The Layout File
The first step is to download the file to your computer. Save it somewhere you will remember for the next step.
#2. Import The Layout Into The Divi Library
Go to your WordPress Dashboard and navigate to Divi>Divi Library. Look for the button in the top left corner called “Import & Export” and click it. Now a popup will appear for you to choose the file and import it.
- Click on the Import tab
- Choose a file
- Click the blue import button
The layout will now appear in the list of Divi Library layouts.
#3. Add The Layout To Your Header Template
Now it’s time to add the layout to the top of the website. You will need to be using the Divi Theme Builder for this entire layout to work. If you are not using or familiar with it, be sure to check out my Divi Theme Builder mini course to get you started!
Go to your Divi>Theme Builder and edit the header template. Click on the blue plus button to add a new layout. Click the “Add From Library” tab and select the countdown banner from the list. This will add the free countdown banner to the layout!
#4. Add The Custom CSS
In order to achieve the same design created by Elegant Themes, we need to use some custom CSS in addition to the regular Divi design settings. But don’t worry, it is easy to add this CSS. The custom CSS classes are already added within the layout in the modules, so all you have to do is add the snippet below and it will match the classes.
If you are using our free Divi child theme, place this snippet into the style.css file. Otherwise, place this in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on Where To Add Custom Code In Divi.
/*add mouse pointer when hovering over X icon*/
#pa-promo-close:hover {
cursor: pointer;
}
/*position the icon to the center right*/
#pa-promo-close {
position: absolute;
right: 10px;
top: 50%;
transform: translatey(-50%);
}
/*hide the extra zero from the days*/
.pa-countdown .section.days p.value:first-letter {
font-size: 0px;
vertical-align: top
}
/*remove the line height on tablet and phone*/
@media all and (max-width: 980px) {
.pa-countdown .et_pb_countdown_timer_container p {
line-height: 0px !important;
}
}
/*hide the timer on mobile devices*/
@media all and (max-width: 768px) {
.pa-timer-column {
display: none;
}
}#5. OPTIONAL: Add jQuery From Our Other Tutorial
To make the X button icon functional to hide the banner, you would need additional code. We actually already have a great tutorial for that, so head on over to our guide on How To Create A Promo Bar In The Divi Theme Builder and copy and paste the jQuery code inside Divi >Theme Options>Integrations> <HEAD>panel.
Hey, Nelson. That made me think of another thing that would be realy good to know, and that is how to set up a download link for subscribers that won’t appear until you enter your email address. Kinda like exactly what you did with this layout 😉
Hi Gil,
Sure I could do that, but it would not be possible with just Divi, so that’s why I have not done anything like that.
I have put my email like 2 times and i don’t see the link
Hi there
I also subscribed and put my email address in a few times and cant seem to get this download.
Is see that our system sent you an email 3 times, if you did not get it you can reach out to use and we’ll get it figured out.
By default DIVI shows the countdown from a date. But how do I make the count occur when the page or popup is loaded instead? Can you help me in this matter?
No, that’s outside the scope of this tutorial, and you would need a plugin like the Divi Timer Pro for the Evergreen function, but it would not start only when a popup is clicked, but rather when the page is loaded.
When i insert this banner my menu is gone. How can i solve this problem? Thanks in advance
Hi Marcel!
Can you please share the URL of the page to investigate further?