Button Widget

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.

To add buttons:

1. In the left panel, click Widgets.
2. Click and drag the button widget into your site.

To learn more about adding widgets to your site, see Add Widgets.

Content Editor

To access the content editor, right-click the widget, and click Edit Content.

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. Send the visitor to an existing page on your site.
   • Website URL. Send the visitor to a specific URL.
     • The following attributes are available:
       • Open in new window.
       • Set as "no follow". Ask search engines to not associate your site with or crawl the linked page from your site.
       • Set as sponsored. This lets search engines know the link is the result of an advertisement or paid placement.
       • Set as user Generated Content (UGC). This informs search engines of links created by users (e.g., a link someone posted in a comment), that aren’t necessarily reliable.
   • Popup. Open a popup. Choose from popups located in Pages & Popups or create a new popup.
   • Anchor. Send the visitor to an anchor on any page on the site.
   • Membership plan checkout. Send the visitor to the checkout page for a Membership plan. This will only show if the site has added the Membership feature.
   • Store link. Prompt the visitor's device to open the store login, shopping cart or product page. This will only show if the site has a store.
   • Email Address. Prompt the visitor's device to open an email client with a specific email address.
   • Click To Call. Prompt the visitor's device to call a specific phone number.
   • File for download. Prompt the visitor's device to download a specific file.

Design Editor

If you are using Classic Editor, right-click the widget, and click Edit Design to access the design editor. If you are using Editor 2.0, click the widget, then select Edit Design in the floating menu to access 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.

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.

Floating Buttons

In Classic Editor you can make a button visible at all times, even when a visitor scrolls down the page, by clicking the Floating toggle. If you are using Editor 2.0, select Fixed from the Position type menu to make a button visible at all times.

For more information, see Floating Buttons.

Pinned Button 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:

1. In the side panel, click Widgets. Search for the Button widget, then click and drag it onto the canvas.
2. Click the button to open the floating menu, and select Edit Design. This opens the design panel on the right side of the screen.
3. In the design panel, scroll down to the Position section.
4. 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.
5. 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.

Add a Button Background

You can add a background color or image to a button. Adding a background using the theme button design menu changes the background of all buttons. Adding the background to an individual button will change the background for that single button.

To add a background to a specific button, on the design editor, click the Style tab, and then scroll to the background section.

For information about design options that are not specific to this widget (for example, layout, style, or spacing), see Widget Design.

Add Button Icons

Choose from our font-icon collection to decorate your buttons. Icons make it easier for visitors to identify buttons without needing to read their labels. Icons can be colored and combined with text to make unique buttons that will attract visitors' attention.