Per-screen values

Result: a title or a link differs on desktop, tablet, and phone. Requires PageBuilder Pro and capability responsive. Types: text, textarea, url, number, currency, richtext, slug. A field named slug, alt, or caption does not get the toggle, even when its type is in that list.

Before you start

1. pagebuilder_responsive_editor_enabled is on. While it is off, the inspector has no tabs.
2. The field is one of the types above. The section has such a title or link.

Steps

1. Open the field in the inspector and click the button whose hint is "Different values for tablet and mobile" (link icon). Tabs appear for desktop, tablet, and mobile.
2. Fill the three values. One value for every screen collapses the map and keeps desktop, unless the schema forces responsive: true.
3. On the site, pagebuilder_responsive_apply picks the mode.
   • manual (default): one value. It comes from ?pb_bp= or pagebuilder_default_breakpoint.
   • css: the HTML contains all three values, and a media query hides the extras.
4. In the chunk print the field with {$title|pb_text}, not escape.
5. Save the resource.

A saved map still works on the site until an editor saves the field as one value. Breakpoints: pagebuilder_responsive_breakpoints (default desktop ≥1024, tablet ≥768, mobile ≥0).

Example fields

Title on a hero section:

Screen	Value
desktop	Furniture catalog
tablet	Catalog
mobile	Catalog

With manual, open ?pb_bp=mobile and ?pb_bp=desktop. With css, the HTML contains all three values.

What to check

The tabs show up only after the "Different values for tablet and mobile" button, and only while the editor setting is on. A collapsed field prints the desktop value.

Rollback

Collapse the field to one value and save the resource.

See also

• System settings → Responsive
• Frontend output → Responsive