Divi Tutorial – The Final Countdown
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
OK! On to the tutorial.
Create a new page and in “Page Attributes” change the “Template” to “Blank Page”.
Import the layout file using Divi’s portability function found on the top of the page (the up & down arrow icon)
Change the date that you want to count down from in the module marked “Set Date Here.”
That’s it! I’d love to hear about any successes or failures you have with this. Email me at email@example.com.
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 firstname.lastname@example.org to discuss.
Ready to launch a new project? Let's work together →