Event Countdown Shortcode

Last Updated on

Event Countdown shortcode is one of the shortcodes available in The Ken theme which you can take advantage of. It allows you to add a countdown with different styles. To see a live demo of this feature please click here.

Ken Event Countdown Demo 3

In this article


Displaying an Event Countdown

To add the Event Countdown shortcode to a page or post, follow the steps below:

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

Fancy Title Shortcode - visual composer section

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

Event countdown shortcode - add element

 

4
When the shortcode is added, a new pop-up screen called Event Countdown Settings will open. Configure the settings as required.

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

Configuring the Event Countdown Settings

After you add the Event Countdown shortcode, a pop-up window will appear where you can set options for this shortcode that you can set to fine tune your Event Countdown and add it to the page. Followed is a detailed description of each option for Event Countdown shortcode:

 

Setting Description
Upcoming Event Date Use this option to add the event date. The format of date should be like this: 12/24/2015 12:00:00 => month/day/year hour:minute:second
UTC Timezone Use this option to set the UTC time zone for the event.
Skin Use this option to set a skin for Event Countdown shortcode. Available options are Dark, Light, Accent Color and Custom.
Custom Color? This option will be available if you set the skin option to Custom in item 3. Use this option to set a custom color for the Event Countdown shortcode.
x
Note: Accent Color is the color you set in Theme Settings -> Skin.

Ken Event Countdown Demo 2

Extra Class Name

This is an option which is common among most of the shortcodes. If you wish to style particular content element differently, then use this field to add a class name and then refer to it in Custom CSS settings inside Theme Settings.

Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket