web_counter Shortcode
The web_counter shortcode renders the counter 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_counter]Attributes
| Attribute | Default | Accepted values | Purpose |
|---|---|---|---|
counter_number |
— | Number | Specifies the ending number to display. |
counter_number_color |
— | String unless stated otherwise | Choose number color. |
counter_title |
— | String unless stated otherwise | Counter title. |
counter_title_color |
— | String unless stated otherwise | Choose title color. |
counter_title_position |
— | above, below |
Select the position for the title. |
counter_bg_color |
— | String unless stated otherwise | Choose background color. |
counter_icon |
— | String unless stated otherwise | Select the icon to be displayed above the counter. |
counter_bg_opacity |
100 |
op-9, op-8, op-7, op-6, op-5, op-4, op-3, op-2, op-1 |
Select the opacity level. |
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 Counter stylesheet under Settings → POM Theme → Advanced → Custom CSS → Shortcode CSS assets → Counter. Saving publishes an optimized per-site copy without adding the stylesheet to pages that do not contain the shortcode. Reverting returns the existing web-counter handle to the current counter.min.css supplied by the theme. The target number, title, icon, color and background classes, shortcode attributes, generated markup, viewport detection, animation, and existing web_counter script remain unchanged.
Verification
Verify web_counter with representative content, its empty state and every enabled responsive range. Pay particular attention to counter_number and counter_number_color.