Style panel
The Style panel appears at the bottom of the right side panel as soon as an element, a section or the page is selected on the canvas. It gathers the visual formatting common to almost every block: typography, colors, background, margins, borders, shadows, animations…
Each subsection collapses or expands. As soon as at least one setting is defined, a Modified badge appears next to the title, with a summary of what's applied (for example a color swatch for the background). If the value differs between desktop and mobile, the summary shows both values, each preceded by a monitor or smartphone icon. Hovering a collapsed subsection shows a preview card that illustrates its effect.
Editing desktop, mobile, or both
A note at the top of each expanded subsection says which mode you're editing in: Edits desktop and mobile, Edits desktop only or Edits mobile only.
- In Desktop only preview, with no existing mobile override, your changes apply to both formats. As soon as a value is different on mobile, editing only affects desktop.
- In Mobile only preview, your changes create a mobile-specific override: the desktop value is preserved.
This lets you have, for example, a heading at 64px on desktop and 32px on mobile without having to recopy the entire formatting.
Reset a subsection
Most subsections offer a reset button (Reset settings text) that appears as soon as at least one value is set. It clears every setting in the subsection to revert to the default behavior (often that of the theme).
List of subsections
| Subsection | Doc page |
|---|---|
| Visibility: show or hide the element on desktop, mobile, or both | Visibility |
| Text style: font, size, alignment, case, color | Text style |
| Positioning: vertical alignment of the content | Positioning |
| Background: solid color, gradient or image | Background |
| Inner spacing: inner margins on all four sides | Inner spacing |
| Border: style, thickness, color and bordered sides | Border |
| Rounded corners: global or per-corner radius | Rounded corners |
| Shadow: realistic, flat or preset drop shadow | Shadow |
| Mockup: frame inside a device (iPhone, MacBook, iMac…) | Mockup |
| Filter: opacity, brightness, contrast, sepia, blur… | Filter |
| Animation: appearance on screen (fade, zoom, slide…) | Animation |
Not every subsection is shown for every type of element: the Text style subsection only appears on elements that contain text, Mockup only on images and videos, etc. Elements whose text is not freely editable (Social media, Button action, Language menu) replace Text style with two reduced subsections, Size and Color. The Navigation and Social media elements add a Direction selector in the Positioning subsection.