Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
A guide to creating a basic website using Umbraco
This tutorial is based and tested on the latest version of Umbraco 14.
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.
To follow this tutorial, ensure to complete this section first.
Learn how to create Document Types and understand their purpose.
Discover how to create your first template and set up a content node.
Learn how to integrate CSS and JavaScript into your Umbraco site.
Find out how to connect Document Type Properties (Umbraco Data Fields) to templates to display the editor's data correctly.
Learn how to create a Master Template to streamline the creation of additional pages and reduce repetitive HTML code.
Use the Master Template to generate new page types.
Manage the navigation menu in your template.
Learn how to create a parent page that automatically lists and links to child nodes. Ideal for something like blogs or news sections.
Explore how to expand your basic site by introducing Language Variants to support multiple languages.
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.
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.
To begin this tutorial, you will need to download the Custom Umbraco Template. Clicking the link will automatically download the files to your device.
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 Next.
Choose the level of Consent for telemetry data for your Umbraco installation.
Click Next.
Select the Database Type from the drop-down list.
Enter the Database Name.
Click Install.
The installation will take a couple of minutes to complete.
Unzip the Custom Umbraco Template to a folder on your system. Clicking the link will automatically download the files to your device.
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!
You can log in to Umbraco in two ways:
Once the installation is complete, you will 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:
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
To create a Document Type:
Go to Settings.
Click ... next to the Document Types.
Select Create...
Select Document Type with Template.
Folders can help you organize 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 camelcase. For example homePage.
Click Save. Our new Document Type is now visible as a new item under Document Types.
With the help of icons, you can identify different Document Types in the Content Tree. To add an icon:
Click the icon placeholder next to the document name. The Select Icon dialog opens.
Browse through the icon list and select the icon of your choice.
Click Submit.
Click Save.
To create a Document Type at the root of the Content Tree:
Go to the Structure tab.
Toggle the Allow at root button.
If Allow at root is not enabled on the Document Type, you cannot create any content on your site.
Click Save.
To add properties to your Document Type, follow these steps:
Go to the Design tab.
Click Add Group.
Enter a Name for the group. For this tutorial, we will call it Content.
Click Add property. The Add property dialog opens.
Enter a Name. For example: Page Title.
Enter a Description. For example: The main title of the page (Welcome to Widgets Ltd.).
Click Select Property Editor.
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 4 to 9 to add a Body Text using the specification below:
Click Add Group to create a new group called Footer. Repeat Steps 4 to 9 to add a Footer Text 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 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:
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.
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.
If you do not see the template, try refreshing the page.
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.
Paste the template code, while leaving the code that is already there.
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.
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 Content in the tree.
Click Create.
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.
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.
To view your content on the frontend:
Go to the Info tab in the Homepage content node.
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.
If you see a blank page, check if the template is entered and remember to save it.
Name | Body Text |
---|---|
Name | Footer Text |
---|---|
Layout = "null";
- The view will not use a layout page unless explicitly specified. For more information on , see the Microsoft Documentation.
We are using the files from the folder. Clicking the link will automatically download the files to your device.
Name | Description |
---|
Description
The main content of the page.
Data Type
Richtext Editor
Description
Copyright notice for the footer.
Data Type
Textstring
Page Title | Welcome to Widgets Ltd |
Body Text | Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et aliquet ante, ut eleifend libero.
Sed est ligula, maximus in dolor sed, lacinia egestas ligula. Donec eu nisi lectus. Morbi pharetra pulvinar arcu non gravida. |
Footer Text | Copyright Widgets Ltd 2024 |
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.
To set the Document Type properties:
Go to Settings.
Open the Homepage template.
Scroll down to the <!-- Jumbotron, w title -->
section (around line 45) and highlight the text “Welcome - UmbracoTV”
(around line 48).
Click Insert and select Value.
Select Document Type from the Choose field dropdown list.
Select HomePage.
Click Choose.
Select pageTitle field from the HomePage dropdown list.
Click Submit.
Go to the content between the <div class="container">
tags (around line 60 to 77):
Highlight the content as shown in the figure.
Repeat steps 4 to 9 to insert the bodyText field.
Go to the content between the <div class="container-fluid footer">
tag (around line 148 to 181):
Highlight the content between the <div class="container">
tags.
Repeat steps 4 to 9 to insert the footerText field.
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.
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:
Go to Settings.
Select the ... next to the Templates folder. Alternatively, click + to open a blank template.
Click Create. A template opens up in the content editor.
Enter a Name for the master template. Let's call it Master.
Click Save.
To use the master template:
Go to Settings.
Expand the Templates folder from the Templating section.
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.
Click Choose. The Razor code section is updated from Layout = null;
to Layout = "Master.cshtml";
Click Save.
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:
Go to Settings.
Expand the Templates folder from the Templating section.
Navigate to the Homepage template.
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.
Click Save.
Go to the Master template and paste this HTML markup after the closing curly brace (around line 7).
Add @RenderBody()
at the end of the markup. This will tell Umbraco to insert the child template's content.
Click Save.
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.
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:
You can set up the navigation menu in two ways:
To create dynamic navigation links from the published content nodes, follow these steps:
Go to Settings.
Expand the Templates folder from the Templating section.
Open the Master template.
Locate the <!-- Navigation -->
tag (around line 20).
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:
This snippet needs to be merged with the navigation above it.
Wrap the <ul>
tag inside the <div class="container">
and <nav>
tags.
The final result will look like this:
Click Save.
To add a basic hardcoded navigation, follow these steps:
Go to Settings.
Expand the Templates folder from the Templating section.
Open the Master template.
Go to the <!-- Navigation -->
tag (around line 20).
Copy the content within the <div>
tags (around line 21 to 43) and replace it with the following code:
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.
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:
To create a content-only contact page in Umbraco, follow these steps:
Go to Settings.
Click on ... next to Document Types.
Select Create. The Create Document Type dialog opens.
Select Document Type with Template.
Select an Icon from the list of icons.
Click Submit.
Enter a Name. Let's call it Simple Content Page.
Let's add two fields with the following specifications:
Click Save.
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.
Open the Simple Content Page template.
Select Master Template: No Master
and choose the Master template.
Click Choose.
Add the following HTML after the closing }
.
Click Save.
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.
Go to the Structure tab.
Click Choose in the Allowed child node types.
Select Simple Content Page.
Click Choose.
Click Save.
To create a content node:
Go to Content.
Select ... next to the Homepage node.
Click Create.
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.
To add the Document Type properties:
Go to Settings.
Expand the Templates folder from the Templating section.
Go to Master and open the Simple Content Page template.
Scroll to the <!-- Jumbotron, w title -->
(around line 7) section and highlight the text “Umbraco Support”
(around line 10).
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.
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.
Click Save.
To view the Contact Us Page:
Go to Content.
Navigate to the Contact Us page.
Go to the Info tab.
Click the link to view the page.
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:
Go to Settings.
Expand the Templates folder from the Templating section.
Open the Master template.
Highlight @Model.Value("footerText")
in the footer (around line 51).
Click Insert and select Value.
Select Document Type from the Choose field drop-down list.
Select Home Page.
Click Choose.
Select footerText field from the HomePage drop-down list.
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.
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.
Create two new Document Types with template: Articles Main and Articles Item.
To create Articles Main Document Type, follow these steps:
Go to Settings.
Click ... next to the Document Types in the Settings tree.
Select Create....
Select 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:
Click Save
To create Articles Item Document Type, follow these steps:
Go to Settings.
Click ... next to the Document Types in the Settings tree.
Select Create....
Select 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
To add Articles Main as a child node:
Navigate to the Home Page Document Type.
Go to the Structure tab.
Select Choose in the Allowed child node types.
Select Articles Main.
Click Choose.
Click Save.
To update Articles Main Document Type permissions:
Navigate to the Articles Main Document Type.
Go to the Structure tab.
Select Choose in the Allowed child node types.
Select Articles Item.
Click Choose.
Click Configure as a collection.
Select List View - Content.
Click Save.
To add a content node:
Go to Content.
Select ... next to the HomePage node.
Click Create.
Select Articles Main.
Enter the name for the article. We are going to call it Articles.
Enter the content in the Article Title and Article Body Text fields.
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.
Click Create Articles Item.
Enter the name for the article. We are going to call it Article 1.
Enter the content in the Article Title and Article Content fields.
Repeat steps 8 to 10 to create Article 2.
Click Save and Publish.
To update the Articles Main template, follow these steps:
Go to Settings.
Expand the Templates folder in the Templating section.
Open the Articles Main template.
Select Master in the Master template:No Master field.
Click Choose.
Click Save.
Open the Custom Umbraco Template folder.
Copy the contents of Blog.html.
Paste the content into Articles Main below the closing curly brace "}".
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.
Remove everything from the <!-- Footer -->
tag (around line 83) to the end of the </html>
tag (around line 130)
Replace the static text within the <h1>
tags (around line 12) with the Model.Value reference to articlesTitle.
Replace the static text within the <div>
tags (from line 23 to 29) with the Model.Value reference to articlesBodyText.
Define a query for all articles below the <h3>
tag (around line 30) of the <!-- Latest blog posts -->
section.
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:
If you've set the correct parameters, you will get a preview of the items being selected with the query.
Click Submit.
You will see a similar code snippet added to your template:
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:
Remove the <ul>
tags surrounding the foreach loop.
Click Save.
To update the Articles Item template, follow these steps:
Go to Settings.
Expand the Templates folder in the Templating section.
Open the Articles Item template.
Select Master in the Master template:No master field.
Click Choose.
Click Save.
Open the Custom Umbraco Template folder.
Copy the contents of Blogpost.html.
Paste the content into Articles Item below the closing curly brace "}".
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.
Remove everything from the <!-- Footer -->
tag (around line 113) to the end of the </html>
tag (around line 160)
Replace the static text within the <h1>
tags (around line 13) with the Model.Value reference to articleTitle.
Replace the static text within the <div>
tags (from line 25 to 39) with the Model.Value reference to articleContent.
Click Submit.
Click Save.
Check your browser, you should now see something similar to the screen below.
: 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.
: 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.
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 .
Build Your Own Contact Form (for developers): If you prefer a custom solution, you can build your own contact form using in Umbraco.
Group | Field Name | Alias | Data Type |
---|
Group | Field Name | Alias | Data Type |
---|
Group | Field Name | Alias | Data Type |
---|
Content | Page Title | pageTitle | Textstring |
Content | Body Text | bodyText | Rich Text Editor |
Intro | Articles Title | articlesTitle | Textstring |
Intro | Articles Body Text | articlesBodyText | Rich Text Editor |
Content | Article Title | articleTitle | Textstring |
Content | Article Content | articleContent | Rich Text Editor |
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.
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
.
To add a new language, follow these steps:
Go to the Settings section.
Go to Languages.
Click Create.
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 Submit.
Click Save.
To enable language variants on Document Types, follow these steps:
Go to the Settings section.
Select HomePage from the Document Types folder.
Go to the Settings tab and toggle Allow vary by culture
Click Save.
Go to the Design tab.
Click on the Data Type of the Page Title and enable Vary by culture.
Click Submit.
Click Save.
To add culture and hostnames, follow these steps:
Go to the Content section.
Click on the ... dots next to the Home Page content node.
Select Culture and Hostnames.
Add a domain for each hostname, like it's done here:
Click Save.
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 on the dropdown. You will see a Split view option next to the new language.
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.
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 Save and Publish.
To view the language variant on the browser, follow these steps:
Go to the Content section.
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 node in the browser.
Alternatively, you can add the domain name to your localhost in the browser. For example: http://localhost:xxxx/da/