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:

Something wonderful is coming soon

  • 00
    Days
  • 00
    Hours
  • 00
    Minutes
  • 00
    Seconds

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 in any of the following ways:

Send a tip

$
AUD
GBP
EUR
Powered by Stripe

Hire me!

No matter how big or small your project is, I’d love to hear about it. I’ll do my best to help you and if I can’t I’ll try to point you in the right direction.

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

Pin It on Pinterest

Share This
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!