Adding page content through widgets

Widgets are page components that display content or provide some type of functionality. By adding widgets, you can create advanced web content on your pages. Widgets give you much more power and flexibility than editing text and images.

For example, widgets allow you to:

• Add forms
• Display dynamic lists of the website’s content
• Change the layout of a page’s content

Kentico contains a set of widgets by default. The developers of your website can also prepare additional widgets with any required functionality.

Managing content in editor widget zones

You can add widgets on pages where the website’s developers have prepared editor widget zones. The developers determine the following for each page:

• The number of widget zones on the page
• The position and size of individual zones
• The default widget content in the zones

To work with the content of widget zones, edit pages on the Page tab of the Pages application. Here you can see editor widget zones surrounded by dotted outlines.

Adding widgets

To add a widget to a zone:

1. Open the zone’s menu ().

2. Click Add new widget.

3. Select a widget from the catalog (you can only choose widgets that are allowed for editor zones).

4. Click Select.

   • The widget configuration dialog opens (some widgets skip the initial property configuration dialog).

5. Set the properties of the widget.

6. Click OK.

   • The widget appears within the content of the page (inside the selected zone), but is NOT permanently saved yet.

7. Click Save to confirm the change to the page’s widget content.

Configuring widgets

To edit the properties of existing widgets on the page:

1. Hover over the widget.
2. Expand the widget’s menu ().
3. Click Configure.
   
4. Set the widget’s properties. To learn more about specific widget properties, hover over the field captions and read the tooltips.
5. Click OK.
6. Save the page.

Moving widgets

To move a widget between zones on the page or to a different position in the same zone:

1. Hover over the widget.
2. Move the mouse over the Drag widget () icon.
3. Drag the widget to the desired location.
4. Save the page.

Copying widgets

Copying allows you to duplicate editor widgets and paste them into any editor zone, including other pages on the same website.

You can copy:

• Individual widgets - hover over the widget, expand the widget’s menu (), click Copy
• All widgets in a zone - open the zone menu (), click Copy all

The system saves the widgets and their configuration into an internal “clipboard”. To paste the copied widgets:

1. Navigate to the target editor widget zone:

2. Place the copied widgets:

   • at the end of the zone - open the zone’s menu (), click Paste
   • directly below a specific widget - hover over the widget, expand the widget’s menu (), click Paste

3. Save the page.

You can paste the widgets any number of times. Copying different widgets overwrites the clipboard content. Every user in the system has their own separate clipboard.

Deleting widgets

To remove a widget from the page:

1. Hover over the widget.
2. Expand the widget’s menu ().
3. Click Remove.

You can also remove all widgets in a zone:

1. Open the zone menu ().
2. Click Remove all widgets.

In both cases, you need to Save the page to confirm the deletion.

Returning to the page’s default widget content

If the page contains the Widget actions web part, you can reset all widget zones on the page to their default content. The position of the widget actions depends on the design of individual pages. Possible locations are:

• Directly within the page content (only visible on the Page tab)
• In the header of the Page tab

Managing editor widgets directly on the site

You can work with editor widgets through the on-site editing interface:

1. Log in on the live website.
2. Click Edit page in the top left corner of the page.
3. Navigate to the page where you want to edit widgets.
4. Make the required changes to the page’s widgets. The widget editing interface works the same way as on the Page tab of the Pages application.
5. Click Save on the on-site editing toolbar.

Adding inline widgets into text

You can insert inline widgets directly when editing thetext sections of pages:

• Editable text regions on the Page tab
• Text area page fields on the Form tab

To add an inline widget into text:

1. Click Insert/Edit widget on the editor toolbar above the text area.

   

2. Select a widget from the catalog (you can only choose widgets that are allowed for inline use).

3. Click OK.

4. Set the properties of the widget (some widgets skip the initial property configuration dialog).

5. Click OK.

6. Save the text field’s content.

Configuring inline widgets

You can use three different ways to open the properties dialog for existing inline widgets:

• Double-click the widget placeholder image in the text

• Right-click the placeholder image and select Properties

• Select the placeholder image in the text and click Insert/Edit widget on the editor toolbar