FREE Divi Countdown Banner Design Layout Styled Like the Divi Marketplace by Pee Aye Creative

FREE Divi Countdown Banner Design Layout

I'm excited to share this FREE Divi countdown timer banner layout designed to look exactly like the one used by Elegant Themes.
Categories: Divi Freebies
free countdown banner design like the Divi Marketplace by Pee Aye Creative

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

Free Countdown Banner Layout

instructions for how to import the Divi Library layout

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.

Last updated Apr 22, 2022 @ 10:43 pm

Subscribe

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! 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 :)

Blog Post Optin

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

9 Comments

  1. Gil Poulsen

    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 😉

    Reply
  2. Esteban

    I have put my email like 2 times and i don’t see the link

    Reply
  3. Think First

    Hi there

    I also subscribed and put my email address in a few times and cant seem to get this download.

    Reply
  4. Carlos Eugênio

    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?

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      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.

      Reply
  5. Marcel

    When i insert this banner my menu is gone. How can i solve this problem? Thanks in advance

    Reply
    • Hemant Gaba

      Hi Marcel!

      Can you please share the URL of the page to investigate further?

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Other Freebies

0

Your Cart