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 |
— | Image attachment ID | Current image metadata and responsive sources come from the Media Library. |
opacity |
1 |
0–1, rounded to 0.1 steps | Applies existing opacity helpers to points. Zero also makes them inert. |
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. |
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
The main image uses the attachment's Alternative Text from the Media Library. Set that text to describe the image where it conveys information, then check the rendered image after saving.
In Gutenberg, use Interactive Infography and Infography Spot. Both editors share this component and its conditional assets.
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.