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.
-
Type the text you want to display on the button in the field provided.
-
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
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.
-
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 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 in Classic Editor or Fixed in Editor 2.0:
-
In the side panel, click Widgets. Search for the Button widget, then click and drag it onto the canvas.
-
Right-click the button, and then click Edit Design. If you are in Editor 2.0, click the button to open the floating menu, and select Edit Design. This opens the design panel on the right side of the screen. Scroll down to the Position section of the design panel.
-
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. If you are in Editor 2.0, click to expand the Position type menu and select Fixed. This ensures your button stays in a fixed position as the user scrolls on your site. This change applies to all screen sizes, however you can override it if necessary. Once you select the position, you cannot switch from Fixed to Pinned. This is because when you select Fixed, the button is removed from its original container so that it can stay visible on the screen as the user scrolls. If you were to switch from Fixed to Pinned, the editor would not know what container to place the button in. If you need to switch, you need to switch back to Default first. The button will be moved to the first section in the viewport.
-
Select a position for the button. Switch the device view to change the position on different devices. If you are in Editor 2.0, in the Spacing menu, use the Margin settings to define where the button is located in the viewport. This is especially important to configure if you have two fixed buttons in the same viewport position.
-
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).
-
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.
Pinned buttons stick to their parent element (column or inner column) for as long as the parent element is in the viewport. If there is more than one pinned button in the same position, the button on top will be the first button.
Note
Pinned is not an option in advanced grids.
To enable a pinned button in Editor 2.0:
-
In the side panel, click Widgets. Search for the Button widget, then click and drag it onto the canvas.
-
Click the button to open the floating menu, and select Edit Design. This opens the design panel on the right side of the screen.
-
In the design panel, scroll down to the Position section.
-
Click to expand the Position type menu and select Pinned. This ensures your button sticks to its parent element (column or inner column) as long as the parent element is in the viewport. This change applies to all screen sizes, however you can override it if necessary.
-
In the Position section, configure the button’s offset. The offset is where the button will be pinned on scroll before leaving the viewport. If set from desktop, other screen sizes will have the same values, however it can be overridden per screen size as necessary. If sticky header is enabled, the offset will be based on the default header height. If you enable a sticky header after setting offset, it will not automatically update and you will need to go back and manually adjust the offset.
If at any point you move the button to a different parent element (column or inner column), the design panel settings, like offset, will be retained.
There will be a pinned indicator icon in both the button’s floating menu and design panel.