For information on adding widgets, see Add Widgets.
Tip
Fore more information on widgets and the widgets library, see Widgets: Library and Overview.
Content Editor
To access the content editor, right click the widget and select Edit Content. Or, if you are in flex mode or Editor 2.0, the option to access the content editor is available in the floating menu.
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.
Back to top.
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
To access the design editor, right-click the element, and click Edit Design. Or if you are in flex mode or Editor 2.0, select Edit Design from the floating menu to open the design panel.
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.
For information about design options that are not specific to this widget (for example, layout, style, or spacing), see Widget Design.
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 Buttons.
Floating Buttons(Fixed Buttons in Editor 2.0)
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).
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.
Pinned Buttons in Editor 2.0
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.