Divi Tutorial – The Final Countdown

May 15, 2016

After seeing Andy Tran’s article on The Best Hidden Feature of Divi, I decided I’d try and build something using inline JS, HTML & CSS  to test Divi’s code module out. I really hadn’t used the code module at all and it didn’t even occur to me that I could inline CSS and JS using <style> & <script> tags.

This is pretty exciting because when you couple the code module with Divi’s portability function, developers & designers can create some really wonderful stuff without being limited to Divi’s built-in modules.

I decided to build a coming soon page with a countdown timer. I adapted this Codepen from Chris Johnson.

You can download a Divi import file here:

Here’s a look at what the finished product looks like. You can also see it used on a full page here:

<script> var targetDate = new Date("2016/12/25 00:00:00"); </script>
<script> var days; var hrs; var min; var sec; jQuery(function() { timeToLaunch(); setTimeout(countDownTimer,1001); }); function timeToLaunch(){ var currentDate = new Date(); var diff = (currentDate-targetDate)/1000; var diff = Math.abs(Math.floor(diff)); days = Math.floor(diff/(24*60*60)); sec = diff-days * 24*60*60; hrs = Math.floor(sec/(60*60)); sec = sec-hrs * 60*60; min = Math.floor(sec/(60)); sec = sec-min * 60; } function countDownTimer(){ timeToLaunch(); jQuery( "#days .number" ).text(days); jQuery( "#hours .number" ).text(hrs); jQuery( "#minutes .number" ).text(min); jQuery( "#seconds .number" ).text(sec); setTimeout(countDownTimer,1000); } function numberTransition(id, endPoint, transitionDuration, transitionEase){ jQuery({numberCount: jQuery(id).text()}).animate({numberCount: endPoint}, { duration: transitionDuration, easing:transitionEase, step: function() { jQuery(id).text(Math.floor(this.numberCount)); }, complete: function() { jQuery(id).text(this.numberCount); } }); }; </script>
<style> #main-content { margin: 0 !important; } ul#countdown { width: 100%; margin: 0 auto; padding: 0 !important; color: #fff; font-weight: bold; font-family: Oswald; } ul#countdown li { margin: 0 -5px 0 0; padding: 0; display: inline-block; width: 25%; font-size: 72px; font-size: 6vw; text-align: center; } ul#countdown li .label { color: #fff; font-size: 18px; font-size: 1vw; text-transform: uppercase; } ul#countdown li .number { line-height: 1em; } .et_pb_social_media_follow li a.icon::before { color: #2ea3f2 !important; } h2 { font-family: Merriweather !important; text-transform: none !important; margin-bottom: 20px; display: inline-block; } </style>

Something wonderful is coming soon

<ul id="countdown"> <li id="days"> <div class="number">00</div> <div class="label">Days</div> </li> <li id="hours"> <div class="number">00</div> <div class="label">Hours</div> </li> <li id="minutes"> <div class="number">00</div> <div class="label">Minutes</div> </li> <li id="seconds"> <div class="number">00</div> <div class="label">Seconds</div> </li> </ul>

OK! On to the tutorial.

Step 1

Create a new page and in “Page Attributes” change the “Template” to “Blank Page”.

Step 2

Import the layout file using Divi’s portability function found on the top of the page (the up & down arrow icon)

Step 3

Change the date that you want to count down from in the module marked “Set Date Here.”

Step 4

That’s it! I’d love to hear about any successes or failures you have with this. Email me at hello@yatesdesign.com.au.

Thanks for reading!

If you found this post helpful you can show your appreciation by leaving a review on the Yates Design Facebook page:

If you need help...

I am available for hire! No matter how big or small your project is, I’d love to hear about it. All quotes are obligation free.

Drop me an email at hello@yatesdesign.com.au to discuss.

Ready to launch a new project? Let's work together 

Like this post? Subscribe!

Like this post? Subscribe!

Sign up to the Yates Design newsletter & receive news, tips & tricks about how to improve the online presence of your business.

You have Successfully Subscribed!

Pin It on Pinterest

Share This