web_interactive_infography Shortcode
The web_interactive_infography shortcode renders the interactive Infography 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.
Allowed child shortcodes: web_infography_spot.
Usage
[web_interactive_infography]
Content
[/web_interactive_infography]Attributes
| Attribute | Default | Accepted values | Purpose |
|---|---|---|---|
image |
— | String unless stated otherwise | Choose image from media library. |
opacity |
1 |
String unless stated otherwise | Icon opacity, default is 1. |
device_visibility |
— | String unless stated otherwise | Applies the selected responsive visibility rule. |
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. |
marginoffset |
— | String unless stated otherwise | Sets the marginoffset value consumed by this shortcode. |
Enclosed content
Content between the opening and closing tags is processed as WordPress shortcode content. Keep the parent/child structure shown by the visual builder so nested components receive the context they expect.
Customize the stylesheet
Administrators can replace the complete Interactive infography stylesheet under Settings → POM Theme → Advanced → Custom CSS → Shortcode CSS assets → Interactive infography. Saving publishes an optimized per-site copy only for pages that already require web_interactive_infography; reverting returns the existing web-interactive-infography handle to the current interactive-infography.min.css file.
This customization changes presentation only. It does not alter the image, opacity, nested spots, positions, actions, generated markup, or conditional asset discovery. The parent module has no dedicated frontend JavaScript; shared Tooltip or Modal assets requested by a nested spot remain governed by that spot's existing mode.
Verification
Populate web_interactive_infography with web_infography_spot and confirm every child remains reachable in the intended order. Pay particular attention to image and opacity.