Visarc.Umbraco.HeadingEditor

A heading property editor for Umbraco 17. Lets editors enter a heading and choose its semantic level (e.g. H1–H6), with an optional separate visual (CSS) level so the markup and the styling can differ.

This is the package to install on an Umbraco website — it ships the backoffice UI and references Visarc.Umbraco.HeadingEditor.Core for the backend model and value conversion.

Installation

dotnet add package Visarc.Umbraco.HeadingEditor

The property editor is registered automatically. No startup code is required.

Setup

1. In the backoffice, go to Settings → Data Types → Create.
2. Search for Heading and choose the Heading Editor property editor.
3. Configure the options below, then save and add the data type to a document type.

Configuration options

Rendering

The stored value is exposed as a HeadingModel (Heading, Level, CssLevel):

@using Visarc.Umbraco.HeadingEditor.Core.Models

@{
    var heading = Model.Value<HeadingModel>("pageHeading");
}

@if (heading is not null)
{
    <h@(heading.Level) class="h@(heading.CssLevel)">@heading.Heading</h@(heading.Level)>
}

Compatibility

Packages