1 of 12

Creating a Basic Website

A guide to creating a Basic Website using Umbraco

This tutorial was last tested on the latest version of Umbraco 11.

Introduction

This tutorial will take you step-by-step through an Umbraco website build. It will allow you to take any website "template" (for example, flat HTML, CSS, and JavaScript) and install it into a fresh Umbraco site. You can then wire up the sections that need content managing by Umbraco.

We will avoid using any starter kits in this tutorial. Although these are useful, they won’t provide you with an understanding of the basics of Umbraco. We'll look at how to create Document Types and Templates and how these work together to build pages.

It is recommended that you work through the subsections in the following order.

Getting Started

To follow this tutorial please work through this section first.

Creating Your First Document Type

How to create Document Types and what they do.

Creating Your First Template and Content Node

How to create your first template and create a content node.

CSS & Images

Adding the CSS and JavaScript for your site into Umbraco.

Displaying the Document Type Properties

How to wire the Document Type Properties (Umbraco Data Fields) into the templates to output the editor's data in the right place.

Creating a Master Template

How to create a Master Template and use this to create more pages whilst minimizing duplicate HTML code from your flat source files.

Creating Pages and using the Master Template

using the Master template to create new page types.

A solution for the template in the menu.

Articles Parent and Article Items

How to have a parent page that lists and links to child nodes automatically. For example, an article list page containing a flexible/infinite number of articles - useful for Blogs or News pages.

Adding Language Variants

At this point we have a basic site, but wouldn't it be cool if we could make the same site in another language? Read on to see how to get started with Language Variants!

Conclusions

By this point you'll have a basic working site - but where to next? You've barely scratched the surface of the power of Umbraco - a few links to send you on your way!

Getting Started

The Creating a Basic Site tutorial provides step-by-step instructions to build an Umbraco website using a set of HTML, CSS, and JavaScript files. The tutorial allows you to use a website template, customize it, and wire up the sections that need content managing in the Umbraco CMS.

What You Need

To install a basic website in the Umbraco CMS, you need the following:

A clean and empty installation of the Umbraco CMS.
This tutorial uses a copy of the Custom Umbraco Template – a HTML5, responsive website template. Download the Custom Umbraco Template or, if you prefer, you can use your own flat HTML files.

Installing Umbraco

To download the latest version of Umbraco, refer to the Installation article. On the installation wizard, follow the steps:

Enter your Name, Email, and Password.
Click on Change Database if you wish to configure another database for your Umbraco installation.
Choose the level of Consent for telemetry data of your Umbraco installation.
Click Install.

The installation will take a couple of minutes to complete. Once the installation is complete, you will see the Umbraco Backoffice screen.

Preparing the Custom Umbraco Template Site

Unzip the Custom Umbraco Template to a folder on your system.
Open the index.html from the folder in your preferred browser to see the template.

The template contains some text with dummy links. We’re going to turn this into a fully-fledged, Umbraco-powered site!

Logging in to Umbraco

You can log in to Umbraco in two ways:

Once the installation is complete, you will see the Login screen. You can enter the Name and Password used during the installation process.
Run localhost in your browser to see the Login screen.
Enter the Name and Password used during the installation process. You should see a similar Umbraco Backoffice as the image below:

Document Types

The first step in any Umbraco site is to create a Document Type. A Document Type is a data container in Umbraco where you can add Properties (data fields/attributes) to input data. Each Property has a Data Type like text string, number, or rich text body. Umbraco outputs the input data using Templates.

These are some of the most common properties you would add to a Document Type:

Page title
Sub Heading
Body Text
Meta Title
Meta Description

Creating a Document Type

To create a Document Type:

Go to Settings.
Select ... next to the Document Types in the Settings tree.
Select Document Type with Template.
- Using folders can help you organise your Document Types.
Enter a Name for the Document Type. Let's call it HomePage. You'll notice that an Alias is automatically created.
- The alias of the Document Type is automatically generated based on the property name. If you want to change the auto-generated alias, click the "lock" icon. The alias must be in camel case. For example: homePage.
Enter the Description. For example: This is our homepage template. The description helps to identify the correct Document Type when creating new Content Nodes in the Content Section.
Click Save. Our new Document Type is now visible as a new item under Document Types.

Customizing the Document Type

Adding icons

With the help of icons, you can identify different Document Types in the Content Tree. To add an icon:

Select the icon placeholder next to the document name. The Select Icon dialog appears on the right-side of the website.
Browse through the icon list and select the icon of your choice.
Click Submit.

Setting Permissions

To create a Document Type at the root of the Content Tree:

Go to the Permissions tab.
Toggle the Allow as root button.
- If your Document Types do not have the Allow as root checked, you will not be able to create any content on your site.
Click Save.

Adding Properties

