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.
Following is how you can add widgets:
To add widgets from the widget library:
-
-
To find a widget, use the search bar or select a category to quickly navigate to the desired widget.
-
Both account and site custom widgets are located in the Custom category of the Widget panel.
-
-
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 :
-
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.
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 .
-
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 for Classic, 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.
-
Click the plus + icon in the floating menu.
-
If you are right clicking a column, click Add and select Add widget below.
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.
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.
The following are common design settings.
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 :
-
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 the 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.
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.
-
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.
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
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:
-
Navigate to the Animation section.
-
Select a Trigger and Animation.
-
(Optional) Customize the animation. For example, the direction it enters from.
Example animation set up:
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.
Note
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.
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.
Use AI to quickly build custom site widgets without leaving the editor. Note that site widgets are specific to the site where they are created and cannot be used across other sites in your account. All custom site widgets you create are stored in the Widget panel under the Custom category for easy access.
To build a custom site widget in the editor:
-
At the bottom of the Widget panel, locate the AI text box. Enter a prompt or click Ideas to try to browse a library of pre made prompts. When writing a prompt, you can use the @ symbol to reference a specific collection. Our AI can retrieve your site’s collections and their structure, enabling it to create widgets that display their content.
-
After entering your prompt, a new window opens on the right side of the screen. Depending on the complexity of the request, it can take AI a few moments to generate your widget. When the widget is built, click Take me there.
-
From the Custom section of the Widget panel, drag and drop the widget onto the canvas.
-
(Optional) If you need to make edits to the widget, click the three dot icon on the site custom widget’s card and select one of the following:
-
Edit with Copilot
-
Edit Name and Icon
-
Manage in Workspace
-
Archive
-
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.
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.
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.
Warning
We do not recommend copying and pasting contact forms, as this typically results in issues in the duplicated contact form.
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.
Right click the widget, click Hide on Device, select a device. If an eye icon is present in the side panel, this indicates there are hidden elements on the device you are currently editing. To view the hidden elements, click the eye icon.