This tutorial is based and tested on the latest version of Umbraco 14.

Introduction

This tutorial will guide you through building an Umbraco website step by step. It will show you how to take any website template, such as flat HTML, CSS, and JavaScript, and install it into a new Umbraco site. Then, you can connect the sections that require content management by Umbraco.

We will not be using any starter kits in this tutorial. While these can be helpful, they do not offer a full understanding of the basics of Umbraco. Instead, we will focus on creating Document Types and Templates and how they work together to build pages.

It is recommended that you work through the sub-sections in the following order.

Getting Started

To follow this tutorial, ensure to complete this section first.

Creating Your First Document Type

Learn how to create Document Types and understand their purpose.

Creating Your First Template and Content Node

Discover how to create your first template and set up a content node.

CSS & Images

Learn how to integrate CSS and JavaScript into your Umbraco site.

Displaying the Document Type Properties

Find out how to connect Document Type Properties (Umbraco Data Fields) to templates to display the editor's data correctly.

Creating a Master Template

Learn how to create a Master Template to streamline the creation of additional pages and reduce repetitive HTML code.

Creating Pages and using the Master Template

Use the Master Template to generate new page types.

Setting The Navigation Menu

Manage the navigation menu in your template.

Articles Parent and Article Items

Learn how to create a parent page that automatically lists and links to child nodes. Ideal for something like blogs or news sections.

Adding Language Variants

Explore how to expand your basic site by introducing Language Variants to support multiple languages.

Conclusions

By this stage, you will have a basic functioning site. Discover where to go next and explore the deeper capabilities of Umbraco with additional resources.

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

To edit the template:

1. Go to Settings.

2. Expand the Templates folder in the Templating section of the tree. You should see a template titled HomePage.

   If you do not see the template, try refreshing the page.

3. Open the template. It contains a little bit of Razor code.

   Code Breakdown:

   • @using Umbraco.Cms.Web.Common.PublishedModels; - Imports the namespace for Umbraco's strongly-typed content models.

   • @inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage - Sets the view to inherit from Umbraco's base view class for accessing Umbraco-specific features and helpers.

   • Layout = "null"; - The view will not use a layout page unless explicitly specified. For more information on Razor Pages Layout, see the Microsoft Documentation.
4. Paste the template code, while leaving the code that is already there.

   • We are using the files from the Custom Umbraco Template folder. Clicking the link will automatically download the files to your device.

5. Open the Custom Umbraco Template folder and copy the contents of index.html.

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

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

1. Go to Content.

2. Select ... next to Content in the tree.

3. Click Create.

4. Select HomePage. The Home Page opens in the content editor.

   • If you cannot see the content node, check that Settings > Document Types > HomePage > Structure > Allow at root is enabled.
5. 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.

6. Enter the following details:
7. Click Save and Publish. The content tree will reload with the homepage node.

Accessing the Frontend

To view your content on the frontend:

1. Go to the Info tab in the Homepage content node.

2. Click on the link under the Links section.

The default Umbraco page is gone and we can see a basic unstyled page. We are getting there.

The first step in creating an Umbraco site is to set up a Document Type. A Document Type acts as a data container in Umbraco, where you can add Properties (data fields or attributes) to store content. Each Property is assigned a Data Type, such as a text string, number, or rich text editor. Umbraco uses Templates to render this input data on the front end.

Here are some of the most common properties you might add in a Document Type:

• Page Title

• Sub Heading

• Body Text

• Meta Title

• Meta Description

Creating a Document Type

To create a Document Type:

1. Go to Settings.

2. Click ... next to the Document Types.

3. Select Create...

4. Select Document Type with Template.

   Folders can help you organize your Document Types.

1. 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 camelcase. For example homePage.

2. 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:

1. Click the icon placeholder next to the document name. The Select Icon dialog opens.
2. Browse through the icon list and select the icon of your choice.

3. Click Submit.

4. Click Save.

Setting Permissions

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

1. Go to the Structure tab.

2. Toggle the Allow at root button.

