By incorporating various types of widgets, you can create a dynamic and engaging user experience.
Widget Library
The widget library is where all the widgets can be found. They are broken down into categories. There is also a search function at the top.
To access the widget library, in the side panel, click Widgets.
Add Widgets
There are several methods to add widgets. It also varies whether you are using Classic Editor, flex mode, or Editor 2.0. Following is how you can add widgets:
Add Widgets from the Widget Library
To add widgets from the widget library:
In the side panel, click Widgets to open the widget library.
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.
When dragging-and-dropping a widget to your site, note the text in the blue placement indicator (Classic editor only):
Insert here. The widget will be added to an existing row or column.
Insert in new row. A new row will be added and the widget will be placed inside of it.
Insert in new column. A new column will be added and the widget will be placed inside of it.
Note
With Editor 2.0, widgets can only be added to existing columns, new ones are not able to be created with the placement of a widget.
Add Widgets from the Canvas
To add widgets from the canvas:
Right-click any widget and select Add widget below in the context menu to add widgets immediately below the current widget (Classic editor only).
In Flex mode or Editor 2.0, click the plus (+) icon in the floating menu.
If you are right-clicking on a column, click Add, and select Add widget below
(Relevant forClassic, Flex mode, and Editor 2.0)
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.
Edit Widget: Content and Design
You can customize widgets to adjust the content, appearance, and layout of your site. Editing widgets allows you greater control over what features your site has and how these features behave.
Most widgets have an area for its content as well as its design.
Content Area
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.
To access the content editor, right click the widget and select Edit Content. Or, if you are in flex mode or Editor 2.0, the option to access the content editor is available in the floating menu.
Edit Design
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, others do not let you change outer spacing.
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.
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.
In Editor 2.0, 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 down to 85%, and on mobile the text size is reduced down 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.
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 tab (Classic editor):
Example layout section in the design panel (Editor 2.0/Flex):
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 orcolor 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 the corners on a widget. Click the gear icon () for more options.
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 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.
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).
For detailed information, see Outer and Inner Spacing
Animation
Entrance animations let you animate widgets and page widgets when they are first loaded on your site. Motion and interactivity makes 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.
To add an animation:
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.
Navigate to the Animation section.
Select a Trigger ( Entrance or Scroll) and an Animation.
(Optional) Customize the animation (for example, the direction it will enter from).
Example animation setup:
To reset the animation, click Reset to default.
If you use a scroll animation, you can click Pause Animation in the side panel to pause all animations while you are in editing mode. The animations will still be active in preview mode and on the live site
Note
Animations set for Desktop and Tablet are linked and will be the same. However, Mobile is separate, and animations configured for Desktop/Tablet will not apply to them.
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:
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.
Navigate to the Animation section.
Click into the Animation drop down menu and select None.
Note
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.
Widget Position: Fixed and Pinned (Editor 2.0)
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 (Editor 2.0)
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 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, 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 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 (Editor 2.0)
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.
Note
Pinned is not an option in advanced grids.
To pin a widget:
In the side panel, 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, however 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 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 pinned widget to a different parent element (column or inner column), the design panel settings, like offset, will be retained.
Alignment(Classic Editor)
Note
This information is specific to the Classic Editor, and not relevant for Editor 2.0 (formerly known as the All-Flex Editor.) To identify your current editor version, see How to Identify the Editor Version Your Site Uses.
Set whether the widget is aligned to the left, right, or center of its area.
Some widgets behave very differently in different views. Check the way your widget displays in each view after adding it to make sure it displays correctly.
To set the alignment, right-click the widget, and click an Align Left, Align Center, or Align Right icon.
For alignment options in Flex mode or Editor 2.0, see Design with Flex.
Select Container
Selects the container the widget is in, allowing you to easily find and edit it.
Classic Editor:Right-click the widget, click Select Container, and select Column or Row.
Editor 2.0: Right-click the widget, click Select Layer and select the desired container.
Copy and Paste
A widget can be copied and pasted to another location. The paste option only appears if you have a widget that has been copied.
Right-click the widget, and click Copy or Paste.
Alternatively, in Editor 2.0, click the Duplicate icon in the floating menu.
Warning
We do not recommend copying and pasting contact forms, as this typically results in issues in the duplicated contact form.
Hide on Device
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.
In Classic Editor, Right-click the widget, click Hide On Device, select a device (in Editor 2.0, elements can only be hidden on devices currently being edited).
Alternatively, in Editor 2.0, elements can be hidden in the layers panel. In the side panel, click Layers, hover over the desired element, and click the Eye icon.
If an Eye icon is present in the side panel, this indicates there are hidden elements on the device you are currently editing (Classic editor only). To view the hidden elements, click on the Eye icon.
In Editor 2.0, if there are any hidden elements on the device you are currently editing, it will be indicated in the layers panel. In the side panel, click Layers. Hidden elements will appear deactivated with a Crossed Out Eye icon next to it.
Note
Hidden content may still show in the code of the live site (after publishing/republishing). This is expected and due to the technology used.
Edit Widget HTML/CSS
Allows you to make changes to the widget's HTML or CSS. We only recommend this option if you are comfortable with these languages.
Right-click the widget, and then click Edit HTML/CSS.
Set Widget as Anchor
Anchor links let you send visitors to a specific section of the page, making it easier for them to get from place to place on a longer page or to a specific section that you want to reference.
Right-click the widget, and click Set As Anchor.
For more information about anchors, see Canvas Actions and Options.
Delete Widget
To delete a widget, removing it from all devices, right-click the widget, and click Delete.
Widget FAQs and Troubleshooting
What is the Difference Between Apps and Custom Widgets?
While there can be differences based on what an app or custom widget is trying to accomplish, widgets built with our widget builder are not necessarily better than widgets built by our App Partners.
Apps also must meet strict standards and undergo a rigorous QA process by the Book Like A Boss team.
For a more detailed answer, see the FAQ section in the App Store Overview article.
I would like more information on custom widgets
Please see the following resources for custom widgets and the widget builder:
Building Custom Widgets: A Book Like A Boss University Course
Introduction to Book Like A Boss Widget Builder: Developer Documentation
Note
If you are looking for a custom widget, but need a developer, a Book Like A Boss Expert may be able to assist. For more information the Experts program, see Book Like A Boss experts. To browse the experts, visit
Book Like A Boss support cannot troubleshoot custom widgets.