Learn how the widget library works in Booking Website Pro and how to find, add, and use widgets to build your website.
Widgets are the key building blocks of a site, allowing you to add and manage content effectively. They serve as essential elements that enhance both the functionality and design of your website. By incorporating various types of widgets, you can create a dynamic and engaging user experience.
Add Widgets
To add widgets from the widget library:
- In the side panel, click Add, then click Widgets.
- Widgets can be searched for using the search bar at the top or by scrolling through the different sections in the library.
- Click and drag the widget to the location you want in the site. A blue placement indicator appears.
- The widget appears in the location shown by the blue placement indicator.
Widgets can only be added to existing columns; new ones cannot be created with the placement of a widget.
Add Widgets from the Canvas
To add widgets from the canvas:
- Click the plus (+) icon in the floating menu.
- If you are right-clicking on a column, click Add, and select Add widget below
- Select from the four most popular widgets or click More widgets to open the full menu. After adding the widget, you can edit it as usual.
- Click the plus + icon in the floating menu.
- If you are right-clicking a column, click Add and select Add widget below.
The Media Panel allows you to easily drag and drop media (images, videos, and icons) onto the canvas and add a widget all at the same time. For example, if you add an image from the Media Panel to the canvas, an image widget is automatically added.
To add an image, icon, or video widget from the Media Panel:
- In the side panel, click Add, then click Media.
- (Optional) Use the filters to help locate the desired media. Or, click Upload Media to add new media.
- Click and drag the desired media onto the canvas. Note that images cannot be placed in the Store Catalog or Product Gallery widgets, nor in widgets connected to dynamic pages.
Edit Widget: Content and Design
You can customize widgets to adjust the content, appearance, and layout of your site. Editing widgets gives you greater control over which features your site has and how they behave.
Most widgets have an area for both their content and their design.
The content area is where a widget's content is typically configured. The available sections and options in the content area vary depending on the widget. For example, some widgets allow you to add a link, while others do not.
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.
Most widgets in the editor have design options that enable you to customize the widget's appearance for your site. Not all widgets have the same options. For example, some widgets do not allow you to edit inner spacing, and others do not let you change outer spacing.
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.
The following are common design settings.
Text Styles
For widgets with text, you can edit the text styles. Any changes you make for a specific widget will override the Theme Text style.
Text size set in specific widgets (Text editor, Contact form, Navigation, Business, Click to Email, Click to Call, and Button widgets) will automatically adjust based on screen size. On desktop, the text size is 100%, on tablet, the text size is reduced to 85%, and on mobile, the text size is reduced to 80%. However, by default, the editor will not adjust the text to be smaller than 16 px on mobile or tablet. And it will not adjust to larger than 60 px on tablet or 40 px on mobile. This is to ensure the text is still readable and in proportion to each screen size.
If you need to override the text size per device, you can adjust the text size in the Theme Text, and the text will not be reduced per screen size.
The following are examples of how the text size will adjust in different scenarios:
- If you set the text size to 40 px on desktop, the text will automatically be reduced to 34 px on tablet and 32 px on mobile.
- If you set the text size to 16 px on desktop, it will not reduce by 85% to 13px on tablet, or 80% to 12 px on mobile, since that is too small to read and below the 16 px minimum. Instead, the text size will stay the same at 16 px on all screen sizes.
- If you set the text size to 100 px on desktop, it will adjust to 60 px on tablet since that is the maximum, instead of 85 px, which would be 85% of the desktop text size. The mobile text size will also adjust to 40 px since that is the maximum, instead of 80px, which would be 80% of the desktop text size.
Layout
Layout options are usually specific to certain widgets. To select from the set of layout options available for that widget, click the layout that appears in the Design Editor (or click the small arrow beside it) to open the Select Layout menu. To change the selected layout, click the layout you want to use instead, and it will be updated in the widget.
Example layout section in the design panel
Style
- Color. Click the round color icon to the right of the setting name to open the color picker and change the color.
-
Border. Change the width of the border using the slider or text box. Click the gear icon (
) for more options.
- Background. Use a background image or color for this widget using the Choose and Place Images dialog or a video URL.
- Width and Height. Use the slider or text box to change the number of pixels.
-
Rounded Corners. Increase or decrease the rounded corners on a widget. Click the gear icon (
- Shadows. Toggle on or off a shadow for this widget.
- Text. Set various aspects of the text, such as font family, font weight, etc.
Buttons
Widgets that incorporate a button will offer the ability 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), 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.
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.
Spacing
Change the inner spacing (spacing inside the widget edges) and outer spacing (spacing outside the widget edges). Each number in the outer box sets the outer spacing for its own side (top, bottom, left, or right), and each number in the inner box sets the inner spacing for its own side (top, bottom, left, or right).
Animation
Entrance animations let you animate widgets and page widgets when they are first loaded on your site. Motion and interactivity make your site more memorable and can emphasize the sections you want visitors to focus on, like a phone number or a contact button.
Additionally, you can control where the animation starts and ends on the screen by using the Scroll settings.
Following is a list of available triggers and animations:
-
Animations for Hover trigger
- Grow
- Shrink
- Move top
- Move bottom
- Move right
- Move left
- Rotate
- Opacity
- Grayscale
- Shadow
-
Animations for Scroll trigger
- Fade
- Slide
- Bounce
- Roll
- Rotate
- Zoom
- Flip
-
Animations for Entrance trigger:
- Fade in
- Slide in
- Bounce in
- Rotate in
- Roll in
- Zoom in
- Flip in
- Flash
- Pulse
- Rubber band
- Shake
- Swing
- Tada
- Wobble
Add Animation
To add an animation:
- 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.
- Navigate to the Animation section.
- Select a Trigger and Animation.
- (Optional) Customize the animation. For example, the direction it enters from.
Example animation setup:
To reset the animation, click Reset to Default.
If you are using the Scroll animation, you can click Pause Animation in the side panel to pause all animations while you are working in the editor. The animation will remain on the live site and in preview mode.
Animations set for Desktop or Tablet screen sizes are linked and will be the same. However, mobile is separate, and animations configured for Desktop and Tablet will not be applied.
Animation Considerations
When adding animations, keep in mind the following:
- Too many animations can disorient or distract users, so use them sparingly.
- When removing an animation, remember that animations can be applied to rows as well as widgets, so the animation you are seeing might have been added somewhere unexpected.
Remove Animations
To remove animations:
- 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.
- Navigate to the Animation section.
- Click into the Animation drop-down menu and select None.
If an element does not have an animation, it could be applied to one of the containers the element is in. It's recommended to check all containers for any possible animations.
Fixed widgets allow you to keep a widget visible at all times, even when a visitor scrolls down the page, while pinned widgets stick to their parent element (column or inner column) for as long as the parent element is in the viewport.
Widgets can be set as fixed or pinned in the Position section of the Design Panel.
Fixed widgets allow you to keep a widget visible at all times, even when a visitor scrolls down the page. Use fixed widgets to keep important calls to action fixed, visible, and clickable on all site pages.
To make a widget fixed:
- In the side panel, click Add, then click Widgets.
- Search for the desired widget, then click and drag it onto the canvas.
- Click the widget 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.
- Click to expand the Position type menu and select Fixed. 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 widget 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 widget in. If you need to switch, you need to switch back to Default first. The widget will be moved to the first section in the viewport.
- In the Spacing menu, use the Margin settings to define where the widget is located in the viewport. This is especially important to configure if you have two fixed widgets in the same viewport position.
- To display the widget on the current page only, enable the Show on this page only toggle.
Pinned widgets 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 widget in the same position, the widget on top will be the first widget.
Pinned is not an option in advanced grids.
To pin a widget:
- In the side panel, click Add, then click Widgets.
- Search for the desired widget, then click and drag it onto the canvas.
- Click the widget 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 widget 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 widget’s offset. The offset is where the widget will be pinned on scroll before leaving the viewport. If set from a 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 pinned widget to a different parent element (column or inner column), the design panel settings, like offset, will be retained.
Select Container
Selects the container the widget is in, allowing you to easily find and edit it.
Right-click the widget, click Select Layer, and select the desired container.
Use the hide on device feature to change your content depending on the device your visitor uses to access your website. For example, show a click-to-call widget for mobile users or a contact form for desktop users.
Widgets hidden by the Hide On Device feature are not deleted.
Elements can only be hidden on devices currently being edited.
To hide an element: in the side panel, click Layers, hover over the desired element, and click the Eye icon. If there are hidden elements on the device you are currently editing, it will be indicated in the layers panel with a crossed-out eye icon.
Hidden content may still show in the code of the live site (after publishing/republishing). This is expected and due to the technology used.