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…
Style means appearance: colors, fonts, spacing and effects. A value in px is a size in pixels, the unit used for on-screen dimensions. A mobile override is a setting used only for phones, keeping the desktop value unchanged.
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, a setting also applies to mobile until you give mobile its own value. If mobile already has a different value, only the desktop version changes.
- In Mobile only preview, you set a value just for phones. The desktop value stays unchanged.
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.