Using widgets in MVC

You can use the page builder to easily create and manage content on MVC sites, directly in the Kentico administration interface. The page builder is a user-friendly UI feature which allows non-technical users to build pages on MVC sites using configurable widgets prepared by the developers.

Adding content through widgets using the page builder

The page builder is available in the Pages application on the Page tab of pages with content-only page types.

Prerequisite

A developer needs to set up the page builder feature and prepare pages with editable areas, before you can create and manage content on an MVC site.

Workflow and versioning

The content of widgets and sections is included within the scope of workflow:

  • Editing of widgets is restricted by the rules of the defined workflow steps
  • Content changes do not appear on the live site until the page is published (after going through the workflow approval process)
  • The system tracks saved widget changes as part of page versioning

The usual workflow would be as follows:

  1. In the Pages application, open a page where the page builder is set up.
  2. Adjust sections to achieve your desired visual layout of the page.
  3. Add widgets to the page to define the content.

Working with sections

On a page where the page builder is set up, you can do the following actions with sections. UI elements that allow you to modify sections are gray:

  • Add sections – Click a gray plus button located on the left side of an editable area to insert a new section. The list of available sections depends on the implementation of your website.
  • Move sections – Hover over a section and drag it by the drag handle.
  • Delete sections – Hover over the section you want to remove and click the delete button in the upper right corner of the section.
  • Change section type – You can change the type of a section to adjust the arrangement of a page. To do so, hover over the section you want to modify, click the section type button, and select the section type you want to use.

Section management UI elements

Each section defines one or more zones, where you can add widgets.

After making any changes on the page, do not forget to click the Save button. Changes made to the sections can be previewed in the Preview mode.

Working with widgets

On a page where the page builder is set up, you can do the following actions with widgets. UI elements that allow you to modify widgets are blue:

  • Add widgets – Click a blue plus button to insert a widget to the desired location. The list of available widgets depends on the implementation of your website.
  • Move widgets – Click on a widget and drag it by its handle or full header to a different position.
  • Personalize widgets – See Personalizing widgets in MVC.
  • Configure widgets (only displayed for configurable widgets) – Click the configure button, edit the widget properties in the configuration dialog and click Apply.
  • Delete widgets – Click on a widget you want to remove and click the delete button in the upper right corner of the widget.

Wdiget management UI elements

Configuring widgets

Widget configuration options and property editors are implemented individually with each widget. For more information, visit your project's documentation or contact your developer.

After making any changes on the page, do not forget to click the Save button. Changes made to the widgets can be previewed in the Preview mode.


Was this page helpful?