web_countdown Shortcode
The web_countdown shortcode renders the countdown component.
The attributes below match the current Page Builder controls and public output. Use raw syntax only for reviewed content that cannot be maintained through the visual controls.
Usage
[web_countdown]Attributes
| Attribute | Default | Accepted values | Purpose |
|---|---|---|---|
countdown_end |
— | String unless stated otherwise | Enter the date on which the countdown ends like YYYY-MM-DD HH:MM (e.g. 2017-11-26 08:20). |
countdown_text_color |
— | String unless stated otherwise | Choose text color. |
device_visibility |
— | String unless stated otherwise | Applies the selected responsive visibility rule. |
el_id |
— | Valid unique HTML ID | Enter section ID (Note: make sure it is unique and valid according to w3c specification). |
el_class |
— | String unless stated otherwise | If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file. |
Customize the stylesheet
Administrators can replace the complete Countdown stylesheet under Settings → POM Theme → Advanced → Custom CSS → Shortcode CSS assets → Countdown. Saving publishes an optimized per-site copy without adding the stylesheet to pages that do not contain the shortcode. Reverting returns the existing web-countdown handle to the current countdown.min.css supplied by the theme. The target date, four time values and labels, responsive classes, shortcode attributes, generated markup, and existing web_countdown script remain unchanged.
Verification
Operate web_countdown with pointer and keyboard input, and confirm labels, focus and motion remain understandable. Pay particular attention to countdown_end and countdown_text_color.