Widgets: Button

Buttons are the easiest way to get site visitors to take action. Buttons can lead visitors to another page on your site or to a page on a different website. Buttons can also open a popup, contact form, online reservation, email address, and more.

Content Editor

  1. Type the text you want to display on the button in the field provided.

  2. Select from the following options where the button links to:

    • Existing Page.

    • Store link. This will only show if the site has a store.

    • Website address.

    • Popup.

    • Anchor.

    • Membership plan checkout. This will only show if the site has added the Membership feature.

    • Blog post. This option will only show if the site has a blog.

    • Email Address.

    • Click To Call.

    • File for download.

Tip

For details on these options, see Link Picker

Design Editor

Use the design editor to select whether the button inherits the primary or secondary button style defined in the theme panel. In addition, you can choose between the different button layouts, make edits to the button style (width, height) and button text (font, text size, color, format, alignment, and direction), and adjust the inner and outer spacing.

Any changes you make within the design editor will override styles set at the theme button level. If you need to revert back to the theme button style, click Reset to theme style.

Primary and Secondary theme Buttons
  • If changes are made to the button (which will override styles set at the theme button level), an indicator box will still be present on the Primary or Secondary button style.

  • If the button style that does not have the indicator box is clicked, it will reset the button to the style set at the theme button level.

Note

For more information on theme buttons, see Site Theme.

Floating Buttons

Floating buttons allow you to keep a button visible at all times, even when a visitor scrolls down the page. Use Floating buttons to keep important calls to action fixed, visible, and clickable on all site pages.

Ideal uses cases include:

  • Contact Us

  • Subscribe

  • Get a Quote

To make a button float :

  1. In the side panel, click Widgets. Search for the Button widget, then click and drag it onto the canvas.

  2. Right-click the button, and then click Edit Design.

  3. On the Style tab, scroll down, and click the Floating toggle. If the Floating attribute is disabled, the button automatically appears in the first row at the top of the page.

  4. Select a position for the button. Switch the device view to change the position on different devices.

  5. To display the floating button on the current page only, enable the Show on this page only toggle.

Note

A floating button can be set to display on specific pages, but it will appear on all pages by default (there is not currently a way to toggle it off only for particular pages).

floating-Button-tutorial.GIF
Mobile Considerations
  • On mobile, we suggest placing the Floating button at the bottom corner of the screen so visitors can easily click it with one hand.

  • You can display an icon rather than text on mobile by choosing the layout that features an icon on mobile.

  • If a floating button is not displaying on mobile, you may be using an old mobile layout. To update the layout, go to the Design Editor, and click Site Layout.