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.
free countdown banner design like the Divi Marketplace by Pee Aye Creative

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

Subscribe to Download The Free Divi Countdown Banner Layout

We spend a lot of time developing these FREE Divi resources. Quite frankly, all we ask in return is that you subscribe to the blog. You won’t get spammed daily like some sites do (eh hem), but we do provide a monthly roundup newsletter with links to all the blog posts and other product, Divi, and personal news.

If you are not subscribed, you will need to enter your name and email. A confirmation email will come to your inbox from our email system, and once you confirm it, come back here. The download link will appear here on the page!

If you already subscribed for these before, no worries. You won’t have to confirm this time, just enter your info and the download link will appear.

NOTE: The download link will appear here directly on the page. Please understand that. Do not look for a link in any email 🙂

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.

124

Please share this Divi freebie!

Nelson Lee Miller (aka The Divi Teacher)

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

View More Divi Freebies

Leave A Response!

2 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

Submit a Comment

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

Asset 7

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Divi Tutorials On YouTube

Our videos have views! Join subscribers and enjoy over video tutorials!

Visit Our Channel

Pin It on Pinterest

0

Your Cart