Learn how to use button and spacer widgets in Booking Website Pro to create calls to action, improve layout spacing, and guide visitors through your site.
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 pop-up, contact form, online reservation, email address, and more.
For more information on widgets and the widgets library, see Widgets: Library and Overview.
To access the content editor, the option to access the content editor is available in the floating menu. Click the element to open the floating menu, then click the option for the 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.
- 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.
To access the design editor, select Edit Design from the floating menu to open the design panel. Click the element to open the floating menu, then click the option to edit design.
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 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.
- 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.
Fixed 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 use cases include:
- Contact Us
- Subscribe
- Get a Quote
To make a button fixed:
- In the side panel, click Add, then 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. Scroll down to the Position section.
- 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; 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.
- 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.
A fixed 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.
Pinned is not an option in advanced grids.
To enable a pinned button:
- In the side panel, click Add, then 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; 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 the desktop, other screen sizes will have the same values; 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 an 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.
Spacer
Widget Categories: Basic
Visually breaking up your content makes it easier to read and improves the overall look of your site. The Spacer widget allows you to quickly add vertical blank space between paragraphs, images, or other widgets. Spread out your information and content to create a professional web page.
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. Click the element to open the floating menu, then click the option to edit design.