Customizing pages using widgets

In the Pages application, view the Home page on the Design tab. The Left zone and Right zone zones have the (Editor) prefix before their name.

Widget zones on the Home page

This identifies zones that contain widgets rather than web parts. Widgets are components placed into page template zones just like web parts, but they provide the option of page customization for various kinds of website users, not just administrators and designers. The two widget zones on the Home page are configured to allow customization by page editors. You can manage the content of the zones when editing pages on the Page tab of the Pages application.

Switch over to the Page tab, click the menu icon () in the corner of one of the widget zones and then click Add new widget in the menu.

The Select widget dialog opens. The dialog is similar to the web part selection dialog, but with less items available. This is because every widget is based on an existing web part. Select the Content -> Latest blog posts widget and click Select.

Selecting a widget

Enter the following values into the widget’s properties:

  • Widget container: Black box
  • Widget container title: Latest blog posts

Leave the remaining properties in their default state and click Save & Close.

The widget appears on the page, but is NOT permanently saved yet. When working with widgets on the Page tab, you need to click Save again on the page itself to confirm changes.

After you save the page, switch to Preview mode using the main toolbar to view the modified design of the home page. As you can see, content editors can alter pages with widget zones.

Widget displaying blog posts on the website

Now we will try out a different type of widget zone. Switch back to Edit mode and the Design tab. Expand the menu () of the Right zone and click Configure in the menu.

Set the Widget zone type property to User personalization and click Save & Close. The zone is now editable by registered users directly on the live site.

Note: The system removes the content of a zone when you change the zone type.

View the live site (click the Kentico logo on the header to open the application list and click Live site). On the Home page, hover over the location of the right zone and click Add new widget.

Adding a user widget on the live site

Select the Content -> Latest news widget and click Select. In the properties dialog, leave the default values and click Save & Close. Changes made to widgets in user zones apply immediately — users on the live site do not need to save the page manually.

Latest news widget displaying content on the live site

The content of user widget zones does not affect the global appearance of the page. Each user can only see their own personalized version of the user zones on pages. Log off the website and log in as a different user (enter the username Andy with a blank password). View the home page on the live site, and you can see that the zone is displaying the default content (empty in this case). The widget previously added under the administrator account is not visible. Every user can choose their own content for the zone from the available selection of widgets.

Log off and sign back in as the global administrator (username administrator).

Managing widgets on the Design tab

You can add and configure widgets of all types directly on the Design tab of the Pages application. This sets the default content of widget zones for the template. The content displayed on pages does NOT match the default content once users make changes to the widget zones.