Jupiter/Documentation

Event Countdown Shortcode

Last Updated on
Friday, December 29, 2017

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

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

4

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

5

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

Setting

Description

Title

Sets the countdown title.

Upcoming Event Date

Sets the countdown due time. The entered date must be in month/day/yearhour:minute:second format. The result will be displayed in Days – Hours – Minutes – Seconds format.

UTC Timezone

Sets the countdown time zone. Read the “Finding the UTC time zone of your country” section to find your time zone.

Extra Class Name

Adds 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:

1

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

2

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

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.

Note: If you need to go beyond the default settings to customize the look and feel of the item’s design, you can add a custom CSS class in the Extra Class Name setting to be able to add specific styling to the shortcode through CSS. For more information, read the Adding a custom CSS class to a shortcode article.

Was this helpful?

You can vote again after 1 hour

Thank you!

We will take care of this as soon as possible

We are very happy you did like this article.
Would you please tell what ypu liked most?

We are very sorry you did not like this article.
Would you please tell how we can make it better?