Create a new widget

In this example we are going to create a simple widget were you can edit a heading and select background and text color in the settings section of the widget.

Create document types

Let's start by creating two document types under Document Types > Widgets in the settings section of Umbraco. We will call our widget Hello World.

Create a Hello World folder under widgets to keep things organized. Right click on the new folder and select Document Type without a template

Our first document type will have the heading text.

Make sure to check the box Is an element type under the permission section.

Next we create on for Settings in the same way.

Add the document types to the Block List data type

To add our widget to the list of existing ones we need to open the data type IG - Content - Block List found under Data Types > IG - Block List
Click the Add button at the bottom of the list.

Select our content document type from the list. Once added click on the widget and connect the settings one under Settings model

Create a partial view for your widget

Now lets create a partial view for our widget. It's important that it has the same name as the alias for our content model. /Views/Partials/Widgets/HelloWorld.cshtml

@inherits Umbraco.Web.Mvc.UmbracoViewPage<Umbraco.Core.Models.Blocks.BlockListItem>
@using Umbraco.Core.Models.Blocks;
@using ContentModels = Umbraco.Web.PublishedModels;
@{
    var content = (ContentModels.HelloWorld)Model.Content;
    var settings = (ContentModels.HelloWorldSettings)Model.Settings;

    var textColorClass = settings.TextColor?.ToString() == "white" ? "light-color" : ""; 
    var backgroundColor = settings.BackgroundColor?.ToString();
    var backgroundColorClass = string.IsNullOrWhiteSpace(backgroundColor) ? "white-bg" : backgroundColor + "-bg";
}

<section class="block @backgroundColorClass @textColorClass">
    
   <h1 class="text-center">@content.Heading</h1>

</section>

note

For more information about Block List, see the Umbraco documentation