XperienceCommunity.PreviewComponentOutlines 1.0.0

Xperience Community: Preview Component Outlines

Enables outlines of Page Builder components in Preview mode for a Page.

This can help marketers and content managers visualize how various Page Builder components are composed on a page without the design limitations of the Page Builder edit mode.

Packages

PreviewComponentOutlines

Requirements: Xperience by Kentico >= v25.0.0

Setup

Install the XperienceCommunity.PreviewComponentOutlines NuGet package in your ASP.NET Core application:

dotnet add package XperienceCommunity.PreviewComponentOutlines

In your Program.cs add the following line where the rest of your services are configured:

builder.Services.AddPreviewComponentOutlines();

If you want to configure the styles of the outlines and labels, use the method overload:

builder.Services.AddPreviewComponentOutlines(o =>
{
    o.LabelFontColor = "#3a3a3a";
});

In your _ViewImports.cshtml add the following line to make the library's tag helper available in your Razor views:

@addTagHelper *, XperienceCommunity.PreviewComponentOutlines

In each Page Builder component you would like to have an outline and label, add the following tag helper to the most top-level HTML element of the component's view, where Component Widget|Section is the name of the component:

<div xpc-preview-outline="Component Widget|Section"></div>

Note: The name of the component must end in "Section" or "Widget" to ensure the correct styles are applied correctly.

Example:

<section xpc-preview-outline="Single Column Section">
  
</section>