If this tutorial is not what you were looking for, you still have any questions, suggestions or concerns - feel free to let us know. Please help us to serve you better!

Your Name

Your Email

Your Message (required)

captcha

Featured templates

Monstroid. How to add a countdown

Hello. Today we are going to show you how to work with the countdown shortcode in Monstroid and other CherryFramework 4 themes.

To get started, we need to go to your page or post editing window, find the necessary location we need this shortcode added, place the mouse cursor there and click “Insert shortcode“.

Monstroid._How_to_add_a_countdown_1

Then choose “Countdown” shortcode among the items list.

Monstroid._How_to_add_a_countdown_2

There you should see the list of the shortcode options.

Monstroid._How_to_add_a_countdown_3
Monstroid._How_to_add_a_countdown_4

Now let’s do a brief overview of each option available.

  • Start date and Countdown date – this should be simple. You just set up the start and the end date of the countdown and it displays the amount time left till the certain event.

  • Countdown hours, Countdown minutes and Countdown seconds – you can set up the countdown time manually, but in case you have stated start and end dates, this is not necessary and you may leave those fields blank.

  • Circle – when enabled, it will make your countdown wrapped in the circles with progress bars.

  • Show year, Show month, Show week, Show day, Show hour, Show minute, Show second – here you may choose how many circles to display. Each of them will represent the time unit.

  • Countdown item size – this option stands for the size of the countdown item container. By default it is set to 100 pixels.

  • Stroke width – another CSS option, that determines the width of stroke showing time progress.

  • Class – useful field for adding the custom HTML class, so that you will be able to apply your own CSS rules to this class and modify the countdown graphically as well.

Now let’s take a look on the example of this shortcode with the declared options.

[cherry_countdown start_date="14/07/2016" countdown_date="15/07/2020" countdown_hour="19" 
countdown_minutes="55" circle_mode="yes" show_year="yes" show_month="yes" show_week="no" show_day="yes"]

And finally let’s check how it will appear on the website frontend.

Monstroid._How_to_add_a_countdown_5

That’s it. Now you know how to add a countdown in Monstroid and other CherryFramework 4 themes.

Feel free to check the detailed video tutorial below:

Monstroid. How to add a countdown

Also, remember to take a look at the latest WordPress themes.