The information in this article is relevant only for Pro users at this time. For information about booking websites for Lite users, refer to the Guesty Booking Engine
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.
For information on adding widgets, see Add widgets.
Tip:
For more information on widgets and the widgets library, see Widgets: Library and overview.Content editor
- 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.
Design editor
To access the design editor, right-click the element, and click Edit Design. Or if you are in flex mode, 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.
For more information on theme buttons, see Site buttons.
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
-
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. 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. 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. 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.