Styling widget elements
Every element in a widget, and the widget's steps and inner components (such as a form's inputs or a survey's options), is styled with the same groups of settings: Style, Typography, Size, Layout, Spacing and Position, plus Animation and Show on for elements. This page is the reference for all of them. Widget-level options such as the close button and backdrop are in Widget display options.
Available on: all widget types and platforms.
How it works
- Select an element on the canvas or under Structure. Its settings open in the right panel, grouped in tabs and sections.
- Each element shows only the groups that apply to it. A divider has no typography; a spacer has only a height.
- Some settings have states, such as hover or focus. Pick the state at the top of the panel to style it; values you don't set are inherited from the default state.
- Edits apply to the view you're in. In Desktop view they're the base values; in Mobile view they override the base values on screens up to 480 px wide. See Widgets on mobile.
- New elements take their colors, fonts, corners and button style from your branding.
Style
Option | What it does | Values |
|---|---|---|
Background | Fill of the element | Color, gradient or image (with size, repeat and position) |
Border | Outline | Width, style, color |
Border radius | Corner rounding | px, linked or set per corner |
Shadow | Drop or inner shadow | Color, Position (Inside or Outside), X, Y, Blur, Spread |
Opacity | Transparency of the whole element | 0–100% |
Scale | Visual size, without affecting layout | 0–200% |
Typography
For headlines, text, buttons, labels and other text components.
Option | What it does | Values |
|---|---|---|
Color | Text color | Color |
Font | Font family | Your branding fonts, Google Fonts, or custom fonts you've added |
Size | Font size | px |
Line height | Spacing between lines | Multiplier, default 1.4 |
Letter spacing | Spacing between characters | Default 0 |
Style | Emphasis | Bold, Italic, Underline, Strike |
Transform | Letter case | None, Uppercase, Lowercase, Capitalize |
Line wrap | How lines break (headline and text) | Normal, Balanced, Pretty |
Align | Text alignment | Left, Center, Right, Justify |
Size
Option | What it does | Values |
|---|---|---|
Width / Height | Element size | px, %, vw or auto |
Min / Max width and height | Limits, under the advanced options | px, %, vw or auto |
Fit | How images and videos fill their box | Fill, Contain, Cover |
Position (image) | Which part of the image stays visible with Contain or Cover | Focal point picker, default top left |
Overflow | Content larger than the element, where available | Visible, Hidden, Auto |
Layout
For steps, containers and elements that arrange several items, such as forms and surveys.
Option | What it does | Values / default |
|---|---|---|
Direction | Arrange items vertically or horizontally | Horizontal, Vertical, with a Reverse option |
Justify | Distribution along the direction | Start, Center, End, Stretch, Space between |
Align | Alignment across the direction | Start, Center, End, Stretch |
Wrap | Let items wrap to a new line | Yes, No (default) |
Gap | Space between items | px |
Spacing
Option | What it does | Values |
|---|---|---|
Padding | Space inside the element, between its edge and its content | px per side |
Margin | Space outside the element | px per side, negative values allowed |
Position
Option | What it does | Values / default |
|---|---|---|
Position | How the element is placed | Static (default, in the normal flow), Relative (offset from its normal place), Absolute (placed relative to its container, out of the flow) |
Top / Right / Bottom / Left | Offsets for Relative and Absolute | px or %, or auto |
Use Absolute for badges, ribbons and decorative images that overlap other content.
States
Element or component | States |
|---|---|
Buttons, coupon, social buttons, close button | Hover, Focus, Active |
Form inputs and checkboxes | Hover, Focus, Checked |
Survey options | Hover, Focus, Active, and Selected for multiple-choice questions |
Animation
Elements can animate in when the widget or step appears.
Option | What it does | Values / default |
|---|---|---|
Type | Entrance animation | None, Fade in, Slide up, Slide down, Slide left, Slide right, Zoom in |
Duration | Animation length | 0.1–2 s, default 0.5 s |
Delay | Wait before the animation starts | 0–5 s, default 0 s |
Stagger delays (for example 0 s, 0.2 s, 0.4 s) to reveal a headline, text and button one after the other. The widget's own open animation is set in Widget display options.
Show on (device visibility)
Option | What it does |
|---|---|
All devices (default) | Always visible |
Mobile | Visible only on screens up to 480 px wide |
Desktop | Visible only on screens wider than 480 px |
Behavior details and limitations
- Your site's CSS can reach widgets. Widgets are part of your page, so some theme styles (such as global link or button styles) can apply to them. Override them in the widget's custom CSS.
- Branding changes don't restyle existing widgets. Each widget keeps the styles it was created with. See Branding.
- Percent widths are relative to the container. A 50% element inside a container is half the container's width, not half the widget's.
- Scale doesn't change layout. Other elements don't move when you scale an element up; use it for hover effects, not sizing.
- Containers can have shaped edges. A container's Edge setting (curve, diagonal, arch, wave) can be set separately for mobile. See Container.