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:
-
-
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 :
-
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 .
-
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.
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.