1. Click Save.

Adding Properties

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

1. Go to the Design tab.

2. Click Add Group.

3. Enter a Name for the group. For this tutorial, we will call it Content.
4. Click Add property. The Add property dialog opens.

5. Enter a Name. For example: Page Title.

6. Enter a Description. For example: The main title of the page (Welcome to Widgets Ltd.).
7. Click Select Property Editor.

8. Select the Data Type of your choice. We'll add text in the search box and select the Textstring Data Type.
9. Click Submit.

   • Remember to come back and explore the list of Data Types later.

10. Repeat Steps 4 to 9 to add a Body Text using the specification below:

1. Click Add Group to create a new group called Footer. Repeat Steps 4 to 9 to add a Footer Text using the specification below:

1. Your Document Type should now look like this:

2. Click Save.

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

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

1. Navigate to the MyCustomUmbracoProject folder and the Custom Umbraco Template folder in File Explorer.

2. Copy the css and images folders from the Custom Umbraco template folder and place it in the wwwroot folder inside the MyCustomUmbracoProject folder.

3. Navigate to the HomePage template in the Settings section and ensure the stylesheet reference link is /css/main.css.
4. 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.

You can set up the navigation menu in two ways:

• Dynamically: Umbraco can automatically generate a navigation menu based on the pages in the Content Tree. When you create or modify a page, it will automatically appear in the navigation menu. This dynamic approach eliminates the need to manually add or update menu items when pages are added, removed, or renamed.

• Hardcoded: Alternatively, you can hardcode the navigation menu. However, this approach requires more maintenance, as any changes to the pages—such as adding, removing, or renaming—would need to be manually reflected in the menu.

Dynamic Navigation

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

1. Go to Settings.

2. Expand the Templates folder from the Templating section.

3. Open the Master template.

4. Locate the <!-- Navigation --> tag (around line 20).

5. Right below it, place the cursor on an empty line.

6. Select Query builder... in the top-right side of the editor.

7. Make sure it is set to say "I want all content from my website".

8. 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 needs to be merged with the navigation above it.

1. Wrap the <ul> tag inside the <div class="container"> and <nav> tags.

The final result will look like this:

@{
var selection = Umbraco.ContentAtRoot().FirstOrDefault()
	.Children()
	.Where(x => x.IsVisible());
}
<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>

1. Click Save.

Hardcode Navigation

To add a basic hardcoded navigation, follow these steps:

1. Go to Settings.

2. Expand the Templates folder from the Templating section.

3. Open the Master template.

4. Go to the <!-- Navigation --> tag (around line 20).

5. Copy the content within the <div> tags (around line 21 to 43) 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>

1. Click Save.

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.

Congratulations! You now have a fully functional website. Hopefully, this guide has provided you with all the basics needed to create your own site in Umbraco.

This is only the beginning — there is much more to explore in Umbraco beyond what we have covered here.

• Video Tutorials: Check out the Umbraco Learning Base channel on Youtube.

• Training and Certification: Attend an official Umbraco Master Class or Book an Online Course now.

• Documentation: Browse the Umbraco Documentation website for detailed guidance.

• Support: For help with topics not covered in this guide, connect with the community on the Umbraco Forum.

Happy Umbraco-ing

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:

1. Go to Settings.

2. Open the Homepage template.

3. Scroll down to the <!-- Jumbotron, w title --> section (around line 45) and highlight the text “Welcome - UmbracoTV” (around line 48).
4. Click Insert and select Value.

5. Select Document Type from the Choose field dropdown list.

6. Select HomePage.

7. Click Choose.

8. Select pageTitle field from the HomePage dropdown list.
9. Click Submit.

10. Go to the content between the <div class="container"> tags (around line 60 to 77):

11. Highlight the content as shown in the figure.
12. Repeat steps 4 to 9 to insert the bodyText field.

13. Go to the content between the <div class="container-fluid footer"> tag (around line 148 to 181):

14. Highlight the content between the <div class="container"> tags.
15. Repeat steps 4 to 9 to insert the footerText field.

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

