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:
-
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.
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.
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 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.
-
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 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 :
-
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 ( 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.
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.
To remove animations:
- 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.
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.
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 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 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.
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.
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.
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.
Comments
0 comments
Article is closed for comments.