Five widgets share one set of button settings. Button links anywhere. Download File, Click to Call, Click to Email and OpenTable are buttons with the link already set up for one job. They all start with the Site Theme's button style.
Button
How to add it
- Click Add in the left rail and open Basic.
- Drag Button onto the page.
- Click Manage Button in its toolbar. The Button Content panel opens.
- Type the Text on button and choose where it links.
- Click Edit Design to style it.
Manage Button
- Text on button: the label. Default "Button".
- Set what the button links to: the link picker. Choose a page, a section on this page, a web address, a popup, a blog post, a dynamic page item, an email, a phone number, a text message, a file, back to top or scroll to bottom, plus Open in new tab and link options. See the link picker.
- When the text or link is connected to data, the card says "Connected to — edit it there instead."
Style
- Variant: Primary or Secondary, the two button styles from the Site Theme. Default Primary. A live preview shows the result.
- Two tabs: Button style and Button text.
Button style tab:
- Background: Color (solid or gradient) or Image. For an image: Choose image…, Replace, Remove, Fit (Fill, Fit, Original) and Position (Center, Top, Bottom, Left, Right). The background color shows through transparent areas.
- Border: width 0 to 10 px, a style (gear: Solid, Dashed, Dotted, Double) and a color, per screen size.
- Sides: Top, Right, Bottom, Left, per screen size. "Set a border width above to show the line."
- Border radius: up to 50 px, or Each corner, per screen size.
- Slant: −20° to 20°, per screen size. Leans the button; the label stays upright.
- Shadow: switch on, pick a direction, pick a color.
- Glass morphism: a frosted-glass look. Tint (with Light and Dark presets, default white), Blur 0 to 40 px (default 10), Background opacity 0 to 100 % (default 20), Border opacity 0 to 100 % (default 30). The glass shows the same in the editor and on the live site.
- Show icon: off by default. Then choose the icon, Icon color, Icon position (Left / Right, default Right), Space between 0 to 40 px (default 10) and Icon size 8 to 48 px (default 20), both per screen size.
- More design options: Letter spacing (−5 to 20 px) and Text transform (None, Uppercase, Lowercase, Capitalize), per screen size.
- ↺ Reset to Site Theme style: asks "Reset all design overrides to match the site theme?" Yes, reset clears your design changes and the icon.
- Change color on hover: on by default. Set the hover Background color, Border color and Icon color, and optionally Glass morphism on hover (Tint, Blur, Background opacity, Border opacity).
Button text tab:
- Font family, Font size (8 to 72 px, per screen size) and Font weight (100 to 900).
- Format: Bold, Underline, Italic.
- Text color.
- Text alignment: left, center or right, per screen size.
- Text direction: LTR or RTL.
- Hover: Text color and Format on hover (bold, underline, italic on hover).
Alignment
- Vertical alignment: Top, Middle, Bottom or Stretch (fills the row's height). Default Middle. Per screen size.
- Horizontal alignment: Column (default: the button follows its column's Horizontal alignment), Left, Center or Right. Per screen size, so a button can sit left on computers and centered on phones. The toolbar's Alignment button sets the same thing. Buttons side by side in a row are placed by the row's own alignment.
Spacing
Padding (per screen size) and margin. See Design panel basics.
Size
- Width: px (0 to 800), % (0 to 100) or auto. A % width is a share of the column.
- Height: px (0 to 800) or auto.
- More size options: minimum and maximum width (px or %) and minimum and maximum height (px).
- All per screen size. You can also drag the handles on a selected button.
Animations & Effects
- Hover effects: on by default with Move Top. Choices: None, Move Top, Move Bottom, Scale, Fade.
- Magnetic pull: the button leans toward the pointer. Strength 10 to 60.
- Cursor label: the word shown by the site's "Label over buttons & links" cursor effect, up to 24 characters. Blank uses the site default. See Cursor effects.
- Entrance and Scroll: see Animations and effects.
Position
Default, Sticky or Fixed, Show on every page and Layer (z-index). See Design panel basics.
Connect to Data
Toolbar > Connect to Data: Connect Link to and Connect Button text to. For example, a "Visit website" button on a dynamic page linked to each row's URL.
Download File
A button that downloads a file. Add > Basic > Download File.
- Starts as "Download File", full width, with a download icon on the left.
- Manage File opens File Download Content: Text on button and File to download. Click + File, then Upload (PDF, Word, Excel, PowerPoint, CSV, text or zip, up to 25 MB) or Link to a file. Replace or Remove it later.
- "Visitors who click the button download this file. Uploaded files are public." Anyone with the link can download it, so don't upload private documents.
- Design settings are the Button's, including Position.
Click to Call
A button that phones the business. Add > Basic > Click to Call.
- Starts as "Call Us" (a phone icon is ready but hidden; turn on Show icon).
- Manage Call Button > Phone number. Leave it blank to use the first Business Info phone. Spaces, dashes and brackets are removed for the dialler.
- Tip: hide it on Desktop (right-click > Hide From > Desktop) so only phones see it, or pin it with Position > Fixed on Mobile.
Click to Email
A button that opens a new email. Add > Basic > Click to Email.
- Starts as "Email Us" (a mail icon is ready but hidden).
- Manage Email Button > Email address. Leave it blank to use the first Business Info email.
OpenTable
A reservation button. Add > Business > OpenTable.
- Starts as "Find a Table" and opens OpenTable in a new tab.
- Manage OpenTable > Restaurants: a Location name and OpenTable restaurant ID per row, Remove, and + Add location. The ID is the number after "rid=" in your OpenTable reservation link; only digits are kept.
- With two or more locations, the live site shows a Choose a location list above the button; visitors pick one, then the button opens that restaurant.
Examples
- A plumber's phone bar: Click to Call on Mobile, Position Fixed, Pin to bottom center, Show on every page.
- A menu download: Download File with the PDF menu, text "Download our menu".
- A frosted hero button: Button, Glass morphism on, Tint Light, Blur 12 px, over a photo background.
- A two-location bistro: OpenTable with "Downtown" and "Harbor" rows.
Limits and what it can't do
- One link per button. For several choices, use a few buttons or Nav Links.
- Download File files are public.
- OpenTable needs a restaurant ID; without one the button has nowhere to go.
- The button is never narrower than its longest word when pinned.
- The Links Audit Tool row in Manage Button is a placeholder and doesn't work yet.
Who can use it
- Agency team members with the Mount Olympus tool.
- Client people with Widget content can change the text, link, file, phone, email and restaurants. Design and Position need Editor.
- Connecting to data needs Editor or Dynamic pages & Connect to Data.
Troubleshooting
- My button won't link: open Manage Button and check Set what the button links to has a page or address. In the editor a click selects the button; test the link in Preview or on the live site.
- "File too large (max 25 MB).": compress the file or link to it with Link to a file.
- Click to Call calls the wrong number: the Phone number box is blank, so it uses the first Business Info phone. Type the number, or reorder phones in Business Info.
- The hover color isn't what I want: turn off Change color on hover, or set its colors.
- The button looks different from the others: it has its own design changes. Use ↺ Reset to Site Theme style.
- The icon color doesn't change on hover: set Icon color under Change color on hover.