# Templates

*Templating in Umbraco builds on the concept of Razor Views from ASP.NET MVC - if you already know this, then you are ready to create your first template - if not, this is a quick and handy guide.*

## Creating your first Template

By default, all document types should have a template attached - but in case you need an alternative template or a new one, you can create one:

Open the **Settings** section inside the Umbraco backoffice and right-click the **Templates** folder. Choose **Create**. Enter a template name and click the **Save** button. You will now see the default template markup in the backoffice template editor.

![Created template](https://3872888104-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgEH4FChbCn7eDDqREvdE%2Fuploads%2Fgit-blob-47fa57416a06b698bcce0a4333acdcc14caea6fc%2Fcreate-template-v8.png?alt=media\&token=fd0e2790-284c-4566-b34e-9bc8149fb122)

## Allowing a Template on a Document Type

To use a template on a document, you must first allow it on the content's type. Open the Document Type you want to use the template, go to the Templates tab and select the template under the **Allowed Templates** section.

![Allowing template](https://3872888104-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgEH4FChbCn7eDDqREvdE%2Fuploads%2Fgit-blob-a18945a38dafccfbedf76e875ca94f329cd9bc2b%2Fallow-template-v8.png?alt=media\&token=a001b2ab-f75f-4ba9-b257-96c306d3bc2f)

## Inheriting a Master Template

A template can inherit content from a master template by using the ASP.NET views Layout feature. Let's say we have a template called **MasterView**, containing the following HTML:

```csharp
@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage
@{
    Layout = null;
}
<!DOCTYPE html>
<html lang="en">
    <body>
        <h1>Hello world</h1>
        @RenderBody()
    </body>
</html>
```

We then create a new template called **textpage** and in the template editor, click on the **Master Template** button and set its master template to the template called **MasterView**:

![Inherit template](https://3872888104-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgEH4FChbCn7eDDqREvdE%2Fuploads%2Fgit-blob-cdefa5b56bf169a30aebce93c32a3150e35a3b06%2Finherit-template-v8.png?alt=media\&token=4947f2ac-1008-427f-bdf2-240e84a327c2)

This changes the `Layout`value in the template markup, so **textpage** looks like this:

```csharp
@inherits Umbraco.Web.Mvc.UmbracoViewPage
@{
    Layout = "MasterView.cshtml";
}
<p>My content</p>
```

When a page using the textpage template renders, the final HTML will be merged replacing the `@renderBody()` placeholder, and produce the following:

```csharp
@inherits Umbraco.Web.Mvc.UmbracoViewPage
@{
    Layout = null;
}
<!DOCTYPE html>
<html lang="en">
    <body>
        <h1>Hello world</h1>
        <p>My content</p>
    </body>
</html>
```

## Template Sections

What's good to know, is that you are not limited to a single section. Template sections allow child templates that inherit the master layout template to insert HTML code up into the main layout template. For example, a child template inserting code into the `<head>` tag of the master template.

You can do this by using [named sections](https://www.youtube.com/watch?v=lrnJwglbGUA). Add named sections to your master template with the following code:

```csharp
@RenderSection("SectionName")
```

For instance, if you want to be able to add HTML to your `<head>` tags write:

```csharp
@inherits Umbraco.Web.Mvc.UmbracoViewPage
@{
    Layout = null;
}

<html>
    <head>
        <title>Title</title>
        @RenderSection("Head")
    </head>

    <body>
    </body>
</html>
```

By default, when rendering a named section, the section is not mandatory. To make the section mandatory, add `true` or enable **Section is mandatory** field in the **Sections** option.

```csharp
@RenderSection("Head", true)
```

![Create partial](https://3872888104-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgEH4FChbCn7eDDqREvdE%2Fuploads%2Fgit-blob-6cbeb2a8072c86ca3ccc7f61c9ddcd3e26fbbbcc%2Frender-named-sections-v10.png?alt=media\&token=3dc7719e-2e63-42ba-a62b-e549a83ca2f1)

On your child page template call `@section Head {}` and then type your markup that will be pushed into the Master Template:

```csharp
@section Head {
    <style>
        body {
            background: #ff0000;
        }
    </style>
}
```

## Injecting Partial Views

Another way to reuse HTML is to use partial views - which are small reusable views that can be injected into another view.

Like templates, create a partial view, by right-clicking **Partial Views** and selecting **Create**. You can then either create an empty partial view or create a partial view from a snippet.

![Create partial](https://3872888104-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgEH4FChbCn7eDDqREvdE%2Fuploads%2Fgit-blob-3f51d809f521897eb209a0116ec058a6267b1555%2Fcreate-partial-v8.png?alt=media\&token=77555ea7-fd42-4307-b4aa-2491b4b8aabe)

The created partial view can now be injected into any template by using the `@Html.Partial()` method like so:

```csharp
@inherits Umbraco.Web.Mvc.UmbracoViewPage
@{
    Layout = "MasterView.cshtml";
}

<h1>My new page</h1>
@Html.Partial("a-new-view")
```

### Related Articles

* [Basic Razor syntax](https://docs.umbraco.com/umbraco-cms/13.latest/fundamentals/design/templates/basic-razor-syntax)
* [Rendering content](https://docs.umbraco.com/umbraco-cms/13.latest/fundamentals/design/rendering-content)
* [Named Sections](https://docs.umbraco.com/umbraco-cms/13.latest/fundamentals/design/templates/named-sections)

### Tutorials

* [Creating a basic website with Umbraco](https://docs.umbraco.com/umbraco-cms/13.latest/tutorials/creating-a-basic-website)

### Umbraco Learning Base

{% embed url="<https://www.youtube.com/playlist?ab_channel=UmbracoLearningBase&list=PLgX62vUaGZsFmzmm4iFKeL41CZ5YFw09z>" %}
Playlist: Templates in Umbraco
{% endembed %}


---

# 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.umbraco.com/umbraco-cms/13.latest/fundamentals/design/templates.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.
