Colour Changing Countdown TimerĀ 

Do you have an upcoming event that your are counting the days to? This eye-catching colour changing countdown timer could add some visual interest to your site.

Just select 4 colours that will automatically rotate in and out in the circular border around the countdown elements.

Start the countdown to your event – download this free layout today!

Installation and Usage Instructions

PLEASE NOTE: You will need to have the WordPress Divi Theme installed and activated on your site in order to use this layout. A good knowledge of working with Divi, and of editing CSS is also recommended in order to modify this layout.

  1. Install the layout

Download and unzip the layout file(s) onto your computer. Create a new page on your site and use the Divi portability function to import the layout json file into your page. NOTE: Do not upload the layout to your Divi Library.

  1. Change the colours

Open the Code Module at the top of the page. At the top of the code you will find 5 lines where you can change the colours of the background of the circles and the 4 colours that will rotate around the circles. The lines are commented so you can see where to make your changes.

  1. Move the supplied code (optional)

The imported file includes the layout css in a code module at the top of the page. You can leave it here, or you can copy the css to your child theme css file, to the Divi Theme Options > Custom CSS box, or to the Divi page specific css box. When you have copied the code module contents you can then delete the section containing the module.

  1. Add your images and content

Edit the modules to add your own content, and edit the module settings as required to change the fonts and colours to match your site.

4 Comments

  1. Stephen

    Link to download does not work

    Reply
    • Joan

      Sorry, I fixed it! Thanks for letting me know.

      Reply
      • Em

        Hey the link to download – does not work – It downloads one big file of code

        Reply
        • Joan

          Sorry you are having trouble. I just downloaded it and it works for me. A json file is a file of code.

          Reply

Submit a Comment

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

Password Reset
Please enter your e-mail address. You will receive a new password via e-mail.