Understand settings shared by POM shortcodes
Many Page Builder elements share controls for visibility, identifiers and custom classes. Their attribute names are consistent, but not every element exposes every control.
Device visibility
Supported elements use device_visibility. The builder presents four ranges:
| Builder option | Viewport |
|---|---|
| Large | Above 992 px |
| Medium | At least 768 px and below 992 px |
| Small | At least 544 px and below 768 px |
| Extra small | Below 544 px |
Leave selected every range where the element must remain visible. A hidden row or column also hides all of its children.
Element ID
el_id assigns the element's HTML identifier. Use it for an in-page link, a modal/off-canvas target or reviewed custom styling.
- Enter the ID without
#. - Use a unique value on the page.
- Begin with a letter and avoid spaces.
- When another component asks for a target ID, use the exact same value.
Extra class
el_class adds one or more custom CSS classes. Enter class names without a leading period:
featured-panel compact-on-mobilePrefer the design-system controls before adding custom classes. A class only has an effect when matching CSS exists.
Conditional settings
The builder reveals dependent controls after a parent option is selected. For example, a Button shows a modal target only when Button type is Open modal box. Raw shortcode syntax does not enforce that dialog dependency; irrelevant attributes may simply have no effect.
Site-specific selectors
Fields that select a page, menu, sidebar, query, form, reusable block, taxonomy or template store a value belonging to the current site. Select the object again after moving shortcode content between sites.
Content attributes
Quote values that contain spaces or punctuation:
[web_button button_text="View event details" button_url="/events/"]Use the visual builder for encoded media selections, repeaters and complex values. Hand-editing those formats can make the settings dialog unable to reconstruct the selection.
Verification
- Save the element and update the page.
- Confirm IDs are unique.
- Confirm custom classes appear on the intended element.
- Test one width inside each affected visibility range.
- Reopen the element and confirm all site-object selections remain valid.