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

Library Version Matrix

Xperience Version	Library Version
>= 28.1.0	2.x
>= 25.0.0	1.x

Dependencies

• ASP.NET Core 8.0
• Xperience by Kentico

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 styles are applied correctly.

Example:

<!-- _SingleColumnSection.cshtml -->

<section xpc-preview-outline="Single Column Section">
  <!-- ... other markup -->
</section>

Contributions

If you discover a problem, please open an issue.

If you would like contribute to the code or documentation, please open a pull request.

Please refer to the Code of Conduct when contributing to or opening issues for this repository.