Countdown
shortcode

Allows you to add the animated countdown. Let the visitors know when the event or feature will come.
Read documentation
Usage frequency
58%
Preset amount
69%
Customizability
87%

Available options

Default code: [dfd_countdown countdown_opts="smonth,sweek,sday,shr,smin" main_style="style-1"]

Style – Choose between 3 preset styles;

Target time for countdown – Set the date and time for the event;

Countdown alignment – select the horizontal alignment for the countdown shortcode;

Select time units – Set the time units you need to show in countdown;

Delimiter value – Add the delimiter for the time units;

Animation – Select among 14 appear effects;

Custom CSS Class – Type your own unique class name for the item – this is a useful option for those who want to create a specific style.
For example, you can type custom-style class and then go to Theme options -> General Options -> Custom CSS / JS -> Custom CSS and write your own CSS code with this class to get your own style;

Style settings – Select font size and color for the numbers, delimiter and time units.

Default styles

Samples of preset styles without custom changes
Simple style
%-YYears:%-zMonths:%-nDays:%-HHours:%-MMinutes:%-SSeconds:
bordered style
%-YYears:%-zMonths:%-nDays:%-HHours:%-MMinutes:%-SSeconds:
bordered number style
%-YYears:%-zMonths:%-nDays:%-HHours:%-MMinutes:%-SSeconds:

Customized styles

Some variations of style customizations of the shortcode
bordered with background
%-YYears:%-zMonths:%-nDays:%-HHours:%-MMinutes:%-SSeconds:
bordered number with background
%-YYears:%-zMonths:%-nDays:%-HHours:%-MMinutes:%-SSeconds: