# 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`
```aspnet
@inherits Umbraco.Web.Mvc.UmbracoViewPage
@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";
}
```
{% hint style="info" %}
For more information about Block List, see the[ Umbraco documentation ](https://our.umbraco.com/documentation/getting-started/backoffice/property-editors/built-in-property-editors/Block-List-Editor/)
{% endhint %}
