Customize widgets to control your site's content, appearance, and layout. Edit widgets to adjust your site's features and how they behave.
Content or design
Follow the instructions below to edit the content or design of a widget. The available options depend on the specific widget.
Configure a widget's content in the content editor.
To access the content editor, click the widget and select the Content tab.
In flex mode, select the Content tab from the floating menu.
Configure a widget's style in the design editor.
To access the content editor, click the widget and select the Design tab.
In flex mode, select the Design tab from the floating menu.
-
Text styles: Edit text styles for widgets with text. Adjust text size for individual devices as needed.
- Custom changes override the theme text style. For example, if you set desktop text to 40 px, and the size automatically adjusts to 34 px on tablets and 32 px on mobile.
- Device limits apply: Text won't shrink below 16 px minimum or exceed tablet/mobile maximums.
- Layout: Choose from layout options specific to the widget. In the design editor, click the displayed layout or the arrow beside it to open the Select Layout menu, then select your preferred layout.
-
Style: Depending on the widget, use the following styling options:
- Color: Use the color picker to select any color.
- Border: Adjust the border width with the slider or enter a value. Click the gear icon for additional options.
- Background: Set a background image, color, or video URL.
- Width and height: Use the slider or enter pixel values.
- Rounded corners: Adjust corner roundness with the slider. Click the gear icon for more options.
- Shadows: Toggle on or off Shadow effect.
- Text: Set font family, weight, and other text properties.
-
Buttons: Pick primary or secondary button styles from the theme. You can edit button layout, style, size, font, and spacing.
- Custom design settings override theme-level styles.
- If a button's style is changed, an indicator appears on the chosen style. Click the other style to reset to the theme default.
- To revert custom design settings, click Reset to theme style.
- Custom design settings override theme-level styles.
- Spacing: Adjust outer and inner spacing for each side of the widget: top, bottom, left, and right.
- Animation: Use motion to highlight important site areas, such as a contact button, by adding entrance or scroll-triggered animations for widgets and sections. Learn more about adding animations.
Alignment
Right-click the widget, and under "Edit design", select from options the Align Left, Align Center, or Align Right
.
Select container
To manage the row or column that contains a widget, right-click the widget and click Select container.
Copy and paste
Copy a widget and paste it elsewhere in your site.
Right-click the widget and click Copy. Right-click the relevant location and click Paste.
If you click Paste before copying the widget, the widget is duplicated. Select and drag the widget if you want to relocate it elsewhere on the page.
Important:
Don't copy and paste contact forms. Duplicated forms may cause errors or issues.
Hide on device
Show or hide widgets according to the visitor's device. For example, display a click-to-call widget on mobile and a contact form on desktop. Hidden widgets are not deleted.
Right-click the widget, click Hide from, and select the relevant option.
An
present in the bottom left side panel indicates there are hidden elements on the device you are currently editing. To view the hidden elements, click
.
Note:
Hidden content may still show in the code of the live site after publishing or republishing. This is expected behaviour.
Edit a widget's HTML or CSS
Right-click the widget and click Edit HTML/CSS to edit a widget’s HTML or CSS for advanced customizations. Only use this option if you are familiar with these languages.
Set a widget as an anchor
Use an anchor to send visitors to a specific section of your page. Anchors help users navigate long or complex pages easily.
Right-click the widget and click Set As Anchor.
Learn more about anchor tags and links.
Delete a widget
Remove widgets completely from your site and all devices.
Right-click the widget and click Delete.) icon.