Four small Basic widgets for decoration and layout: Icon (one icon or a row of stars), Shape (a filled shape), Spacer (empty space) and Divider (a line).
Every widget's Design panel ends with Spacing and Animations & Effects. They work the same way everywhere, so they're explained once in Widget design panel basics and Animations and effects.
How to add one
- Open the editor and click Add (the Add panel).
- Under Basic, drag Icon, Shape, Spacer or Divider onto the page.
- Select it. Icon and Shape have a toolbar button for their content (Manage Icon, Choose Shape). Open Design for the look.
Icon
A library icon or your own SVG, with an optional link, alt text and tooltip. It can also show a row of review stars.
Manage Icon
Click Manage Icon in the toolbar.
- Change icon: opens Choose an icon. It starts with about 120 recommended icons; open All icons for the full library (over 1,600). Search works with everyday words, so "lightning", "call", "tick", "home" or "location" find the right icon even when its name is different. Pick one and click Use this icon.
- Upload SVG file: pick your own icon from the site's media. Use a library icon instead switches back. Uploaded icons keep their own colors, so the Icon color setting only applies to library icons.
- Link icon: makes the icon clickable. You get the usual link choices (page, web address, phone, email, popup and more). See Link picker. Remove link takes it off.
- Alt text: what screen readers say ("Describe the icon for screen readers"). Leave it blank for a purely decorative icon.
- Tooltip: text shown when a visitor hovers the icon.
- Click Save.
Style
- Show: Icon or Star rating. Default Icon.
- Stars (star rating only): how many filled stars, 0–10. Default 5.
- Out of (faint empty stars; 0 = none) (star rating only): adds faint empty stars up to this number, for "4 out of 5". 0–10, default 0.
- Space between stars (star rating only): 0–40px, per screen size. Default 4px.
- Icon size / Star size: 8–400px, per screen size. The icon defaults to 60px; switching to stars starts at 24px.
- Icon color / Star color: hidden for an uploaded SVG. Default near-black.
- Line weight: how thick the icon's lines are, 0.5–4 (library icons only). Default 2.
- Background color: a color behind the icon. Off by default.
- Border: 0–20px. Border color shows once the border is above 0.
- Corner radius: 0–200px. Use a large value with a background to get a round badge.
- Space around icon: padding between the icon and its background or border, 0–120px, per screen size.
- Hover effect (desktop): None, Zoom out, Opacity, Float, Forward, Grayscale, Reverse grayscale, Blur or Blur and grayscale. Plays on computers only.
Alignment
- Horizontal alignment: Left, Center or Right, per screen size. Default Center.
Spacing, Animations & Effects
Margin around the icon, plus Entrance and Scroll animations. See the two shared articles above.
Position
- Position type: Default or Floating (there's no Sticky for icons). Floating pins the icon to the screen: choose Pin to, the Horizontal offset and Vertical offset (0–200px), and the Layer (z-index) (1–999).
- Show on every page appears once the icon floats on some screen size. It keeps one copy with the footer so it shows on every page, with Except these pages to leave some out.
- Full details are in Widget design panel basics.
Shape
One of 20 shapes, filled with a color or a photo cut to the shape.
Choose Shape
Click Choose Shape in the toolbar. The window is called Shape.
- Choose shape: Hexagon, Square, Circle, Triangle, Star, Small circle, Ribbon, Parallelogram, Banner, Diamond, Tag, Rounded square, Ring, Arch, Speech bubble, Shield, Seal, Cloud, Egg or Blob. Default Hexagon.
- Fill: Color fill (set in Design) or Image fill. With Image fill, click + Image (or Replace image) to pick a photo. It's cropped to the shape.
- Link: optional; Remove link takes it off.
- Title (tooltip): shown when a visitor hovers the shape.
- Alt text: "Leave blank if it's decorative". With an image fill, this is the photo's alt text.
Size
- Width: 16–1200px, per screen size. Default 200px.
- Keep proportions: on by default. Turn it off to set the height yourself.
- Height: 16–1200px, per screen size. Only shows when Keep proportions is off.
- Alignment: Left, Center or Right. Default Center.
Style
- Shape color: the fill color (color fill only).
- Border: 0–10px. Border color shows once it's above 0.
- Shadow: a soft drop shadow, on or off.
- Hover effect (desktop): the same nine choices as the Icon.
Spacing, Animations & Effects
Margin, plus Entrance and Scroll animations.
Spacer
An empty block that pushes widgets apart. It has no toolbar button: select it and open Design.
Spacer
- Height or Width: the panel shows Height when the spacer sits in a column that stacks top to bottom, and Width when it sits in a row of side-by-side items. 8–400px, per screen size. Default 32px.
- Set a smaller value on Mobile to tighten phone layouts without changing the desktop page.
Spacing, Animations & Effects
Spacing here is margin only (a spacer has nothing inside to pad). Animations & Effects has Hover effects, Entrance and Scroll.
Divider
A solid line. It has no toolbar button: select it and open Design.
Divider
- Axis: H (horizontal) or V (vertical). Default horizontal. Use a vertical divider in a row of side-by-side items.
- Length: type a number and pick % or px. 1–100% or 1–2000px, per screen size. Default 100%.
- Thickness: 1–20px, per screen size. Default 2px.
- Color: per screen size. Default gray (#8f8f8f).
Spacing
Padding (space between the line and the edge of its box, per screen size, with a reset) and margin.
Animations & Effects
Hover effects, Entrance and Scroll.
Examples
- Review badge: an Icon set to Star rating, Stars 5, gold Star color, next to a Text widget that says "Rated 4.9 on Google".
- Service icons in a row: three Icons with a light Background color, Corner radius 200 and Space around icon 16, each linked to its service page, with Float on hover.
- Team photo in a hexagon: a Shape with Image fill, Keep proportions on and a white 4px Border.
- Vertical line between two columns of text: a Divider with Axis V, Length 100% and Thickness 1px, inside a row.
Limits and what it can't do
- The Divider is a solid line only. For dashed or dotted lines, use the List widget's divider or a section border.
- An uploaded SVG icon can't be recolored or have its line weight changed.
- Stars are always the star shape. To use a different rating icon, place several Icons side by side.
- The Shape widget isn't the same as the wavy or angled edges between sections. Those are Section shape dividers.
- Icon, Shape, Spacer and Divider can't be connected to collection data.
- Client people can't add these widgets or change their design without the Editor permission. With Widget content they can change an icon's or shape's content (icon, link, alt text, tooltip, image).
Who can use it
Anyone with the Mount Olympus tool on the agency team. Client people need Editor to add, move or style these widgets, or Widget content to change what an existing Icon or Shape shows.
Troubleshooting
- The Icon color setting is missing: you're using an uploaded SVG. Uploaded icons keep their own colors. Click Use a library icon instead in Manage Icon, or recolor the SVG before you upload it.
- The icon or stars show at the wrong size on phones: sizes are per screen size. Switch to Mobile in the top bar and set Icon size / Star size there.
- My floating icon covers the chat button or cookie banner: change Pin to, the offsets, or the Layer (z-index).
- The spacer shows Width instead of Height: it's inside a row of side-by-side items. Move it into a column that stacks, or use the width.
- The divider looks too long on a phone: switch to Mobile and lower Length, or use % so it follows the column width.
- The hover effect doesn't show on my phone: Hover effect (desktop) only plays where there's a mouse.