Having a parent page with child pages provides a good example of Umbraco's features. For example, our fictional company, Widgets Ltd, publishes about ten articles per month and therefore wants the parent page to function as a blog. This setup works for articles, posts, and other collections that require multiple content items based on the same content type.

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:

1. Go to Settings.

2. Click ... next to the Document Types in the Settings tree.

3. Select Create....

4. Select Document Type with Template.

5. Enter a Name for the Document Type. Let's call it Articles Main.

6. Let's add two fields with the following specifications:

   Group	Field Name	Alias	Data Type
7. Click Save

To create Articles Item Document Type, follow these steps:

1. Go to Settings.

2. Click ... next to the Document Types in the Settings tree.

3. Select Create....

4. Select Document Type with Template.

5. Enter a Name for the Document Type. Let's call it Articles Item.

6. Let's add two fields with the following specifications:
7. Click Save

Updating the Document Type Permissions

To add Articles Main as a child node:

1. Navigate to the Home Page Document Type.

2. Go to the Structure tab.

3. Select Choose in the Allowed child node types.

4. Select Articles Main.

5. Click Choose.

6. Click Save.

To update Articles Main Document Type permissions:

1. Navigate to the Articles Main Document Type.

2. Go to the Structure tab.

3. Select Choose in the Allowed child node types.

4. Select Articles Item.

5. Click Choose.
6. Click Configure as a collection.

7. Select List View - Content.

8. Click Save.

Creating the Content Node

To add a content node:

1. Go to Content.

2. Select ... next to the HomePage node.

3. Click Create.

4. Select Articles Main.

5. Enter the name for the article. We are going to call it Articles.

6. Enter the content in the Article Title and Article Body Text fields.

7. Click Save and Publish. When you click on Save and Publish, you will notice an empty Collection is created.

   We still need to add the child nodes which will be displayed in the Collection making it easier to view them. You can create new nodes from this section.

   If you do not see the Collection, try refreshing the page.

8. Click Create Articles Item.

9. Enter the name for the article. We are going to call it Article 1.

10. Enter the content in the Article Title and Article Content fields.

11. Repeat steps 8 to 10 to create Article 2.

12. Click Save and Publish.

Updating the Template

To update the Articles Main template, follow these steps:

1. Go to Settings.

2. Expand the Templates folder in the Templating section.

3. Open the Articles Main template.

4. Select Master in the Master template:No Master field.

5. Click Choose.

6. Click Save.

7. Open the Custom Umbraco Template folder.

8. Copy the contents of Blog.html.

9. Paste the content into Articles Main below the closing curly brace "}".

10. Remove everything from the <html> (around line 8) to the end of the </div> tag (around line 43) which is the header and navigation of the site since it is already mentioned in the Master template.

11. Remove everything from the <!-- Footer --> tag (around line 83) to the end of the </html> tag (around line 130)

12. Replace the static text within the <h1> tags (around line 12) with the Model.Value reference to articlesTitle.

13. Replace the static text within the <div> tags (from line 23 to 29) with the Model.Value reference to articlesBodyText.
14. Define a query for all articles below the <h3> tag (around line 30) of the <!-- Latest blog posts --> section.
15. You can set conditions to get specific articles or decide the order of the articles. For the purpose of this guide, we are using the following parameters:
16. If you've set the correct parameters, you will get a preview of the items being selected with the query.

17. Click Submit.

