web_line Shortcode
The web_line shortcode draws a horizontal separator with a design-system color, explicit thickness, width and alignment. It continues to render when the Legacy Page Builder interface is disabled.
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_line line_color="2" line_height="4" line_width_in="percentage" line_width_percentage="50" line_alignment="center"]Attributes
| Attribute | Default | Accepted values | Purpose |
|---|---|---|---|
line_color |
— | Numeric palette slot 1–15 | Adds bg-main-N. Empty or invalid values apply no background color. |
line_height |
1 |
Nonnegative pixel number | Sets the rule thickness. Zero makes it invisible. |
line_width_in |
pixels |
pixels, percentage |
Chooses whether width is absolute or relative to the wrapper. |
line_width_pixels |
1 |
Number | Set the line width (pixels). Available when line_width_in is pixels. |
line_width_percentage |
1 |
Number | Set the line width (percentage). Available when line_width_in is percentage. |
line_alignment |
center |
left, right, center |
Positions a rule narrower than its wrapper. |
device_visibility |
— | Space-separated web-hide-on-lg, web-hide-on-md, web-hide-on-sm, web-hide-on-xs |
Hides the separator in each selected theme device range. |
el_id |
— | Valid unique HTML ID | Identifies the outer container only. |
el_class |
— | Space-separated helper classes | Applies existing helpers to the outer container. |
The visual editor offers 1–1080px dimensions or 1–100% width. Valid nonnegative dimensions already authored in shortcode text remain supported, including values outside those sliders. Invalid dimensions fall back to 1. The painted width never exceeds its container.
The output keeps the alignment wrapper and the colored child, with mauto for center or pull-right for right alignment. The wrapper contains floated children and carries horizontal separator semantics. Attributes are escaped; an anchor is not repeated on the child. Dimensions retain the Legacy inline-style contract. No additional frontend asset is required.
Verification
Check the rule against its surrounding background and at narrow widths. Verify percentage width scales with the container, fixed width is capped by that container, and the chosen alignment is visible. A bare [web_line] has no palette color, so choose a color to make it visible. Continue using headings to explain section topics.
For new block-editor content, use the native Separator with POM controls. It additionally supports rem dimensions and stores its dimensions in the page stylesheet. Its initial full-width, Color 1 line is an authoring default, not a change to existing shortcode defaults.