Button Widget

Modified on Fri, 18 Nov 2022 at 06:09 AM

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.
    • 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.
    • Store link. Prompt the visitor's device to open the store login, shopping cart or product page.
    • 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

To access the design editor, right-click the widget, and click Edit Design.

Use the design editor to choose between the different button layouts, make edits to the button style (width, height) and button text (font, text size), and adjust the inner and outer spacing. You can also make edits to button design by using the global button design menu.

Floating Buttons

To make a button visible at all times, even when a visitor scrolls down the page, click the Floating toggle. For more information, see Floating Buttons.

Add a Button Background

You can add a background color or image to a button. Adding a background using the global 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 or navigation menu. 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.

Note

Only some button or navigation layouts support icons. Try various button styles to achieve your desired look.

To select icons for your buttons:

  1. Right-click the button widget, and click Edit Design.
  2. In the Layout section, click the button to open the Select Layout menu and select a layout style that supports an icon.
  3. Scroll down to the Style section. Ensure the Show Icon option is enabled.
  4. Click Choose to open the Icon Picker.
  5. Click an icon to add it to your button or navigation. To more easily find an icon, type a subject or name in the search field, or use the drop-down.

For more information about adding widgets and widget design, see Add Widgets and Widget Design.

Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select atleast one of the reasons

Feedback sent

We appreciate your effort and will try to fix the article