Umbraco CMS
11.latest
CloudHeartcoreDXPMarketplace
Search
⌃K
Links

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. 1.
    Go to Settings.
  2. 2.
    Expand the Templates folder in the Templating section of the tree. You should see a template titled HomePage.
  3. 3.
    Open the template. It will contain a little bit of Razor code.
    Home Page Template
  4. 4.
    Leaving the code that's there (if you don't understand it, don't worry!) let's copy our template code in.
  5. 5.
    Open the Custom Umbraco Template folder and copy the contents of index.html.
  6. 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. 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. 1.
    Go to Content.
  2. 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. 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. 4.
    Enter the following details:
    Name
    Description
    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.
    • 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 Text
    Copyright Widgets Ltd 2019
  5. 5.
    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:
  1. 1.
    Select Info in the Homepage content node.
  2. 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
Previous
Document Types
Next
CSS and Images
Last modified 13d ago