To add properties to your Document Type, follow these steps:

Go to the Design tab.
Select Add Group and enter a name for the group. For this tutorial, we will call it Content.
Select Add property. The Property Settings dialog opens.
Enter a Name. For example: Page Title.
Enter a Description. For example: The main title of the page (Welcome to Widgets Ltd.).
Select Select Editor and select the Data Type of your choice. We'll add text in the search box and select the Textstring Data Type.
Click Submit.
- Remember to come back and explore the list of Data Types later.
Repeat Steps 3 to 7 using the specification below:
Select Add Group to create a new group called Footer. Repeat Steps 3 to 7 using the specification below:
Your Document Type should now look like this:
Click Save.

We’ve now created our first Document Type. Umbraco takes the data from an instance of the Document Type (also called as Content Node). This data is then merged with a Template – let's create our template next.

Creating Your First Template

Umbraco creates a corresponding template when you select the Document Type with Template option when creating a Document Type.

To edit the template:

Go to Settings.
Expand the Templates folder in the Templating section of the tree. You should see a template titled HomePage.
Open the template. It will contain a little bit of Razor code.
Leaving the code that's there (if you don't understand it, don't worry!) let's copy our template code in.
- We are using files from the Custom Umbraco Template.
Open the Custom Umbraco Template folder and copy the contents of index.html.
Paste the content into the HomePage template below the closing curly brace "}".
- Umbraco Templates uses Razor that allows you to add code in your Template files. Razor reacts to @ signs.
Click Save.

We now have a Template. That's two out of the three stages complete for our first page.

Creating Your First content node

Our third and final stage to creating our first page in Umbraco, is to create a content node. The content node uses our Document Type and Template, to serve up an HTML page to web visitors.

To add a content node:

Go to Content.
Select ... next to the Content headline in the tree. Select HomePage.
- If you cannot see the content node, check that [Settings] > [Document Types] > [HomePage] > [Permissions tab] > [Allow at root] is checked. The Home Page opens in the content editor.
Enter the name for the content node. We are going to call this Homepage.
- The name will show up in the node list and will be used to create a URL for the page. Try to keep it short but descriptive.
Enter the following details:
Click Save and Publish. The content tree will reload with the homepage node.

Refresh your webpage in your browser http://localhost:xxxx. To access your webpage:

Select Info in the Homepage content node.
Click on the window pop-up symbol under the Links section.

The default Umbraco page will now be gone and we'll now see a bare, unstyled page. We are getting there.

If you see a blank page, check if the template is entered and remember to save it.

CSS and Images

Our homepage is currently missing the CSS and image files. To include these files:

Navigate to the MyCustomUmbracoProject folder and the Custom Umbraco Template folder in File Explorer.
Copy the css and images folders from the Custom Umbraco template folder and place it in the wwwroot folder inside the MyCustomUmbracoProject folder.
Navigate to the HomePage template in the Settings section and ensure the stylesheet reference link is /css/main.css.
Using Chrome/Firefox/Edge Developer Tools, start or refresh your http://localhost:xxxx.
The network tab should not report any missing CSS or images files. If the network tab reports any error, check for typos and if the folders are in the right places.

Displaying the Document Type Properties

You might have noticed that the content we've added to the homepage is not being displayed. We need to wire up the Data Type properties to the template.

Let’s look at our template and identify where the content should be displayed.

The top arrow in this image is the Page Title and the bottom arrow is the Body Text. The Footer is all the way at the bottom of the page.

Setting the Document Type Properties

To set the Document Type properties:

Go to Settings.
Select Templates in the Templating section, and open the Homepage template.
Scroll down to the  section (around line 46) and highlight the text “Welcome - UmbracoTV” (around line 49).
Click Insert and select Value.
Select pageTitle field from the drop-down list.
Click Submit.
Repeat the same process for the content between the <div class="container"> tags (around line 61 to 78):
- Highlight the content as shown in the figure.
- Click Insert and select Value.
- Select bodyText field from the drop-down list.
- Click Submit.
Repeat the same process for the content in the <div class="container-fluid footer"> tag (around line 149 to 182):
- Highlight the content between the <div class="container"> tags.
- Click Insert and select Value.
- Select footerText field from the drop-down list.
- Click Submit.
Click Save.

Reload your homepage to view the content. You should see something similar like the image below:

Now, you can go back and add additional fields or update existing fields in the Document Type. Fill them out in the content node and then add them in the template to display the data in the website.

Creating a Master Template

We've seen how to create a Document Type and its corresponding Template. If you want to create a three-page site containing; Home, News and Contact Us pages, you would create a Document Type with a corresponding Template and copy the same HTML code into each template.

If you see yourself repeating the same HTML multiple times in your templates, you might want to consider creating a new master template.

To create a new master template:

Go to Settings.
Select Templates from the Templating section.
Select the ... next to the Templates folder and click Create.
A template opens up in the content editor. Enter a Name for the master template. Let's call it Master.
Click Save.

Using the Master Template

To use the master template:

Go to Settings.
Select Templates from the Templating section and open the Homepage template.
Select Master Template: No Master. The Master template dialog opens on the right-side of the browser.
Select the template called Master. This will update the Razor code section from Layout = null; to Layout = "Master.cshtml";
Click Save.

Updating Templates With the New Master Template

We now need to move the parts of our HTML template that are common across all templates into the Master. It might be slightly different for different websites and you'll need to consider if all pages contain a <div id="main"> section so that you can update it in the master.

To update templates with the new master template, follow these steps:

Go to Settings.
Select Templates from the Templating section.
Go to Master and open the Homepage template.
For this tutorial, we will cut everything from the <html> (around line 9) to the end of the </div> tag (around line 44) which is the header and navigation of the site to the master template.
Click Save.
Go to the Master template and paste this HTML markup after the closing curly brace (around line 9).
At the end of this markup, we need to tell Umbraco to insert the child template's content. To do so, add the code @RenderBody() at the end.
Click Save.
Repeat the same process for the footer content:
- Go to Settings > Templates > Master > Homepage template and cut everything from the  tag (around line 110) to the end of the </html> tag (around line 124) and click Save.
- Go to the Master template and paste this HTML markup after the @RenderBody field we've added.
- Click Save.

Now we've done a lot of work. When we refresh our localhost page, nothing has changed. If you have a compilation error you have perhaps mistyped @RenderBody().

If you are missing any content (header or footer), check that the templates matches the following:

Master Template

Homepage Template

Creating Pages and Using the Master Template

Creating a Contact Us Page

We are now going to create a page where we put our contact details. For added functionality, you might want to look at replacing this with a fully fledged contact us form.

Some potential solutions:

If you're not a programmer you can use the Umbraco built-in package - Umbraco Forms. Umbraco Forms has the added benefit that editors can also create their own forms. Find more information and purchase the product on Umbraco.com.
Build your own contact form using Surface Controllers.

Creating the Document Type and Template

Let's create a content-only contact page where we can provide a title and some rich text.

Go to Settings.
Select the ... next to the Document Types in the Settings tree.
Select Document Type with Template. The Document Type opens in the content editor.
Select an Icon from the list of icons.
Enter a Name. Let's call it Simple Content Page.
Enter a Description.
Let's add two fields with the following specifications:
Group Field Name Alias Data Type
Click Save.
Go to Templates to view your Simple Content Page template that was created automatically with the Document Type.
Select the Simple Content Page template and then select Master as the Master template.

Add the following HTML to the Simple Content Page template and click Save.

<!-- Jumbotron, w title -->
    <div class="jumbotron text-center jumbotron-fluid">
            <div class="container">
                <h1 class="display-1">Umbraco Support</h1>
            </div>
        </div>

<!-- Main -->
<section id="main" class="wrapper">
    <div class="container">

        <p>Are you a developer?</p>
        <p>Are you a marketer?</p>
        <p>Are you working at an agency?</p>
        <p>Let Umbraco unleash your talent</p>
    </div>
</section>

Click Save.

Updating the Document Type Permissions

We now need to update the Document Type permissions to specifically add child nodes under the root content node.

To update the Document Type permissions:

Go to Settings.
Open the Homepage Document Type and go to the Permissions tab.
Select Add child in the Allowed child node types. The Choose child node dialog opens.
Select Simple Content Page and click Save.

Creating the content node

To create a content node:

Go to Content.
Select ... next to the Homepage and select Simple Content Page.
Enter a name for the Document Type. Let's call it Contact Us.
Fill in details for the Page Title and Body Text.
Click Save and Publish.

Adding the Document Type Properties

To add the Document Type properties:

Go to Settings.
Select Templates from the Templating section.
Go to Master and open the Simple Content Page template.
Scroll to the  (around line 8) section and highlight the text “Umbraco Support” (around line 11).
Click Insert and select Value.
Select the pageTitle field from the drop-down list and click Submit.
Repeat the same process for the <div class="container"> tag:
- Highlight the content from the <p> tag (around line 19) to the end of the </p> tag (around line 22).
- Click Insert and select Value.
- Select bodyText field from the drop-down list.
- Click Submit.
Click Save.

Viewing the Contact Us Page

To view the Contact Us Page:

Go to Content.
Select the Contact Us page.
Go to the Info tab.
Click the link to view the page.

Using Document Type Properties from the Homepage

You may notice that the footer is now empty - we don't have the content from our Homepage node.

To use the Document Type properties from the homepage, do the following:

Go to Settings.
Select Templates from the Templating section, and open the Master template.
Highlight @Model.Value("footerText") in the footer (around line 52) and click Insert.
Select Value and choose the footerText again from the Choose field dropdown.
Select Yes, make it recursive checkbox. This notifies Umbraco to look up the content tree if the field doesn't exist at the node level for the page we're requesting.
Click Submit.
Click Save.

Reload the Contact Us page to view the content with the footer.

Setting the Navigation Menu

You can fix the navigation menu in two ways:

Dynamically - Umbraco creates a navigation menu from the pages in the Content Tree, so when you create a page it automatically appears in the navigation menu. Using dynamic navigation, you do not need to manually add or change your menu items if the page changes.
Hardcode it - You can hardcode the navigation menu but they would require more upkeep in the future if you want to remove a page or change its name.

To create dynamic navigation links from published content nodes, follow these steps:

Go to Settings.
Select Templates from the Templating section, and open the Master template.
Locate the  tag (around line 22).
Right below it, place the cursor on an empty line.
Select Query builder... in the top-right side of the editor.
Make sure it is set to say "I want all content from my website".
Click Submit.

You now have the following snippet in your Master Template:

@{
	var selection = Umbraco.ContentAtRoot().FirstOrDefault()
    .Children()
    .Where(x => x.IsVisible());
}
<ul>
	@foreach (var item in selection)
	{
		<li>
			<a href="@item.Url()">@item.Name()</a>
		</li>
	}
</ul>

This snippet will now need to be merged with the navigation above it.

The <ul> tag needs to be wrapped inside the <div class="container"> and <nav> tags, and the classes need to be added to the correct tags as well.

The final result will look like this:

    @{
        var selection = Umbraco.ContentAtRoot().FirstOrDefault()
        .Children()
        .Where(x => x.IsVisible());
    }
    <!-- Navigation -->
    <div class="container">
        <nav class="navbar navbar-expand navbar-light">
            <a class="navbar-brand font-weight-bold" href="index.html">UmbracoTV</a>
            <!-- Links -->
        <ul class="navbar-nav">
            @foreach (var item in selection)
            {
                <li class="nav-item">
                    <a href="@item.Url()" class="nav-link" >@item.Name()</a>
                </li>
            }
        </ul>

        </nav>
    </div>

The final step is to Save the Master template.

To add a basic hardcoded navigation, follow these steps:

Go to Settings.
Select Templates from the Templating section, and open the Master template.

Go to the  tag (around line 22), copy the content within the

tags (around line 23 to 45) and replace it with the following code:

<div class="container">
	<nav class="navbar navbar-expand navbar-light">
		<a class="navbar-brand font-weight-bold" href="/">Umbraco TV</a>
			<!-- Links -->
			<ul class="navbar-nav">
				<li class="nav-item">
				    <a class="nav-link" href="/contact-us">Contact Us</a>
				</li>
				<li class="nav-item">
				    <a class="nav-link" href="/articles">Articles</a>
                </li>
			</ul>
	</nav>
</div>

Click Save.

The IsVisible() helper method

If you add a checkbox property to a Document Type with an alias of umbracoNaviHide, the IsVisible() helper method can be used to exclude these from being shown in any collection.

Let's test the menu. You'll find that clicking on the Articles link throws an Umbraco error as we've not created this page yet. We'll create the Articles page in the next chapter.

Articles and Article Items

Having an Articles Parent page, and a number of associated child articles, provides a good example of Umbraco's features. We'll assume our fictional company, Widgets Ltd, writes about ten articles a month and want the articles page to act like a blog. You could use this functionality for news, event pages, or any other collection of Document Types.

Creating Articles and Article Items

Create two new Document Types with template: Articles Main and Articles Item.

To create Articles Main Document Type, follow these steps:

Go to Settings.
Select ... next to the Document Types in the Settings tree.
Click Document Type with Template.
Enter a Name for the Document Type. Let's call it Articles Main.
Let's add two fields with the following specifications:
Group Field Name Alias Data Type
Click Save

To create Articles Item Document Type, follow these steps:

Go to Settings.
Select ... next to the Document Types in the Settings tree.
Click Document Type with Template.
Enter a Name for the Document Type. Let's call it Articles Item.
Let's add two fields with the following specifications:
Click Save

Updating the Document Type Permissions

To update Articles Main Document Type permissions:

Navigate to the Home Page Document Type and go to the Permissions tab.
Select Add child in the Allowed child node types. The Choose child node window opens.
Select Articles Main and click Save.
Navigate to the Articles Main Document Type and go to the List View tab.
Toggle Enable List view and click Save.

To update Articles Item Document Type permissions:

Navigate to the Articles Main Document Type and go to the Permissions tab.
Select Add child in the Allowed child node types. The Choose child node window opens.
Select Articles Item and click Save.

Creating the Content Node

To add a content node:

Go to Content.
Select ... next to the HomePage and select Articles Main.
Enter the name for the article. We are going to call it Articles.
Enter the Article Title, Article Content, and click Save and Publish. When you click on Save and Publish, you will notice an empty list view is created.
We still need to add the child nodes which will be displayed in the list view making it easier to view them. You can create new nodes from this section.
If you do not see the list view, try refreshing the page.

5. Click **Create Articles Item** to add two child nodes called **Article 1**, **Article 2**, and click **Save and Publish**.

Updating the Template

To update the Articles Item template, follow these steps:

Go to Settings.
Expand the Templates folder in the Templating section. You should see a template titled Articles Main.
Select Master in the Master template and click Save.
Open the Custom Umbraco Template folder.
Copy the contents of Blog.html and paste the content into Articles Main below the closing curly brace "}".
- Take care when pasting the template not to overwrite the first line @inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<ContentModels.ArticlesMain>. If you get an error when loading the page ensure the last part in <> brackets matches your Document Type alias.
Remove everything from the <html> (around line 9) to the end of the </div> tag (around line 44) which is the header and navigation of the site since it is already mentioned in the master template.
Remove everything from the  tag (around line 84) to the end of the </html> tag (around line 131)
Replace the static text within the <h1> tags (around line 13) with the Model.Value reference to articlesTitle.
Replace the static text within the <div> tags (from line 24 to 30) with the Model.Value reference to articlesBodyText.
Define a query for all articles below the <h3> tag (around line 32) of the  section.
You can set conditions to get specific articles or decide the order of the articles. For the purpose of this guide, we'll use the following parameters:

If you've set the correct parameters, you will get a preview of the items being selected with the query. Click Submit, and you will see a code snippet has been added to your template. It will look similar to this:

@{ var selection =
Umbraco.Content(Guid.Parse("e0a4f1ff-122e-41bd-941c-f9686f03019f"))
.ChildrenOfType("articlesItem") .Where(x => x.IsVisible())
.OrderByDescending(x => x.CreateDate); }
<ul>
    @foreach (var item in selection) {
    <li>
        <a href="@item.Url()">@item.Name()</a>
    </li>
    }
</ul>

The above code will output a list of all the Article Items as links using the name. We will modify the template a little, to add more information about the articles. Replace the HTML in the foreach loop with this snippet:

<article class="special">
    <div class="articledate" > @item.CreateDate </div>
    <div class="articletitle"><a href="@item.Url()">@item.Name()</a></div>
    <div class="articlepreview">@Html.Truncate(item.Value("articleContent").ToString(), 20, true)<a href="@item.Url()">Read More..</a></div>
</article>

Click Save.

To update the Articles Item template, follow these steps:

Go to Settings.
Expand the Templates folder in the Templating section. You should see a template titled Articles Item.
Select Master in the Master template and click Save.
Open the Custom Umbraco Template folder.
Copy the contents of Blogpost.html and paste the content into Articles Item below the closing curly brace "}".
- Take care when pasting the template not to overwrite the first line @inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<ContentModels.ArticlesItem>. If you get an error when loading the page ensure the last part in <> brackets matches your Document Type alias.
Remove everything from the <html> (around line 9) to the end of the </div> tag (around line 44) which is the header and navigation of the site since it is already mentioned in the master template.
Remove everything from the  tag (around line 114) to the end of the </html> tag (around line 161)
Replace the static text within the <h1> tags (around line 14) with the Model.Value reference to articleTitle.
Replace the static text within the <div> tags (from line 26 to 41) with the Model.Value reference to articleContent.
Click Save.

Check your browser, you should now see something similar to the screen below.

Adding Language Variants

Now that we have a basic site set up, let's make the site multilingual by making variations of our content in one more language. For this tutorial, we will make a Danish version of the HomePage page.

Adding a new language

To add a new language, follow these steps:

Go to the Settings tab.
Go to Languages in the Settings tree. The Languages window opens in the editor.
Click Add Language. The Add Language window opens in the editor.
Select a Language from the dropdown list. In this tutorial, we will pick Danish.
In Settings, to set the new language as the:
- Default language for your site, toggle Default Language.
- Mandatory language for your site, toggle Mandatory Language.
Select a Fallback Language from the drop-down list.
Click Save.

Enabling Language Variants on Document Types and Properties

To enable language variants on Document Types, follow these steps:

Go to the Settings tab.
Select HomePage from the Document Types folder.
Go to the Permissions tab and toggle Allow vary by culture
Click Save.
Go to the Design tab.
Click on the gear icon ⚙ of the Page Title and toggle Allow vary by culture.
Click Submit.
For this tutorial, we will not make any changes to the Body Text. Click Save.

Adding Culture and Hostnames to the root node of the website

To add culture and hostnames, follow these steps:

Go to the Content tab.
Right-click on the ... dots next to the Home Page content node and select Culture and Hostnames.
Add a domain for each hostname, like it's done here:
Click Save.

Adding Language Variants to the Content

You will find a language dropdown above your content tree. If it's not there, you might need to refresh the page:

In the language dropdown, you will find all the languages that you have installed for your site. You can switch between them to update the content variations for each language.

To add language variants to the content, follow these steps:

Go to the Home Page node. You will find a language dropdown next to the title at the top:
Click the dropdown and hover over the new language. You will see an Open in Splitview option will appear.
Click Open in Splitview. In this splitview, we can see the content node with each language side by side.
You may notice that the bodytext is greyed out - this is because we haven't checked the Allow vary by culture checkbox.
Enter the Name for your content node and the Page Title in the new language.
Click Save and Publish. The Ready to Publish window opens providing the option to publish in one or more languages.
You can select either one or multiple languages and click Publish.

Viewing the Language Variant on the Browser

To view the language variant on the browser, follow these steps:

Go to the Content tab.
Select your new language from the language dropdown above your content tree.
Select the Home Page node and go to the Info tab.
You will notice the links with the new language domain added to it. If it's not there, you might need to refresh the page.
Click on the link to view the new language varied node in the browser.
Alternatively, you can add the domain name to your localhost in the browser. For example: http://localhost:xxxx/dk/

Conclusions

We now have a fully fledged working site! Hopefully, this guide has given you all the basics required to create your own site in Umbraco.

This is not the limit of Umbraco - you've barely scratched the surface in this guide.

For Video Tutorials, see the Umbraco Learning Base Youtube channel.
For hands-on Training and Developer Certification, attend an official Umbraco Master Class course in a city near you. Book your Online Course now.
For Online Documentation, see Our Umbraco Documentation website.
For Help and Guidance on anything this guide doesn't cover, reach out to us at Umbraco Forum.

Happy Umbraco-ing

Creating a Master Template

If you see yourself repeating the same HTML multiple times in your templates, you might want to consider creating a new master template.

To create a new master template:

Go to Settings.
Select Templates from the Templating section.
Select the ... next to the Templates folder and click Create.
A template opens up in the content editor. Enter a Name for the master template. Let's call it Master.
Click Save.

Using the Master Template

To use the master template:

Go to Settings.
Select Templates from the Templating section and open the Homepage template.
Select Master Template: No Master. The Master template dialog opens on the right-side of the browser.
Select the template called Master. This will update the Razor code section from Layout = null; to Layout = "Master.cshtml";
Click Save.

Updating Templates With the New Master Template

To update templates with the new master template, follow these steps:

Go to Settings.
Select Templates from the Templating section.
Go to Master and open the Homepage template.
For this tutorial, we will cut everything from the <html> (around line 9) to the end of the </div> tag (around line 44) which is the header and navigation of the site to the master template.
Click Save.
Go to the Master template and paste this HTML markup after the closing curly brace (around line 9).
At the end of this markup, we need to tell Umbraco to insert the child template's content. To do so, add the code @RenderBody() at the end.
Click Save.
Repeat the same process for the footer content:
- Go to Settings > Templates > Master > Homepage template and cut everything from the  tag (around line 110) to the end of the </html> tag (around line 124) and click Save.
- Go to the Master template and paste this HTML markup after the @RenderBody field we've added.
- Click Save.

Now we've done a lot of work. When we refresh our localhost page, nothing has changed. If you have a compilation error you have perhaps mistyped @RenderBody().

If you are missing any content (header or footer), check that the templates matches the following:

Master Template

@using Umbraco.Cms.Web.Common.PublishedModels;
@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage
@{
	Layout = null;
}

@* the fun starts here *@

<html>
	<head>
		<title>Welcome - UmbracoTV</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
		<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700&display=swap" rel="stylesheet">
		<link rel="stylesheet" href="/wwwroot/media/css/main.css" />
	</head>
	
	<body>

		<!-- Navigation -->
		<div class="container">
			<nav class="navbar navbar-expand navbar-light">
				<a class="navbar-brand font-weight-bold" href="index.html">UmbracoTV</a>
				<!-- Links -->
				<ul class="navbar-nav">
					<li class="nav-item">
					    <a class="nav-link" href="Contentpage-Simple.html">Simple Content Page</a>
					</li>
					<li class="nav-item">
					    <a class="nav-link" href="Contentpage-Advanced.html">Advanced Content Page</a>
                    </li>
                    <li class="nav-item">
					    <a class="nav-link" href="Blog.html">Blog</a>
                    </li>
                    <li class="nav-item">
					    <a class="nav-link" href="Contentpage2.html">The Team</a>
					</li>
					<li class="nav-item">
					    <a class="nav-link" href="Contactpage.html">Contact</a>
					</li>
				</ul>
			</nav>
		</div>
		
		@RenderBody()
		
				<!-- Footer -->
		<div class="container-fluid footer">
			<div class="container">

		    	@Model.Value("footerText")

			</div>
		</div>
	
	<!-- Scripts -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
	
	</body>
</html>

Homepage Template

@using Umbraco.Cms.Web.Common.PublishedModels;
@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<ContentModels.HomePage>
@using ContentModels = Umbraco.Cms.Web.Common.PublishedModels;
@{
	Layout = "Master.cshtml";
}

<!DOCTYPE HTML>

		
		<!-- Jumbotron, w title -->
		<div class="jumbotron text-center jumbotron-fluid">
			<div class="container">
				<h1 class="display-1">@Model.Value("pageTitle")</h1>
				<p>And this is <span class="font-weight-bold">only</span> the beginning.</p>
			</div>
		</div>

		<!-- This is where we're going to render our content -->
		
		<div class="container">

			<div class="row section">
				<div class="col-md-12">

	            @Model.Value("bodyText")

				</div>				
			</div>

		</div>

		<!-- Grey Banner -->
		<div class="container-fluid grey-bg">
			<div class="container">
				<div class="row section">
					<div class="col-md-8">
						<h2>A flexible CMS - do things your way</h2>
						<p>The Umbraco source code is free and available for download either as a ZIP file or via NuGet under the MIT license, so you can <a href="#">start crafting websites in Umbraco today</a>. 
						Need to build a site with multiple 3rd party extensions and customized add-ons? No problem. Need to build a simple site with a straightforward contact form? No problem.</p>
						<p>Whatever type or scale of your project, Umbraco will be able to handle it - and the cherry on top; with Umbraco’s well-known editor friendly UI, 
							no matter how complex a site you’re building, you know that your editors will still find it a breeze to edit. Oh, and the cherry on top of the cherry - 
							there's <span class="font-weight-bold">no need for you to spend time learning a new coding or templating language as Umbraco is based on C#, javaScript and Razor</span>. </p>
					</div>
					<div class="col-md-4">
						<img src="/images/community.png" class="img-fluid" alt="Community illustration">
					</div>
				</div>
			</div>
		</div>

		<!-- Blog section -->
		<div class="container">

			<div class="row section">
				<div class="col-md-12">
					<h1>Latest from the blog</h1>
				</div>

				<!-- Blog Post query goes here. -->
				<div class="col-md-4">
					<div class="box-blog">
						<a href="Blogpost.html"><div class="blog-promoImage" style="background-image:url('/images/u_product_roadmap_white-1.png')"></div></a>
						<h5>Product Update - Deploying Deploy 3.3</h5>
						<p class="blog-meta">January 20th 2020 - by Sofie Toft</p>
						<p>The end of 2019 is approaching and with this, also the last Product Update of the year. 
							Let’s have a look at what we’ve been working on and what you can expect in the near future.</p>
					</div>
					<a href="Blogpost.html" class="btn btn-inverted">Read more >></a>
				</div>
				<div class="col-md-4">
					<div class="box-blog">
						<a href="#"><div class="blog-promoImage" style="background-image:url('/images/Press.jpg')"></div></a>
						<h5>Umbraco <3 YouTube</h5>
						<p class="blog-meta">January 20th 2020 - by Sofie Toft</p>
						<p>The end of 2019 is approaching and with this, also the last Product Update of the year. 
							Let’s have a look at what we’ve been working on and what you can expect in the near future.</p>
					</div>
					<a href="#" class="btn btn-inverted">Read more >></a>
				</div>
				<div class="col-md-4">
					<div class="box-blog">
						<a href="#"><div class="blog-promoImage" style="background-image:url('/images/sofie-hammock.jpg')"></div></a>
						<h5>A day in a Documentation Curators life</h5>
						<p class="blog-meta">January 20th 2020 - by Sofie Toft</p>
						<p>The end of 2019 is approaching and with this, also the last Product Update of the year. 
							Let’s have a look at what we’ve been working on and what you can expect in the near future.</p>
					</div>
					<a href="#" class="btn btn-inverted blog-box-btn">Read more >></a>
				</div>
			</div>

		</div>

		<!-- Call to Action -->
		<div class="container-fluid orange-bg">
			<div class="container">

				<div class="row section">
					<div class="col-md-12 text-center">
						<h1>How to continue your Umbraco journey</h1>
						<p>What’s next? We have gathered the 3 best ways for you to go on from here ensuring you get the best start to your Umbraco journey: <br/><br/></p>
						<a href="#" class="btn btn-inverted-orange" role="button">3 ways to start your Umbraco Journey >></a>
					</div>
				</div>
	
			</div>
		</div>