18. You will see a similar code snippet added to your template:

    Copy

    @{ var selection =
    Umbraco.Content(Guid.Parse("56aa9cc5-243b-4947-8fb1-37b209b97373"))
    .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>

19. The above code will output a list of all the Article Items as links using the name.

20. We will modify the template a little, to add more information about the articles.

21. Replace the HTML in the foreach loop with this snippet:

    Copy

    <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 @item.Name()..</a></div>
    </article>

22. Remove the <ul> tags surrounding the foreach loop.

23. Click Save.

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

<!DOCTYPE HTML>
		
		<!-- Jumbotron, w title -->
		<div class="jumbotron text-center jumbotron-fluid">
			<div class="container">
				<h1 class="display-1">@Model.Value("articlesTitle")</h1>
				<p>What we do when we do what we do - and why!</p>
			</div>
		</div>

		<!-- Main container -->
		<div class="container">

			<!-- Featured blogpost -->
			<div class="row section">
				<div class="col-md-12">
					@Model.Value("articlesBodyText")
				</div>
			</div>

			<!-- Latest blog posts -->
			<div class="row section">
				<div class="col-md-12">
					<h3>Latest stories</h3>
					@{
						var selection = Umbraco.Content(Guid.Parse("66da3501-23df-4129-aa79-d511064d6ab8"))
						.ChildrenOfType("articlesItem")
						.Where(x => x.IsVisible())
						.OrderByDescending(x => x.CreateDate);
					}
					
						@foreach (var item in selection)
						{
							<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 @item.Name()..</a></div>
						</article>
						}
			
				</div>
			</div>

			<!-- Blog Post Query goes here. -->
			<div class="row">
				<div class="col-md-4">
					<a href="Blogpost.html" class="featured-link"><div class="thumbnail-blog">
						<div class="thumbnail-img" style="background-image:url('/images/Press.jpg')"></div>
						<h5>Umbraco <3 YouTube</h5>
					</div></a>
				</div>
				<div class="col-md-4">
					<a href="#" class="featured-link"><div class="thumbnail-blog">
						<div class="thumbnail-img" style="background-image:url('/images/sofie-hammock.jpg')"></div>
						<h5>A day in a Documentation Curators life</h5>
					</div></a>
				</div>
				<div class="col-md-4">
					<a href="#" class="featured-link"><div class="thumbnail-blog">
						<div class="thumbnail-img" style="background-image:url('/images/heart-DNS.png')"></div>
						<h5>New product: Umbraco Heartcore</h5>
					</div></a>
				</div>

				<div class="col-md-4">
					<a href="#" class="featured-link"><div class="thumbnail-blog">
						<div class="thumbnail-img" style="background-image:url('/images/uPackage.png')"></div>
						<h5>Packages.. Packages every where!</h5>
					</div></a>
				</div>
				<div class="col-md-4">
					<a href="#" class="featured-link"><div class="thumbnail-blog">
						<div class="thumbnail-img" style="background-image:url('/images/CG-virgins.JPG')"></div>
						<h5>Just how flexible is Umbraco?</h5>
					</div></a>
				</div>
				<div class="col-md-4">
					<a href="#" class="featured-link"><div class="thumbnail-blog">
						<div class="thumbnail-img" style="background-image:url('/images/confetti.jpg')"></div>
						<h5>Festival season of 2020</h5>
					</div></a>
				</div>
			</div>

		</div>	

To update the Articles Item template, follow these steps:

1. Go to Settings.

2. Expand the Templates folder in the Templating section.

3. Open the Articles Item template.

4. Select Master in the Master template:No master field.

5. Click Choose.

6. Click Save.

7. Open the Custom Umbraco Template folder.

8. Copy the contents of Blogpost.html.

9. Paste the content into Articles Item below the closing curly brace "}".

10. Remove everything from the <html> (around line 8) to the end of the </div> tag (around line 43) which is the header and navigation of the site since it is already mentioned in the Master template.

11. Remove everything from the <!-- Footer --> tag (around line 113) to the end of the </html> tag (around line 160)

12. Replace the static text within the <h1> tags (around line 13) with the Model.Value reference to articleTitle.

13. Replace the static text within the <div> tags (from line 25 to 39) with the Model.Value reference to articleContent.
14. Click Submit.

15. Click Save.

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

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

		<!-- Main container -->

		<!-- Blogpost meta data -->
		<div class="container-fluid grey-bg">
			<div class="container">
				<div class="row section">
					<div class="col-md-6">
						@Model.Value("articleContent")
					</div>
				</div>
			</div>
		</div>		

		<!-- Blogpost content -->
        <div class="container">

			<div class="row section">
				<div class="col-md-12">
					<p class="intro">The end of 2019 is approaching and with this, also the last Product Update of the year. 
						And what a year it has been - especially when we’re talking “product”! Two major product launches with Umbraco 8 and Umbraco Heartcore. 
						2019 also saw a record-breaking amount of PRs submitted, mainly due to a record-shattering Hacktoberfest 🙌 
						It’s absolutely amazing to see how much Umbraco 8 has evolved in the past 10 months, not least thanks to the friendly and very productive Umbraco community. 
						I cannot wait to see what happens in 2020! 
						But, before we get to that, let’s have a look at what we’ve been working on and what you can expect in the near future.</p>
					<br />
					<h3>New Release: Forms API & Content Filtering for Umbraco Heartcore</h3>
					<p>December 17th, we released two new features for our headless saas offering, Umbraco Heartcore; Form API and Content Filtering.
						<br /><br />
						<span class="font-weight-bold">Forms API</span><br />
						You’ll find that the REST API has been expanded to include forms created with Umbraco Forms. 
						This means you can create forms (contact forms, questionnaires etc.) directly in the backoffice, 
						complete with conditionals and validation, and get all you need to render these forms in your presentation layer. 
						All you need to do is include a form on a content node using the Form Picker and you’ll see the form data necessary 
						to render the form as part of the JSON response - you can also retrieve forms independent of content. 
						This also includes endpoints for posting form entries, so they will be stored in your Heartcore project and can utilise multi-step workflows.
						<br /><br />
						<span class="font-weight-bold">Content filtering</span><br />
						The REST API also includes a new endpoint for content delivery that lets you do more advanced filtering. 
						Previously, if you wanted to filter content based on a search term, you could utilise the search endpoint. 
						This is still possible, and useful, but if you want to be more precise and filter the content server side before it’s returned, 
						the new filter endpoint might be what you’re looking for. Let’s say you only want to retrieve content of a specific 
						Document Type that contains a specific phrase in a specific property.</p>
					<br />
					<h3>What's new on Umbraco Cloud</h3>
					<p>If you have an organisation set up on Umbraco Cloud, you’ll find that the overview of projects and members of an organisation has been 
						given an overhaul to provide you with a better overview. This is done in line with the overall brand “make-over”of the 
						Umbraco Cloud portal which we released in November. You’ll now see easy access to the different views for your organisation in a menu on the left.</p>
					<img class="img-fluid" src="images/cloud-new.png" /><br />
					<br />
					<h3>Upcoming Release: Umbraco Deploy 3.3</h3>
					<p>As mentioned in previous Product Updates we have been working on an improved Partial Restore feature for 
						Umbraco Cloud making it a breeze to get existing projects up and running with real content. 
						This feature is now complete and undergoing the last round of testing. <br />

						We aim to release this on January 7th with a new minor version of Umbraco Deploy. <br />
						
						From this date, all existing projects on Umbraco Cloud can get this by upgrading Umbraco Deploy on the project page and 
						all new projects will be running the latest version of Deploy when it is released. 
						This release will be for version 8 and we’ll release this functionality for version 7 projects as soon as it’s backported and tested.</p>
				</div>
			</div>
		</div>

		<!-- Related story -->
		<div class="container-fluid orange-bg">
			<div class="container">
				<div class="row section">
					<div class="col-md-12 blog-related">
						<h4>Related story:</h4>
						<a href="#">
							<h5>Product Update: Highlights of 2019</h5>
							<p>‘Tis the season to be jolly, launch new products, release new features and plan for next year. 
								Don’t worry, I’m not going to sing it for you, but I’ll take you through recent product news and give you some insight as to what you can expect in December - 
								and the beginning of 2020.<br />
								<span class="font-italic">Written by Sofie Toft</span></p>
						</a>
					</div>
				</div>
			</div>
		</div>		

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

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. This tutorial enables you to use a website template, modify it, and connect the sections that require content management in the Umbraco CMS.

What You Need

To begin this tutorial, you will need to download the Custom Umbraco Template. Clicking the link will automatically download the files to your device.

Installing Umbraco

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

1. Enter your Name, Email, and Password.
2. Click Next.

3. Choose the level of Consent for telemetry data for your Umbraco installation.

4. Click Next.

5. Select the Database Type from the drop-down list.

6. Enter the Database Name.

7. Click Install.

The installation will take a couple of minutes to complete.

Preparing the Custom Umbraco Template Site

1. Unzip the Custom Umbraco Template to a folder on your system. Clicking the link will automatically download the files to your device.

2. 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:

1. Once the installation is complete, you will see the Login screen.

2. Enter the Name and Password used during the installation process. You should see a similar Umbraco Backoffice as the image below:

Creating a Contact Us Page

We will now create a page to display our contact details. For added functionality, you might consider replacing this page with a fully-fledged "Contact Us" form.

Here are some potential solutions:

• Use Umbraco Forms (for non-developers): Umbraco offers an add-on called Umbraco Forms. This tool is ideal for users who aren’t programmers, as it allows editors to create custom forms. You can find more information and purchase the product on Umbraco.com.

• Build Your Own Contact Form (for developers): If you prefer a custom solution, you can build your own contact form using Surface Controllers in Umbraco.

Creating the Document Type and Template

To create a content-only contact page in Umbraco, follow these steps:

1. Go to Settings.

2. Click on ... next to Document Types.

3. Select Create. The Create Document Type dialog opens.

4. Select Document Type with Template.

5. Select an Icon from the list of icons.

6. Click Submit.

7. Enter a Name. Let's call it Simple Content Page.

8. Let's add two fields with the following specifications:

   Group	Field Name	Alias	Data Type
9. Click Save.

10. Go to Templates to view your Simple Content Page template that was created automatically with the Document Type.

    If you do not see the template, try refreshing the page.

11. Open the Simple Content Page template.

12. Select Master Template: No Master and choose the Master template.

13. Click Choose.

14. Add the following HTML after the closing }.

    Copy

    <!-- 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>        

15. 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:

1. Go to Settings.

2. Open the Homepage Document Type.

3. Go to the Structure tab.

4. Click Choose in the Allowed child node types.

5. Select Simple Content Page.
6. Click Choose.

7. Click Save.

Creating the content node

To create a content node:

1. Go to Content.

2. Select ... next to the Homepage node.

3. Click Create.

4. Select Simple Content Page.
5. Enter a name for the Document Type. Let's call it Contact Us.

6. Fill in details for the Page Title and Body Text.

7. Click Save and Publish.

Adding the Document Type Properties

To add the Document Type properties:

1. Go to Settings.

2. Expand the Templates folder from the Templating section.

3. Go to Master and open the Simple Content Page template.

4. Scroll to the <!-- Jumbotron, w title --> (around line 7) section and highlight the text “Umbraco Support” (around line 10).

5. Click Insert and select Value.

   • Select Document Type from the Choose field drop-down list.

   • Select Simple Content Page.

   • Click Choose.

   • Select pageTitle from the Simple Content Page drop-down list.

   • Click Submit.

6. Repeat the same process for the <div class="container"> tag:

   • Highlight the content from the <p> tag (around line 18) to the end of the </p> tag (around line 21).

   • Click Insert and select Value.

   • Select Document Type from the Choose field drop-down list.

   • Select Simple Content Page.

   • Click Choose.

   • Select bodyText from the Simple Content Page drop-down list.

   • Click Submit.

