{"id":76680,"date":"2016-10-10T10:07:48","date_gmt":"2016-10-10T14:07:48","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=76680"},"modified":"2017-08-08T06:05:13","modified_gmt":"2017-08-08T10:05:13","slug":"monstroid-add-countdown","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/monstroid-add-countdown.html","title":{"rendered":"Monstroid. How to add a countdown"},"content":{"rendered":"<p>Hello. Today we are going to show you how to work with the countdown shortcode in Monstroid and other CherryFramework 4 themes.<\/p>\r\n\r\n <div class=\"video-container\">\r\n\t<iframe src=\"https:\/\/www.youtube.com\/embed\/H-gIS-D3bAc\"><\/iframe>\r\n<\/div>\r\n<div class=\"inline-banner\">\r\n<a href=\"https:\/\/www.templatemonster.com\/service-center\/\">\r\n<img src=\"\/help\/files\/banners\/inline\/Banner-3-(835-x100).jpg\" \/>\r\n<\/a>\r\n<\/div>\r\n<p>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 &#8220;<strong>Insert shortcode<\/strong>&#8220;.<\/p>\r\n\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2016\/10\/Monstroid._How_to_add_a_countdown_1.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/10\/Monstroid._How_to_add_a_countdown_1-300x206.jpg\" alt=\"Monstroid._How_to_add_a_countdown_1\" width=\"300\" height=\"206\" class=\"alignnone size-medium wp-image-76682\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/10\/Monstroid._How_to_add_a_countdown_1-300x206.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/10\/Monstroid._How_to_add_a_countdown_1-150x103.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/10\/Monstroid._How_to_add_a_countdown_1-768x527.jpg 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/10\/Monstroid._How_to_add_a_countdown_1.jpg 953w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n<p>Then choose &#8220;Countdown&#8221; shortcode among the items list.<\/p>\r\n\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2016\/10\/Monstroid._How_to_add_a_countdown_2.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/10\/Monstroid._How_to_add_a_countdown_2-300x117.jpg\" alt=\"Monstroid._How_to_add_a_countdown_2\" width=\"300\" height=\"117\" class=\"alignnone size-medium wp-image-76683\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/10\/Monstroid._How_to_add_a_countdown_2-300x117.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/10\/Monstroid._How_to_add_a_countdown_2-150x58.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/10\/Monstroid._How_to_add_a_countdown_2-768x298.jpg 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/10\/Monstroid._How_to_add_a_countdown_2-1024x398.jpg 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/10\/Monstroid._How_to_add_a_countdown_2.jpg 1037w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n<p>There you should see the list of the shortcode options.<\/p>\r\n\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2016\/10\/Monstroid._How_to_add_a_countdown_3.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/10\/Monstroid._How_to_add_a_countdown_3-300x300.jpg\" alt=\"Monstroid._How_to_add_a_countdown_3\" width=\"300\" height=\"300\" class=\"alignnone size-medium wp-image-76684\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/10\/Monstroid._How_to_add_a_countdown_3-300x300.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/10\/Monstroid._How_to_add_a_countdown_3-150x150.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/10\/Monstroid._How_to_add_a_countdown_3-768x765.jpg 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/10\/Monstroid._How_to_add_a_countdown_3-164x164.jpg 164w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/10\/Monstroid._How_to_add_a_countdown_3.jpg 943w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2016\/10\/Monstroid._How_to_add_a_countdown_4.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/10\/Monstroid._How_to_add_a_countdown_4-300x283.jpg\" alt=\"Monstroid._How_to_add_a_countdown_4\" width=\"300\" height=\"283\" class=\"alignnone size-medium wp-image-76685\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/10\/Monstroid._How_to_add_a_countdown_4-300x283.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/10\/Monstroid._How_to_add_a_countdown_4-150x142.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/10\/Monstroid._How_to_add_a_countdown_4-768x726.jpg 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/10\/Monstroid._How_to_add_a_countdown_4.jpg 943w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n<p>Now let&#8217;s do a brief overview of each option available.<\/p>\r\n<ul class=\"list\">\r\n\t<li><p><strong>Start date and Countdown date<\/strong> &#8211; 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.<\/p><\/li>\r\n\t<li><p><strong>Countdown hours<\/strong>, <strong>Countdown minutes<\/strong> and <strong>Countdown seconds<\/strong> &#8211; 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.<\/p><\/li>\r\n\t<li><p><strong>Circle<\/strong> &#8211; when enabled, it will make your countdown wrapped in the circles with progress bars.<\/p><\/li>\r\n\t<li><p><strong>Show year, Show month, Show week, Show day, Show hour, Show minute, Show second<\/strong> &#8211; here you may choose how many circles to display. Each of them will represent the time unit.<\/p><\/li>\r\n\t<li><p><strong>Countdown item size<\/strong> &#8211; this option stands for the size of the countdown item container. By default it is set to 100 pixels.<\/p><\/li>\r\n\t<li><p><strong>Stroke width<\/strong> &#8211; another CSS option, that determines the width of stroke showing time progress.<\/p><\/li>\r\n\t<li><p><strong>Class<\/strong> &#8211; 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.<\/p><\/li>\r\n<\/ul>\r\n<p>Now let&#8217;s take a look on the example of this shortcode with the declared options.<\/p>\r\n<pre>[cherry_countdown start_date=\"14\/07\/2016\" countdown_date=\"15\/07\/2020\" countdown_hour=\"19\" \r\ncountdown_minutes=\"55\" circle_mode=\"yes\" show_year=\"yes\" show_month=\"yes\" show_week=\"no\" show_day=\"yes\"]<\/pre>\r\n<p>And finally let&#8217;s check how it will appear on the website frontend.<\/p>\r\n\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2016\/10\/Monstroid._How_to_add_a_countdown_5.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/10\/Monstroid._How_to_add_a_countdown_5-300x97.jpg\" alt=\"Monstroid._How_to_add_a_countdown_5\" width=\"300\" height=\"97\" class=\"alignnone size-medium wp-image-76681\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/10\/Monstroid._How_to_add_a_countdown_5-300x97.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/10\/Monstroid._How_to_add_a_countdown_5-150x48.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/10\/Monstroid._How_to_add_a_countdown_5-768x248.jpg 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/10\/Monstroid._How_to_add_a_countdown_5-1024x330.jpg 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/10\/Monstroid._How_to_add_a_countdown_5.jpg 1032w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n\r\n<p>That&#8217;s it. Now you know how to add a countdown in Monstroid and other CherryFramework 4 themes.<\/p>\r\n<p>Feel free to check the detailed video tutorial below:<\/p>\r\n<a href=\"http:\/\/www.youtube.com\/watch?v=H-gIS-D3bAc?width=1280&amp;height=720\" rel=\"prettyPhoto\">Monstroid. How to add a countdown<\/a>\r\n<p>Also, remember to take a look at the latest <a href=\"https:\/\/www.templatemonster.com\/wordpress-themes.php\" target=\"_blank\">WordPress themes<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"<p>Hello. Today we are going to show you how to work with the countdown shortcode in Monstroid and other Cherry Framework 4 themes.<\/p>\n","protected":false},"author":107,"featured_media":76686,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[2017,728],"tags":[2012,1541,2019,1415],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/76680"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/107"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=76680"}],"version-history":[{"count":2,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/76680\/revisions"}],"predecessor-version":[{"id":82614,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/76680\/revisions\/82614"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/76686"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=76680"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=76680"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=76680"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}