Overview
The Builder Modes feature allows you to customize page sections and elements across All Devices, Desktop, Tablet, and Mobile directly in the editor. All Devices mode applies settings and styles across all device types, while Desktop, Tablet, and Mobile modes allow for device-specific style adjustments.
You can switch between these modes using the device icons in the top toolbar (1), or within the element settings in the sidebar (2):
All Devices Mode (Default)
The All Devices mode is now the default editing mode and applies settings and styles across all device types at once. This mode is designed to help you quickly set consistent styles without needing to configure each device individually.
For existing pages, any settings or styles previously set in Desktop mode have been automatically moved to All Devices. This ensures a smooth transition and consistent behavior across all pages.
Key behavior:
Changes made in All Devices apply to Desktop, Tablet, and Mobile
This acts as the base styling for all devices
Most common settings (previously found in Desktop mode) now live here. Common settings include things such as setting a Click Action for buttons/images, adding a link for text or adding an embed code for a video.
💡Example:
If you set padding or font size in All Devices, that same value will automatically apply across all devices.
Device-Specific Modes (Desktop, Tablet, Mobile)
The Desktop, Tablet, and Mobile modes are now used for device-specific adjustments only. You can use these modes to override styles set in All Devices when needed.
💡Example:
Set padding to 10px in All Devices → applies everywhere
Switch to Mobile and change padding to 5px → only Mobile is affected
How Overrides in All Devices Mode Work
All Devices sets the default value for each setting, but each device mode can override those values individually. However, overrides only apply per setting, not globally.
👉 Important:
If you update a setting in All Devices, it will overwrite that same setting (padding, margin, etc) across all devices
Other settings that were previously customized per device will remain unchanged
💡Example:
Set padding to 10px in All Devices → applies everywhere
Change Mobile padding to 5px → Mobile now overrides padding
Go back to All Devices and change margin → margin updates everywhere
Mobile padding (5px) remains unchanged
This means:
All Devices controls the base settings and styles for Sections and Elements
Device modes allow targeted overrides
Only the specific setting being changed is affected
To edit styles in Desktop, Tablet or Mobile modes, just click on the desired icon in the top toolbar of the builder (1) or on the "Edit on" icon in the left sidebar menu available for each section, row, column and element (2):
Editing Elements
To edit an Element (row, column, button, image, etc) within a section, click on the element in the builder to open the left sidebar panel where the settings are located.
Using the "Button" element as an example, you can adjust all settings related to the button element in All Devices mode:
When switching to Desktop, Tablet or Mobile edit modes, only the styles of the button can be adjusted on each device type independently. Main button settings are available in All Devices edit mode only:
Editing Sections
To edit a Section, ensure that the Section is selected in the builder first. It's recommended to click on an element within the section first, then on the "Section" breadcrumb link to select it. Once selected, the left sidebar panel will open where the section settings are located:
When switching to Desktop, Tablet or Mobile edit modes, only style settings (layout, alignment, spacing and visibility) will be available so you can adjust the appearance of the section on each device type independently:
👉 If a Section or Element is hidden on a particular mode (via the Visibility setting), then a device icon will be shown in the top-left corner of the section indicating it's hidden on that view:
