Exploring the different templates and layouts available in Umbraco
06/09/2023
Umbraco is a powerful and flexible content management system (CMS) that allows developers to create and manage websites. One of the key features of Umbraco is its ability to provide a wide range of templates and layouts, allowing developers to create unique and visually appealing websites. In this article, we will explore the different templates and layouts available in Umbraco and how they can be used to enhance the development process.
Types of Templates
Umbraco offers several types of templates that developers can choose from based on their specific requirements. These templates include:
1. Master Templates
Master templates in Umbraco serve as the base for all pages on a website. They contain the common elements such as the header, footer, and navigation that are shared across all pages. By using master templates, developers can ensure consistency and save time by not having to recreate these elements for each individual page.
2. Content Templates
Content templates are used to define the structure and layout of the content on a page. They allow developers to specify the different sections and placeholders where content can be added. Content templates provide a high level of flexibility, as they can be customized for each page based on its unique requirements.
3. Partial Templates
Partial templates are reusable components that can be included within other templates. They are ideal for elements such as sliders, banners, or sidebars that appear on multiple pages. By using partial templates, developers can avoid duplicating code and make updates to these components in one place, which will be reflected across all pages where they are used.
4. Error Templates
Error templates are used to handle error pages, such as 404 or 500 errors. These templates allow developers to provide a user-friendly and consistent experience when a user encounters an error on the website. By customizing error templates, developers can add relevant information and suggestions for the user to navigate back to the desired content.
Creating and Managing Templates
Creating and managing templates in Umbraco is a straightforward process that can be done through the Umbraco backoffice. Here are the steps to create and manage templates:
1. Creating Templates
To create a new template in Umbraco, follow these steps:
- Log in to the Umbraco backoffice.
- Navigate to the "Settings" section.
- Select "Templates" from the left-hand menu.
- Click on the "Create" button to create a new template.
- Choose the type of template you want to create (e.g., Master, Content, Partial).
- Enter a name and optional description for the template.
- Customize the template by adding the necessary HTML, CSS, and JavaScript.
- Save the template.
2. Managing Templates
Once templates are created, they can be easily managed in Umbraco. Here are some common tasks involved in managing templates:
- Editing Templates: To make changes to an existing template, navigate to the "Templates" section in the Umbraco backoffice, locate the template you want to edit, and click on the "Edit" button. Make the necessary changes and save the template.
- Deleting Templates: To remove a template from Umbraco, navigate to the "Templates" section, locate the template you want to delete, and click on the "Delete" button. Confirm the deletion when prompted.
- Assigning Templates: To assign a template to a page, navigate to the "Content" section in the Umbraco backoffice, locate the page you want to assign the template to, and select the desired template from the "Template" dropdown menu.
Customizing Templates with Razor Syntax
Umbraco allows developers to customize templates using Razor syntax. Razor is a programming language that enables the embedding of code within HTML markup. By using Razor syntax, developers can dynamically generate content and make use of logic and variables in their templates.
Here is an example of how Razor syntax can be used to customize a template in Umbraco:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>@CurrentPage.Name</title>
</head>
<body>
<header>
<h1>@CurrentPage.GetPropertyValue("pageTitle")</h1>
</header>
<nav>
<ul>
@foreach (var page in Model.Children)
{
<li><a href="@page.Url">@page.Name</a></li>
}
</ul>
</nav>
<div>
@Html.Raw(CurrentPage.GetPropertyValue("bodyText"))
</div>
<footer>
<p>Copyright
Contact us
Spanning 8 cities worldwide and with partners in 100 more, we’re your local yet global agency.
Fancy a coffee, virtual or physical? It’s on us – let’s connect!
Centric is in the business of reshaping the future. Our groundbreaking solutions and visionary designs revolutionize industries, turning ideas into realities that captivate audiences and catapult brands to the forefront of their markets.