To allow website admins to use Xperience widgets, your pages (their views) need to have the Page Builder registered and must contain areas for widgets.

See how editable areas are implemented in the Dancing Goat .NET Core sample project in the Home’s Index.cshtml and HomeController.cs files.

Editors use sections to define the layout of the widget zones where they insert their widgets. Editors can lay out widget zones in editable areas within pages—or use them to build entire pages.

See how the sections feature is implemented in the Dancing Goat Core sample project in the _DancingGoat_SingleColumnSection.cshtml file.

Widgets are predefined, configurable, and reusable pieces of content editors use to manage content in the Page Builder. They are represented by partial views or view components.

See two approaches to coding the Page Builder widgets as well as various widget samples in the Dancing Goat Core project, e.g., a simple Testimonial widget in the TestimonialWidget.cshtml file registered through PageBuilderComponentRegister.cs, or a more complex _HeroImageWidget.cshtml view with a dedicated HeroImageWidgetViewComponents.cs class.

Editors on Xperience websites use Form Builder to create online forms. Learn more about the feature and how you can create custom form components in the Xperience documentation.

Check out how Form Builder is implemented in the Dancing Goat Core site:

The Contacts page shows how to display the Contacts form. The page is implemented in the Index.cshtml file and the ContactsController.cs file. The custom form component is in the ContactGroupSelector.cshtml / ContactGroupSelectorComponent.cs file.

Want to learn more about building widgets and sections using View Components? Then, don’t miss this short article on what view components are and how you can use them to create your Page Builder components.

Xperience Core supports using the new ASP.NET Core Tag Helpers feature, which abstracts server-side code behind the HTML-like elements. Check out how the CultureLinkTagHelper.cs class in Dancing Goat Core project helps create culture-specific links in _Layout.cshmtl view.

With page templates, editors can create pages with a different layout without developers.

See how the templates are implemented in the _Article.cshtml with the ArticlePageTemplateService.cs and the _ArticleWithSidebar.cshtml and ArticleWithSidebarPageTemplateService.cs files in the Dancing Goat Core sample project.

"The drag and drop Page Builder allows content editors to create content and control page layout very easily. Combine that with the ability to create MVC page templates, easy to use A/B tests, and easy to use Personalization variations, and you don't have much excuse not to use it in Kentico Xperience".

Read the rest of Kentico’s MVP Brian McKeiver’s excellent tips for building an Xperience website with Page Builder in the dos and don’ts article.