web_timeline Shortcode
The web_timeline shortcode renders the timeline 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_timeline]Attributes
| Attribute | Default | Accepted values | Purpose |
|---|---|---|---|
id |
— | String unless stated otherwise | Enter element ID (Note: make sure it is unique and valid according to w3c specification). |
additional_classes |
— | String unless stated otherwise | Controls the additional classes. |
title_wrapper_color |
15 |
String unless stated otherwise | Controls the title wrapper color. |
title_text_color |
11 |
String unless stated otherwise | Controls the title text color. |
description_wrapper_color |
13 |
String unless stated otherwise | Controls the description wrapper color. |
description_text_color |
11 |
String unless stated otherwise | Controls the description text color. |
date_wrapper_color |
13 |
String unless stated otherwise | Controls the date wrapper color. |
date_text_color |
11 |
String unless stated otherwise | Controls the date text color. |
items |
— | String unless stated otherwise | Controls the items. |
device_visibility |
— | String unless stated otherwise | Applies the selected responsive visibility rule. |
Customize the stylesheet
Go to Settings → POM Theme → Advanced → Custom CSS, expand Shortcode CSS assets, and open Timeline. The comparison shows the readable CSS generated by the current theme beside the editable source. Saving creates an optimized per-site replacement for the existing web-timeline stylesheet; reverting restores the current timeline.min.css asset.
The replacement changes CSS only. It does not change web_timeline, item parsing, the generated ul and li markup, the content, point, and date elements, odd/even alternation, titles, descriptions, dates, palette classes, custom IDs or classes, or the request condition. Pages without Timeline content continue loading no Timeline stylesheet, and the module has no dedicated JavaScript.
Verification
Verify web_timeline with at least three items so both odd and even layouts are represented. Check the central axis, item order, content card, point, date, palette classes, id, additional_classes, and per-item classes. After editing the stylesheet, confirm that a page containing the shortcode uses the managed CSS while a page without it still loads no Timeline asset.