The event countdown shortcode allows you to display a countdown tool that you can use for events such as an opening, marriage etc. This shortcode basically counts down from a given date and time to the current time.

In this article, we will explain how to display the event countdown shortcode, find the UTC time zone of your country and configure the style.

To see the event countdown shortcode in action, check out the demo page.


Displaying an Event Countdown Shortcode

To add the event countdown shortcode:

1Add or edit an existing page.
2In the Visual Composer section, Click on the + button.

Event countdown shortcode - visual composer section

3In the Add Element pop-up screen, search for Event Countdown and click on it to be added to the page.

Event countdown shortcode - add element

4When the shortcode is added, a new pop-up screen called Event Countdown Settings will open that allows you to configure the shortcode settings.

Event countdown shortcode - Event countdown settings

5Click on Save Changes then Publish or Update the page to check the result.

 

Available Event Countdown Settings

There are a few settings in the event countdown pop-up screen regarding the countdown details.

SettingDescription
TitleSets the countdown title.
Upcoming Event DateSets the countdown due time. The entered date must be in month/day/year hour:minute:second format. The result will be displayed in Days – Hours – Minutes – Seconds format.
UTC TimezoneSets the countdown time zone. Read the “Finding the UTC time zone of your country” section to find your time zone.
Extra Class NameAdds a classname to the shortcode for Custom CSS.

Finding the UTC Time Zone of Your Country

UTC is the time standard commonly used across the world. Every country has its own timezone, so it is important to choose this correctly to show your users the right time.

To find your UTC time zone:

1Open this website and write your city name into the “Add a city to get started” search field.

Event countdown shortcode - time zone

2After the results show up, You will see the UTC time zone value right below the city name. Keep this value in your mind for future reference.

Event countdown shortcode - time zone value


Configuring the Style

The event countdown shortcode does not have any styling options. This countdown shortcode style is set to dark colors by default but some users may need to make the event countdown text and border colors lighter to use the shortcode on a dark background.

To make the event countdown text and border colors lighter:

1From the WordPress left menu, go to Jupiter > Theme Options > Advanced > Custom CSS.

2Add the following code to the Custom CSS field.

/* Sets the countdown title */
.make-countdown-light .mk-event-countdown .mk-event-title {
 color: #fff!important;
}

/* Sets the countdown border color */
.make-countdown-light .mk-event-countdown-ul li {
 border-color: #fff!important;
}

/* Sets the countdown time stamp color */
.make-countdown-light .mk-event-countdown-ul li .timestamp {
 color: #fff!important;
}

/* Sets the countdown time reference */
.make-countdown-light .mk-event-countdown-ul li .timeRef {
 color: #fff!important;
}

3Click on Save Settings.
4From the WordPress left menu, go to Pages and click on Edit for the page that includes the event countdown.
5Hover over the event countdown shortcode and click on the Edit button.

6A new pop-up screen called Event Countdown Settings will open.

7Add the make-countdown-light class name in the Extra Class Name field.

8Click on Save Changes and publish or update the page to check the result.