Countdown Timer

[TS-VCSC-Icon-Title title=”Countdown Features” align=”center” font_family=”Default:regular” size=”48″ font_weight=”300″ highlight_allow=”true” highlight_color=”#2691bd” highlight_strings=”RmVhdHVyZXM=”]

If you want to get your visitors attention by direction them to upcoming releases, openings or events, Visual Composer Extensions has you covered with the “Countdown Timer” element. Just add your data, time or both, select one of the available styles and you are ready to go. Of course, you can style the countdown timer a little more by using custom colors and by enabling/disabling some parts of it.

The “Countdown Timer” provides you with the following options:

[TS_VCSC_Info_Notice panel_layout=”notice” panel_type=”warning” panel_icon=”ts-awesome-warning”]

When using the “date” only or “date/time” target for the countdown, you also have the option to provide a separate shortcode as value for the target date/time, instead of directly entering a date/time. That shortcode should dynamically generate the desired date/time in the required format, as the countdown will otherwise fail to work.

When using the shortcode option, you can NOT cache the page with the countdown, as WordPress will otherwise not be able to update the shortcode value anymore. If WordPress is loading a cached version of the page, the generated date/time will always stay the same.

[/TS_VCSC_Info_Notice][TS-VCSC-Spacer height=”20″][TS_VCSC_Fancy_List list_type=”image” marker_image=”http://tekanewascripts.com/composium/wp-content/plugins/ts-visual-composer-extend/images/bullets/bullet_arrow_blue.png”]

  • 8 different styles to select from
  • Select date only (date can also be provided via dynamic shortcode)
  • Select time only
  • Select date and time (date/time can also be provided via dynamic shortcode)
  • Apply automatic reset with intervals up to 24 hours
  • Apply link to another page to countdown, to be opened once countdown has expired
  • Set different colors for numbers and text
  • Change background color for overall countdown element
  • Add border to countdown element (set width, type and color)
  • Disable “days”, “hours”, “minutes” and/or “seconds” from showing
  • Change column background and add column borders (for basic style with columns)
  • Change width of circles; give each circle its own color (for circles style)
  • Change color of bar and bar background (for bars style)
  • … and more!

[/TS_VCSC_Fancy_List]

[TS-VCSC-Spacer height=”20″][TS-VCSC-Icon-Title title=”Countdown Styles” align=”center” font_family=”Default:regular” size=”48″ font_weight=”300″ highlight_allow=”true” highlight_color=”#2691bd” highlight_strings=”U3R5bGVz”]

Minimum Style

[TS-VCSC-Divider divider_border_thick=”2″][TS-VCSC-Countdown counter_scope=”2S” shortcode_datetime=”JTVCVFNfVkNTQ19OZXh0RGF5T2ZUaGVXZWVrJTIwZGF5JTNEJTIyV2VkbmVzZGF5JTIyJTIwdGltZSUzRCUyMnRydWUlMjIlMjBob3VycyUzRCUyMjE5JTIyJTVE”]

This counter is using another shortcode in order to dynamically generate the target date and time. It will always count down to the next Wednesday, 7:00 PM. If today is Wednesday, it will count down to next Wednesday’s date; if today is Tuesday, it will count down to tomorrows date.

[TS_EnlighterJS_Snippet_Single code_type=”php” code_content=”JTJGJTJGJTIwRGVmaW5lJTIwU2hvcnRjb2RlJTIwQ2FsbGJhY2slMjBGdW5jdGlvbiUwQWZ1bmN0aW9uJTIwVFNfVkNTQ19OZXh0RGF5T2ZUaGVXZWVrJTI4JTI0YXR0cyUyOSUyMCU3QiUwQSUyMCUyMCUyMCUyMG9iX3N0YXJ0JTI4JTI5JTNCJTBBJTIwJTIwJTIwJTIwJTBBJTIwJTIwJTIwJTIwZXh0cmFjdCUyOHNob3J0Y29kZV9hdHRzJTI4YXJyYXklMjglMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjJkYXklMjIlMDklMDklMjAlMjAlMjAlMjAlMjAlMjAlM0QlM0UlMjAlMjJNb25kYXklMjIlMkMlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjJ0aW1lJTIyJTA5JTA5JTIwJTIwJTIwJTIwJTIwJTNEJTNFJTIwJTIyZmFsc2UlMjIlMkMlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjJob3VycyUyMiUwOSUwOSUyMCUyMCUyMCUyMCUzRCUzRSUyMDAlMkMlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjJtaW51dGVzJTIyJTA5JTIwJTIwJTIwJTIwJTNEJTNFJTIwMCUyQyUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMnNlY29uZHMlMjIlMDklMjAlMjAlMjAlMjAlM0QlM0UlMjAwJTJDJTBBJTIwJTIwJTIwJTIwJTI5JTJDJTIwJTI0YXR0cyUyOSUyOSUzQiUwQSUyMCUyMCUwQSUyMCUyMCUyMCUyMCUyRiUyRiUyMENoZWNrJTIwVGltZSUyMFN5bnRheCUwQSUyMCUyMCUyMCUyMGlmJTIwJTI4JTI0dGltZSUyMCUzRCUzRCUyMCUyMnRydWUlMjIlMjklMjAlN0IlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjBpZiUyMCUyOCUyOCUyNGhvdXJzJTIwJTNFJTNEJTIwMCUyMCUyNiUyNiUyMCUyNGhvdXJzJTIwJTNDJTNEJTIwMjQlMjklMjAlMjYlMjYlMjAlMjglMjRtaW51dGVzJTIwJTNFJTNEJTIwMCUyMCUyNiUyNiUyMCUyNG1pbnV0ZXMlMjAlM0MlM0QlMjA1OSUyOSUyMCUyNiUyNiUyMCUyOCUyNHNlY29uZHMlMjAlM0UlM0QlMjAwJTIwJTI2JTI2JTIwJTI0c2Vjb25kcyUyMCUzQyUzRCUyMDU5JTI5JTI5JTIwJTdCJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTI0dGltZSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUzRCUyMCUyNHRpbWUlM0IlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlN0QlMjBlbHNlJTIwJTdCJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTI0dGltZSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUzRCUyMCUyMmZhbHNlJTIyJTNCJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTdEJTBBJTIwJTIwJTIwJTIwJTdEJTBBJTA5JTBBJTIwJTIwJTIwJTIwJTI0ZmluZGRhdGUlMDklMDklMjAlMjAlMjAlMjAlMjAlMjAlMjAlM0QlMjBzdHJ0b3RpbWUlMjglMjJuZXh0JTIwJTIyJTIwLiUyMHVjZmlyc3QlMjglMjRkYXklMjklMjklM0IlMEElMjAlMjAlMjAlMjBpZiUyMCUyOCUyNHRpbWUlMjAlM0QlM0QlMjAlMjJ0cnVlJTIyJTI5JTIwJTdCJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTI0bWFrZXRpbWUlMjAlMDklMjAlMjAlMjAlMjAlM0QlMjBta3RpbWUlMjglMjRob3VycyUyQyUyMCUyNG1pbnV0ZXMlMkMlMjAlMjRzZWNvbmRzJTJDJTIwZGF0ZSUyOCUyN20lMjclMkMlMjAlMjRmaW5kZGF0ZSUyOSUyQyUyMGRhdGUlMjglMjdkJTI3JTJDJTIwJTI0ZmluZGRhdGUlMjklMkMlMjBkYXRlJTI4JTI3WSUyNyUyQyUyMCUyNGZpbmRkYXRlJTI5JTI5JTNCJTBBJTIwJTIwJTIwJTIwJTdEJTIwZWxzZSUyMCU3QiUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyNG1ha2V0aW1lJTIwJTA5JTIwJTIwJTIwJTIwJTNEJTIwbWt0aW1lJTI4MCUyQyUyMDAlMkMlMjAwJTJDJTIwZGF0ZSUyOCUyN20lMjclMkMlMjAlMjRmaW5kZGF0ZSUyOSUyQyUyMGRhdGUlMjglMjdkJTI3JTJDJTIwJTI0ZmluZGRhdGUlMjklMkMlMjBkYXRlJTI4JTI3WSUyNyUyQyUyMCUyNGZpbmRkYXRlJTI5JTI5JTNCJTBBJTIwJTIwJTIwJTIwJTdEJTBBJTBBJTIwJTIwJTIwJTIwaWYlMjAlMjglMjR0aW1lJTIwJTNEJTNEJTIwJTIydHJ1ZSUyMiUyOSUyMCU3QiUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyRiUyRiUyMFJlcXVpcmVkJTIwT3V0cHV0JTNBJTIwZGQlMkZtbSUyRnl5eXklMjBoaCUzQW1tJTIwQU0lMkZQTSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMGVjaG8lMjBkYXRlJTI4JTI3bSUyRmQlMkZZJTIwaCUzQWklMjBBJTI3JTJDJTA5JTI0bWFrZXRpbWUlMjklM0IlMEElMjAlMjAlMjAlMjAlN0QlMjBlbHNlJTIwJTdCJTA5JTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTJGJTJGJTIwUmVxdWlyZWQlMjBPdXRwdXQlM0ElMjBkZCUyRm1tJTJGeXl5eSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMGVjaG8lMjBkYXRlJTI4JTIybSUyRmQlMkZZJTIyJTJDJTIwJTA5JTA5JTA5JTI0bWFrZXRpbWUlMjklM0IlMEElMjAlMjAlMjAlMjAlN0QlMEElMDklMEElMjAlMjAlMjAlMjAlMjRteXZhcmlhYmxlJTIwJTNEJTIwb2JfZ2V0X2NsZWFuJTI4JTI5JTNCJTBBJTIwJTIwJTIwJTIwcmV0dXJuJTIwJTI0bXl2YXJpYWJsZSUzQiUwQSU3RCUwQSUwQSUyRiUyRiUyMFJlZ2lzdGVyJTIwU2hvcnRjb2RlJTIwd2l0aCUyMFdvcmRQcmVzcyUwQWFkZF9zaG9ydGNvZGUlMjglMjJUU19WQ1NDX05leHREYXlPZlRoZVdlZWslMjIlMkMlMjAlMjJUU19WQ1NDX05leHREYXlPZlRoZVdlZWslMjIlMjklM0IlMEElMEElMkYlMkYlMjBTaG9ydGNvZGUlMjBVc2FnZSUyMEV4YW1wbGUlMjAlMjhpbiUyMENvdW50ZG93biUyMEVsZW1lbnQlMjBTZXR0aW5ncyUyOSUwQSU1QlRTX1ZDU0NfTmV4dERheU9mVGhlV2VlayUyMGRheSUzRCUyMldlZG5lc2RheSUyMiUyMHRpbWUlM0QlMjJ0cnVlJTIyJTIwaG91cnMlM0QlMjIxOSUyMiU1RA==”]
[TS-VCSC-Spacer height=”20″]

Basic Style with Columns

[TS-VCSC-Divider divider_border_thick=”2″][TS-VCSC-Countdown counter_scope=”3″ counter_time=”09:00 PM” date_days=”false” style=”columns”]

This counter is set for a repeating time every day (the section showing remaining days has been disabled via settings).

[TS-VCSC-Spacer height=”20″]

Bars Style

[TS-VCSC-Divider divider_border_thick=”2″][TS-VCSC-Countdown counter_scope=”2″ counter_datetime=”05/19/2016 09:00 AM” style=”bars”]

This counter is set for a fixed date and time.

[TS-VCSC-Spacer height=”20″]

Flipboard Style

[TS-VCSC-Divider divider_border_thick=”2″][TS-VCSC-Countdown counter_scope=”4″ style=”flipboard” border_type=”solid”]

This counter is set for an automatic repeat every 15 minutes. You can assign a link to an internal or external page to this kind of countdown, to be opened once the countdown expires. The automatic repeat can also be disabled.

[TS-VCSC-Spacer height=”20″]

Circles Style

[TS-VCSC-Divider divider_border_thick=”2″][TS-VCSC-Countdown counter_date=”12/25/2015″ style=”circles”]

This counter is set for a fixed date only.

[TS-VCSC-Spacer height=”20″]

3D Horizontal Flip Style

[TS-VCSC-Divider divider_border_thick=”2″][TS-VCSC-Countdown counter_scope=”2″ counter_datetime=”04/24/2016 09:00 AM” style=”horizontal”]

This counter is set for a fixed date and time.

[TS-VCSC-Spacer height=”20″]

Digital Clock Style 1

[TS-VCSC-Divider divider_border_thick=”2″][TS-VCSC-Countdown counter_scope=”2″ counter_datetime=”04/24/2016 09:00 AM” style=”clock1″]

This counter is set for a fixed date and time. Digital Clock Styles only show hours, minutes and seconds.

[TS-VCSC-Spacer height=”20″]

Digital Clock Style 2

[TS-VCSC-Divider divider_border_thick=”2″][TS-VCSC-Countdown counter_scope=”2″ counter_datetime=”04/24/2016 09:00 AM” style=”clock2″]

This counter is set for a fixed date and time. Digital Clock Styles only show hours, minutes and seconds.