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:
- 1.Go to Settings.
- 2.Expand the Templates folder in the Templating section of the tree. You should see a template titled HomePage.
- 3.Open the template. It will contain a little bit of Razor code.Home Page Template
- 4.Leaving the code that's there (if you don't understand it, don't worry!) let's copy our template code in.
- 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.
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 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.
Home Page Content Node - 3.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.
- 4.Enter the following details:NameDescriptionPage TitleWelcome to Widgets LtdBody TextLorem ipsumLorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et aliquet ante, ut eleifend libero.
- Proin eleifend consequat nunc id vulputate.
- Ut eget lobortis metus, non congue lorem.
- Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
- Maecenas tempus non lectus rhoncus efficitur.
Sed est ligula, maximus in dolor sed, lacinia egestas ligula. Donec eu nisi lectus.Morbi pharetra pulvinar arcu non gravida.Footer TextCopyright Widgets Ltd 2019 - 5.Click Save and Publish. The content tree will reload with the homepage node.
- 1.Select Info in the Homepage content node.
- 2.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.

An Unstyled Homepage
Last modified 13d ago