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.
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:
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.
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
(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.
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.
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 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):
-
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 (
-
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 diretion 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 in Classic Editor:
Note
If an element doesn't 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.
Note
This information is specific to the 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.
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. For more information about Design Panel sections, see Design with Flex.
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.
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 Editor 2.0, see Align.
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.
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, in classic editor, select a device (in Editor 2.0, element can only be hidden on device 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. For detailed information see Site Performance and Optimization.
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. For more information about anchors, see Anchor Tags and Links.
Right-click the widget, and click Set As Anchor.
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 Duda team.
For a more detailed answer, see the FAQ section in the App Store Overview article.
Please see the following resources for custom widgets and the widget builder:
Note
If you are looking for a custom widget, but need a developer, a Duda Expert may be able to assist. For more information the Experts program, see Duda Experts. To browse the experts, visit experts.duda.co.