Articles and Article Items

Creating Articles and Article Items

Create two new Document Types with template: Articles Main and Articles Item.

To create Articles Main Document Type, follow these steps:

Go to Settings.
Select ... next to the Document Types in the Settings tree.
Click Document Type with Template.
Enter a Name for the Document Type. Let's call it Articles Main.
Let's add two fields with the following specifications:
Group Field Name Alias Data Type
Click Save

To create Articles Item Document Type, follow these steps:

Go to Settings.
Select ... next to the Document Types in the Settings tree.
Click Document Type with Template.
Enter a Name for the Document Type. Let's call it Articles Item.
Let's add two fields with the following specifications:
Group Field Name Alias Data Type
Click Save

Updating the Document Type Permissions

To update Articles Main Document Type permissions:

Navigate to the Home Page Document Type and go to the Permissions tab.
Select Add child in the Allowed child node types. The Choose child node window opens.
Select Articles Main and click Save.
Navigate to the Articles Main Document Type and go to the List View tab.
Toggle Enable List view and click Save.

To update Articles Item Document Type permissions:

Navigate to the Articles Main Document Type and go to the Permissions tab.
Select Add child in the Allowed child node types. The Choose child node window opens.
Select Articles Item and click Save.

Creating the Content Node

To add a content node:

Go to Content.
Select ... next to the HomePage and select Articles Main.
Enter the name for the article. We are going to call it Articles.
Enter the Article Title, Article Content, and click Save and Publish. When you click on Save and Publish, you will notice an empty list view is created.
We still need to add the child nodes which will be displayed in the list view making it easier to view them. You can create new nodes from this section.
If you do not see the list view, try refreshing the page.

5. Click **Create Articles Item** to add two child nodes called **Article 1**, **Article 2**, and click **Save and Publish**.

Updating the Template

To update the Articles Item template, follow these steps:

Go to Settings.
Expand the Templates folder in the Templating section. You should see a template titled Articles Main.
Select Master in the Master template and click Save.
Open the Custom Umbraco Template folder.
Copy the contents of Blog.html and paste the content into Articles Main below the closing curly brace "}".
- Take care when pasting the template not to overwrite the first line @inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<ContentModels.ArticlesMain>. If you get an error when loading the page ensure the last part in <> brackets matches your Document Type alias.
Remove everything from the <html> (around line 9) to the end of the </div> tag (around line 44) which is the header and navigation of the site since it is already mentioned in the master template.
Remove everything from the  tag (around line 84) to the end of the </html> tag (around line 131)
Replace the static text within the <h1> tags (around line 13) with the Model.Value reference to articlesTitle.
Replace the static text within the <div> tags (from line 24 to 30) with the Model.Value reference to articlesBodyText.
Define a query for all articles below the <h3> tag (around line 32) of the  section.
You can set conditions to get specific articles or decide the order of the articles. For the purpose of this guide, we'll use the following parameters:

@{ var selection =
Umbraco.Content(Guid.Parse("e0a4f1ff-122e-41bd-941c-f9686f03019f"))
.ChildrenOfType("articlesItem") .Where(x => x.IsVisible())
.OrderByDescending(x => x.CreateDate); }
<ul>
    @foreach (var item in selection) {
    <li>
        <a href="@item.Url()">@item.Name()</a>
    </li>
    }
</ul>

<article class="special">
    <div class="articledate" > @item.CreateDate </div>
    <div class="articletitle"><a href="@item.Url()">@item.Name()</a></div>
    <div class="articlepreview">@Html.Truncate(item.Value("articleContent").ToString(), 20, true)<a href="@item.Url()">Read More..</a></div>
</article>

Click Save.

To update the Articles Item template, follow these steps:

Go to Settings.
Expand the Templates folder in the Templating section. You should see a template titled Articles Item.
Select Master in the Master template and click Save.
Open the Custom Umbraco Template folder.
Copy the contents of Blogpost.html and paste the content into Articles Item below the closing curly brace "}".
- Take care when pasting the template not to overwrite the first line @inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<ContentModels.ArticlesItem>. If you get an error when loading the page ensure the last part in <> brackets matches your Document Type alias.
Remove everything from the <html> (around line 9) to the end of the </div> tag (around line 44) which is the header and navigation of the site since it is already mentioned in the master template.
Remove everything from the  tag (around line 114) to the end of the </html> tag (around line 161)
Replace the static text within the <h1> tags (around line 14) with the Model.Value reference to articleTitle.
Replace the static text within the <div> tags (from line 26 to 41) with the Model.Value reference to articleContent.
Click Save.