Every element on a page has the same kind of settings panel. Once you know how it works, you can style any element.
Open an element's settings
Click the element on the page. Its panel opens on the left with up to four tabs, shown as icons:
- Content: what the element says or shows, such as the image, the video or the button's action.
- Styles: how it looks: size, colors, border, shape and alignment.
- Settings: how it behaves.
- Effects: animations and visual effects. See Animations, confetti and other effects.
An element only shows the tabs it uses. Text, headings and spacers have no panel: you edit them directly on the page.
The element toolbar
A small toolbar appears next to the selected element:
- Select section (or Select header / Select footer) selects the section the element sits in.
- Move element lets you drag it, or press Shift+↑ and Shift+↓.
- Duplicate element makes a copy (Ctrl/Cmd+D).
- Delete element removes it. Games, forms, calendars and interactive graphics ask you to confirm. Hold Alt and press Delete to skip the question where that's allowed.
Press Tab and Shift+Tab to select the next or previous element.
Common style controls
- Size: choose Small, Medium or Large, or click the three dots to set the Width and Height yourself. Buttons can fit text, so they grow with the label.
- Shape: Square, Round, Pill or a custom corner radius.
- Border: None, Solid, Double, Dotted, Dashed or Groove, with a width and a color.
- Color: pick a color or type a hex code. Your Recently used colors are shown in the picker.
- Background: a Color, an Image (with Placement: Top, Center or Bottom) or, on pages, a Video from YouTube, Vimeo or your own file.
- Alignment: Left, Center or Right, or a 3 × 3 grid for elements that can sit in a corner.
- Gap: the space between the parts of an element.
- Shadow: turn it on and set the Color, Blur, Spread, the Horizontal and Vertical position, and Inset for a shadow inside the element.
- Font: the font, size and Bold. Text elements also have Italic and Underlined.
Drag the handles between elements to change the spacing (Drag to resize spacing). On images, the shortcut Replace image lets you swap the picture straight from the page.
The design kit and your own styles
Most elements use your design kit until you change them. When you have changed a button's style, two buttons appear on the Styles tab:
- Clear styles puts the element back to the design kit.
- Apply to all saves your changes in the design kit, so every button follows them.
Changes for mobile and tablet only
Switch to Mobile or Tablet above the page and change a setting: the change only applies to that screen size. A small undo arrow appears next to settings that differ from desktop. Click it to use the desktop value again.
Add-ons
Many elements have extra features, called add-ons. Click the add-ons button (tooltip Advanced extensions) in the panel to see them, for example Button add-ons or Form add-ons. Each add-on has a short description and a switch. Some add-ons have their own Settings: click the cog to open them. Enabled add-ons are listed in the panel, so you can see at a glance what is on.
Color picker
Click a color to open the picker (Pick color), choose a color or type a hex code, and click Reset color to go back to the default.