# 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` 

![](/files/-MORyA2zJl34OVG2nPom)

Our first document type will have the heading text. 

![](/files/-MORyvJQuAix6hPMsFc2)

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

![](/files/-MORzRhtMUJ2sFkvsS_N)

Next we create on for Settings in the same way.

![](/files/-MORzzEmQtVM5S6g6Awv)

## 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.

![](/files/-MOS01WvoNwSC6eh-YG4)

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

<div align="left"><img src="/files/-MOS0zprq76MsEMmpEBk" alt=""></div>

## 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<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>
```

{% 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.iglootheme.com/extending/create-a-new-widget.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.