Add widgets on pages and templates

You add widgets the editing mode of pages and templates.

1. To edit the content of a page, on Pages page, perform one of the following:
   • Click the page or the template that you want to edit.
   • Click the Actions link of a page or template, and then choose Content.

   The page opens in editing mode.

2. Click Content at the top of the right panel.
   The list of widget groups is displayed.
3. Expand a widget group, choose a widget, and then drag it on the place you want it on the page.

   NOTE: You can drag a widget both inside a Design a layout template and outside it. Select a widget and drag it to the desired place. The system shows you where you can drop the widget.

Once you have added widget on your page, you need to configure it to display the appropriate content.

1. Click Edit in the upper-right corner of the widget.
   The widget editor for the selected widget opens in Simple mode showing the current configuration of this widget, and allowing you to make changes.  
2. You can click Advanced in the lower-right of the editor to present the full set of configurable parameters for this widget. See Advanced configuration of widgets for details.

NOTE: Some widgets only have a Simple mode.  Conversely, there are widgets that do not have Simple mode so their Advanced mode displays by default.

There are other actions you can take on a widget on a page by clicking More in the upper-right corner of the widget:

• To remove the widget from the page, click Delete.
  The system removes the widget without confirmation.
• To 'clone' the widget onto the page, click Duplicate.
  The system adds the same widget, under the existing one, and duplicates its configuration.
• To set permissions for the particular widget, click Permissions and perform procedure Administration: Global and section permissions » Step 2 to Step 4.

NOTE: When you add widgets in a page template, they cannot be edited in the pages that use the template. If you want to be able to edit widgets, added in the template, from a page that uses the template, you must branch the widgets. To do this, when you add a widget in a template, in the upper-right corner of the widget, click More » Make editable on pages.

To facilitate the configuration of widgets, you can copy the properties from the advanced settings of one widget and paste them directly in the advanced settings of another widget. 

You can also create templates for advanced settings that you can use to configure the properties of widgets. The templates can be created by copying the configured properties of a widget and pasting them in a text editor of your choice. You can also create your own templates using the JSON data string syntax.

PREREQUISITES: You must use the New user interface of Sitefinity CMS and Google Chrome browser. 

Supported widgets

• Content block widget
• MVC custom widgets that use the New user interface

  NOTE: If your custom widget has a custom widget designer, you cannot use this functionality.

Procedure

1. In Sitefinity CMS backend, navigate to Pages and click the name of the page that contains the widget you want to copy properties from.
   Alternatively, you can click the Actions context menu of the respective page and then click Content.
2. Click the Edit button of the widget that has the properties you want to copy.
3. In the top-right corner of the page, click the Advanced settings button.
   The Advanced settings page for the selected widget appears.
4. Press CTRL+ALT+C to copy the properties to the clipboard.
5. To paste the properties in the advanced settings editor of the widget you want to configure, press CTRL+ALT+V.
   To create a template, paste them in a text editor of your choice 

NOTE: You can also paste custom values in the editor. For example, if you have the properties CustomerNamer and CustomerAge you can change them by pasting with CTRL+ALT+V a line with the following syntax: {"CustomerName":"MyName","CustomerAge":"25"}. 

When you add widgets in a page template, they cannot be edited in the pages that use the template. For example, if you add the Image widget in a template and configure the widget to display a certain image, this image is visible in all pages that use the template. You cannot change the image from a certain page, you can only change the image from the template. The change is applied to all pages that use the template. 

If you want to be able to edit widgets, added in the template, from a page that uses the template, you must branch the widgets. When a widget in a template is branched, you can edit the widget inside a page that uses the template. The widget inherits its configuration and contents from the template. Once you edit a branched widget inside a page, you break the inheritance.

EXAMPLE: You place the Image widget inside a template and configure it to display Picture X. You apply the template to Page A and Page B. Picture X is displayed on both pages. When you branch the widget in the template, it becomes editable in the pages. If you open Page A and replace Picture X with Picture Y, you break the inheritance from the template and Page A. Now, Page A displays Picture Y, Page B – the same as the template – Picture X. If you change the image inside the template and replace Picture X with Picture Z, the change is applied only to pages, where the widget has never been edited – in this case, Page B. 

To branch a widget, perform the following:

1. Open the template whose widget you want to branch.
2. In the upper-right corner of the widget, click More » Make editable on pages.
   The system displays EDITABLE ON PAGES banner in the toolbar of the widget.

   NOTE: If you edit a branched widget from a page, in the toolbar of the widget, the View where this widget was edited link appears. You can use it to see a list of pages where the widget has been edited. These pages no longer inherit the content of the widget from the template.

3. If you want to prevent a widget from being editable in pages, open the template and in the upper-right corner of the widget, click More » Make non-editable on pages.
   Regardless of whether the widget has been edited on pages or not, it becomes non-editable everywhere.