Every widget has two places to edit it. The toolbar's main button (Edit Text, Manage Image, Manage Photos and so on) changes what it shows. Edit Design opens the Design panel on the right, which changes how it looks. This article explains the parts of the Design panel that most widgets share, so each widget's own article only covers what's different.
How to open the Design panel
- Click a widget on the page to select it.
- Click Edit Design in the toolbar above it.
- The panel opens on the right. Its title is the widget's name (or the label you gave it), and the widget type shows under it.
- Click a section heading to open or close it. Close the panel with the X.
When the widget sits inside a column or other box, a breadcrumb at the top lists the boxes around it. Click one to select that box instead.
The order of the panel
From top to bottom:
- Grid Position, only when the widget is inside an Advanced Grid.
- Position, only when the widget is inside a Free Layout.
- Visibility, only when the widget (or something in it) is connected to a field of the page's collection row.
- The widget's own sections, for example Content, Style or Layout.
- Spacing (almost every widget).
- Animations & Effects (every widget). See Animations and effects.
- Position on the Button family, Icon and WhatsApp widgets (the pinning settings below).
Spacing
A box diagram with two rings.
- Outer ring = margin: space outside the widget, top, right, bottom and left. Click a number to type a new one and pick a unit: px, % or vh. Margin can be negative, so you can pull a widget up over the one above it.
- Inner box = Padding: space inside the widget's own edge, in px. Only widgets with their own padding show it (for example Text, Image and Button). Most Showcase, Effects, Business and Blog widgets show margin only. Padding can't go below 0.
- The chain icon (Link all padding edges) sets all four padding sides at once. Reset padding sets padding back to 0.
- Padding is set for the screen size you're editing. Margin is one value for every screen size.
Width and Height (auto, px, %)
Widgets with a Size section (Video, Image, HTML Embed, Button and others) have a unit next to Width and Height.
- auto shows the widget's current size on the page, grayed out, so you can see what you'd start from.
- Switching from auto to px starts from that size, and % from its share of the column. If the widget isn't on the page yet, it starts at 640 × 360 px or 100%. It never starts at 0.
- Switching between px and % keeps the same size on the page.
Widgets that have no size of their own on auto (Video, Map, Lottie Animation, Audio, HTML Embed, Form, Scroll Video, Particle Image, Split Tabs, and a horizontal Divider at a % length) always fill the width of the place they're in, like a full-width block. That holds in a column aligned left, center or right, in a row of widgets (each one takes a full line when the row wraps, and they share the row when it doesn't), in an Advanced Grid cell, and in a Free Layout box (up to 640 px wide when you haven't given it a width). The widget's own left and right margins come off that width.
Position (pin or stick a widget)
On Button, Download File, Click to Call, Click to Email, OpenTable, Icon and WhatsApp.
- Position type: Default (stays in its column), Sticky (stays near the top while its section scrolls past) or Fixed (pinned to the screen). The Icon and WhatsApp widgets call Fixed Floating and have no Sticky.
- Distance from top (Sticky): 0 to 200 px. It counts from below the header when the header stays on screen.
- Pin to (Fixed): one of nine spots in a 3×3 grid. The default is bottom right.
- Horizontal offset and Vertical offset (Fixed): 0 to 200 px from the edge, default 24 px. Center spots hide the offset they don't need.
- Layer (z-index): 1 to 999, default 50. Higher numbers sit on top of lower ones. Raise it if a pinned button hides behind the header or a popup.
- Show on every page: appears once the widget is Fixed on at least one screen size. It puts one copy on every page, kept with the footer. Open Except these pages (n) and untick pages to leave it off them.
- Position is set per screen size. Set Fixed on Mobile to pin a button on phones only.
The full walk-through, with how a pinned button looks in the editor, is in How to add and edit widgets.
Visibility (Hide When Empty)
Shows on a dynamic page, or inside a Dynamic Repeater, when the widget is connected to a field of the row.
- Turn on Hide this when is empty. On entries where that field is blank, the widget isn't shown and the space closes up.
- If several fields are connected, pick the one that decides under Field.
- In Edit mode the widget stays on the canvas, dimmed with a badge, so you can still edit it. Preview and the live site hide it.
Grid Position (inside an Advanced Grid)
- Column and Row: the cell the widget starts in.
- Columns wide and Rows tall: how many cells it covers.
- Pin inside its area: a 3×3 grid that places the widget inside its cells.
- Stretch across and Stretch top to bottom: fill the area instead.
- Arrange (for overlapping items): Bring to front, Bring forward, Send backward, Send to back.
- Flow automatically instead: clears the placement on this screen size, so the widget drops into the next free cell.
- Everything here is set per screen size. More in Advanced Tabs, Accordion and Grid.
Position inside a Free Layout
- Left (−20 to 100 %) and Top (0 to 2,000 px).
- Its own width / Width (1 to 100 %) and Its own height / Height (8 to 2,000 px).
- Layer (−50 to 50), Rotation (−180° to 180°) and the same four Arrange buttons.
- Set per screen size. On phones the items stack until you set a position there. See Free Layout.
Text style controls
Many widgets have a group like Title, Body Text or Button Text with the same rows:
- Font: the site's fonts. Clear it to use the theme font.
- Size: 8 px up to the widget's limit (often 72 px), set per screen size.
- Text color: a solid color, or Gradient where offered.
- Format: Bold and Italic.
- Alignment: Left, Center or Right, per screen size.
- Text shadow: turn on to set Shadow X and Shadow Y (−30 to 30 px), Shadow blur (0 to 60 px) and Shadow color.
- Some groups put the text in a box and add Background, Border (0 to 12 px), Border color and Padding (0 to 80 px).
Gradient text and shadows are explained in Gradients and text effects.
Hover effect chips
Image, Icon and Shape have a Hover effect (desktop) row of chips: None, Zoom out, Opacity, Float, Forward, Grayscale, Reverse grayscale, Blur, Blur and grayscale. These play when a mouse pointer is over the widget, so they don't show on phones. They're separate from the Hover effects in Animations & Effects.
Reset to theme
Widgets take their colors, fonts, corners and button styles from the Site Theme until you change them. A reset puts the theme's look back:
- Image: Reset to theme image style.
- Button: ↺ Reset to Site Theme style, then confirm with Yes, reset.
- Text: Reset to theme in the text toolbar.
Per-screen-size settings
Most sizes, alignments, padding, font sizes and opacity are set for the screen size you're editing. A small icon next to the setting shows whether it's inherited (for example "Inherited from Desktop") or overridden here; click it to go back to the wider size. Choices such as image Fit, alt text, the button variant, margin and animations are the same on every screen size. See Responsive design.
The Manage items window
Photo Gallery, Media Slider, the card and showcase widgets and many others edit their items in a shared window (for example Manage Photos, Manage Slides, Manage Cards).
- Choose Manual or From a collection at the top.
- Manual: hover an item for Move up, Move down, Duplicate and Delete (confirm with Delete or Keep). Add adds one; picture-first widgets say Add Images and let you pick several at once. Delete all clears the list after a confirm.
- Click an item to edit it. Depending on the widget: its text, an image (Add image, Replace, Remove, Alt text), a video where allowed, Focal point, Show button with Button text and a link, Link this , and Anchor (optional).
- From a collection: pick the Collection, match Fields, then Filter & sort (Filters, Match this dynamic page, Sort by, Number of items).
- Click Done to save everything as one undo step, or Cancel to throw the changes away.
Some widgets cap the list (for example 25 slides); Add and Duplicate turn off at the cap and the window says "Up to 25 slides."
Connect to Data
Only eight widgets connect directly with Connect to Data in the toolbar: Text (its text), Image (picture and alt text), Button (link and button text), Video (video and poster), HTML Embed (code), Photo Gallery (images), Media Slider (slides) and Map (location). Other widgets get collection content from their Manage window instead. See Connect to data.
Who can use it
- Agency team members with the Mount Olympus tool can use everything here.
- Client people with Widget content can change what existing widgets say and show, but not open design settings, add or delete widgets.
- Client people with Editor can do both.
- Connect to Data needs Editor or Dynamic pages & Connect to Data.
- An element with Lock Editing for Client (right-click) can't be changed by any client person.
Examples
- Pull a badge over a photo: give the badge a top margin of −40 px.
- A phone-only "Call now" bar: Click to Call widget, switch to Mobile, Position type Fixed, Pin to bottom center, Layer (z-index) 100, then Show on every page.
- A team page that skips missing photos: on the dynamic page, select the image connected to "Headshot" and turn on Hide this image when Headshot is empty.
Limits and what it can't do
- Margin can't differ per screen size yet.
- Position (Default / Sticky / Fixed) is only on the widgets listed above.
- Visibility only appears for widgets connected to a field of the page's row, not to Business Info.
- Hover chips need a mouse; phones and tablets don't show them.
Troubleshooting
- "Add a footer to the site first: elements shown on every page are kept with the footer.": Show on every page is grayed out until the site has a footer. Add one, then turn it on.
- My pinned button is hidden behind something: raise Layer (z-index).
- I changed padding on Mobile and Desktop didn't change: that's expected. Padding is per screen size; switch to Desktop to change it there.
- There's no Design button for my client: they need Editor. Widget content only allows content changes.
- The Visibility section isn't there: the widget isn't connected to a row field. Connect it first with Connect to Data.