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“.

Then choose “Countdown” shortcode among the items list.

There you should see the list of the shortcode options.

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.

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:

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