7. Click Save.

Viewing the Contact Us Page

To view the Contact Us Page:

1. Go to Content.

2. Navigate to the Contact Us page.

3. Go to the Info tab.

4. 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 Document Type, do the following:

1. Go to Settings.

2. Expand the Templates folder from the Templating section.

3. Open the Master template.

4. Highlight @Model.Value("footerText") in the footer (around line 51).

5. Click Insert and select Value.

6. Select Document Type from the Choose field drop-down list.

7. Select Home Page.

8. Click Choose.

9. Select footerText field from the HomePage drop-down list.

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

11. Click Submit.

12. Click Save.

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

We've seen how to create a Document Type and its corresponding Template. If you want to create a website containing Home, News, and Contact Us pages, you will need to create a Document Type with a corresponding Template.

You may end up copying the same HTML code into each of these templates, which can be time-consuming and repetitive. In such scenario, you might want to consider creating a new master template.

To create a new master template:

1. Go to Settings.

2. Select the ... next to the Templates folder. Alternatively, click + to open a blank template.

3. Click Create. A template opens up in the content editor.

4. Enter a Name for the master template. Let's call it Master.
5. Click Save.

Using the Master Template

To use the master template:

1. Go to Settings.

2. Expand the Templates folder from the Templating section.

3. Open the Homepage template.

4. Select Master Template: No Master. The Master template dialog opens on the right-side of the browser.

5. Select the template called Master.

6. Click Choose. The Razor code section is updated from Layout = null; to Layout = "Master.cshtml";
7. 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. 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:

1. Go to Settings.

2. Expand the Templates folder from the Templating section.

3. Navigate to the Homepage template.

4. Cut everything from the <!DOCTYPE HTML> (around line 7) to the end of the </div> tag (around line 43) which is the header and navigation of the site to the master template.
5. Click Save.

6. Go to the Master template and paste this HTML markup after the closing curly brace (around line 7).
7. Add @RenderBody() at the end of the markup. This will tell Umbraco to insert the child template's content.
8. Click Save.

9. Repeat the same process for the footer content:

   • Go to the Homepage template and cut everything from the <!-- Footer --> tag (around line 108) to the end of the </html> tag (around line 122) and click Save.

   • Go to the Master template and paste this HTML markup after the @RenderBody() field we've added.
10. 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 such as header or footer, ensure that the templates matches the following:

@using Umbraco.Cms.Web.Common.PublishedModels;
@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage
@{
	Layout = null;
}
<!DOCTYPE HTML>
<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="/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>	

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


		
		<!-- 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>

Now that we have a basic site setup, let us make it multilingual by creating content variations in another language. In this tutorial, we will create a Danish version of the HomePage.

Adding a new language

To add a new language, follow these steps:

1. Go to the Settings section.

2. Go to Languages.

3. Click Create.

4. Select a Language from the dropdown list. In this tutorial, we will pick Danish.

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

6. Select a Fallback Language from the drop-down list.

7. Click Submit.

8. Click Save.

Enabling Language Variants on Document Types and Properties

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

1. Go to the Settings section.

2. Select HomePage from the Document Types folder.

3. Go to the Settings tab and toggle Allow vary by culture
4. Click Save.

5. Go to the Design tab.

6. Click on the Data Type of the Page Title and enable Vary by culture.

7. Click Submit.

8. Click Save.

Adding Culture and Hostnames to the root node of the website

To add culture and hostnames, follow these steps:

1. Go to the Content section.

2. Click on the ... dots next to the Home Page content node.

3. Select Culture and Hostnames.

4. Add a domain for each hostname, like it's done here:

5. 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:

1. Go to the Home Page node. You will find a language dropdown next to the title at the top.
2. Click on the dropdown. You will see a Split view option next to the new language.
3. Click Split view. We can now 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 Vary by culture checkbox.
4. Enter the Name for your content node and the Page Title in the new language.

5. Click Save and Publish.

6. The Ready to Publish window opens providing the option to publish in one or more languages.
7. You can select either one or multiple languages and click Save and Publish.

Viewing the Language Variant on the Browser

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

1. Go to the Content section.

2. Select your new language from the language dropdown above your content tree.

3. Select the Home Page node and go to the Info tab.

4. 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.
5. Click on the link to view the new language node in the browser.

6. Alternatively, you can add the domain name to your localhost in the browser. For example: http://localhost:xxxx/da/

More Information

Further information on multi-language setups can be found in the Multilanguage Setup tutorial.