Custom Umbraco Template Development
A client comes with a task: "I need an Umbraco site but ready-made themes don't fit — I need custom Umbraco template development for a non-standard structure." We don't take a template from the marketplace: we write Razor views, controllers, and View Components from scratch for a specific Document Type. No extra markup, no hacks — only what the project needs. Custom template loads pages 40% faster than a ready-made solution due to minimized requests and bundle splitting.
How to customize a template without losing performance?
The first step is to sort out the Layout. Each page inherits the common layout, but if too much logic is stuffed into it, TTFB suffers. We move static parts (header, footer) into separate partials, and dynamic ones via @await Component.InvokeAsync(). This enables partial caching and reduces database load. For example, on one project LCP dropped from 2.8 s to 1.1 s after Layout refactoring.
According to Google Core Web Vitals recommendations, LCP should be under 2.5 seconds. Base layout:
@* Views/Shared/_Layout.cshtml *@ @using Umbraco.Cms.Web.Common.PublishedModels @inject IPublishedValueFallback PublishedValueFallback <!DOCTYPE html> <html lang="@System.Threading.Thread.CurrentThread.CurrentCulture.TwoLetterISOLanguageName"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>@ViewData["Title"] – @ViewBag.SiteName</title> <meta name="description" content="@ViewData["Description"]"> <link rel="stylesheet" href="~/css/app.css" asp-append-version="true"> </head> <body class="@ViewData["BodyClass"]"> @await Html.PartialAsync("_Navigation") <main>@RenderBody()</main> @await Html.PartialAsync("_Footer") <script src="~/js/app.js" asp-append-version="true" defer></script> @RenderSection("scripts", required: false) </body> </html> A common scenario: the client wants a custom h1 title and SEO description on every page. We solve it with a strongly-typed model mapped from IPublishedContent. We use Umbraco Mapper to automate conversions (more details in Umbraco documentation).
Example article controller in C#:
public class ArticleController : RenderController { private readonly IUmbracoMapper _mapper; private readonly IRelatedContentService _relatedService; public ArticleController(ILogger<ArticleController> logger, ICompositeViewEngine viewEngine, IUmbracoContextAccessor umbracoContextAccessor, IUmbracoMapper mapper, IRelatedContentService relatedService) : base(logger, viewEngine, umbracoContextAccessor) { _mapper = mapper; _relatedService = relatedService; } public override IActionResult Index() { if (CurrentPage is not Article article) return NotFound(); var model = new ArticleViewModel { Title = article.Title, BodyHtml = article.Body?.ToString(), PublishDate = article.PublishDate, SeoTitle = article.SeoTitle, SeoDescription = article.SeoDescription, CoverImage = article.CoverImage?.First() as IPublishedContent, Category = article.ArticleCategory?.First() as IPublishedContent, RelatedArticles = _relatedService.GetRelated(article, 3), }; return CurrentTemplate(model); } } Why choose custom Umbraco templates over ready-made solutions?
| Criteria | Ready-made template | Custom template |
|---|---|---|
| Performance | Often overloaded with unnecessary scripts | Minimal requests, optimized Partial Views |
| SEO structure | Fixed markup, difficult to change | Full control over HTML, headings, microdata |
| Loading speed | LCP may be > 2.5 s due to bundles | Bundle splitting, lazy images via ImageSharp, WebP |
| Extensibility | Any modification requires hacks and patches | Clean architecture, Repository pattern, easy to add blocks |
The table shows that a custom template wins on all key metrics. Additionally, savings on licenses and support can be up to 30% compared to a ready-made solution. The cost of a custom template is lower than buying and constantly modifying a ready-made one. Development timelines are transparent and fixed in the technical specification.
Umbraco template customization process
- Analysis: study Document Types, content structure, performance requirements.
- Layout design: create a layout, define areas for Partial Views.
- Controller development: write strongly-typed ViewModels with dependency injection for each Document Type.
- Block implementation: configure Block List / Block Grid with custom partials, integrate ImageSharp for adaptive images.
- Testing: check Core Web Vitals, eliminate N+1 queries, configure caching.
- Deployment: hand over code, documentation, and access.
Development stages and timelines
| Stage | Duration |
|---|---|
| Analysis and audit | 1–2 days |
| Layout design | 1–2 days |
| Controller development | 2–4 days |
| Block implementation | 3–5 days |
| Testing and optimization | 1–2 days |
| Deployment and documentation | 1 day |
Typical mistakes when customizing Umbraco templates
N+1 query — each Hero block loads an image independently. Solution: inject an image service into the controller and pass ready-made URLs.
Hydration mismatch — when caching partial views, data becomes stale. Use [OutputCache(NoStore = true)] on dynamic components.
Navigation duplication — multi-level menu with separate templates for each level. Instead, use a single recursive partial _Navigation.
Example recursive navigation
@* Views/Partials/_Navigation.cshtml *@ @using Umbraco.Cms.Web.Common.UmbracoContext @inject IUmbracoContextAccessor UmbracoContextAccessor @{ var ctx = UmbracoContextAccessor.GetRequiredUmbracoContext(); var root = ctx.Content?.GetAtRoot().FirstOrDefault(); var nav = root?.Children.Where(n => n.Value<bool>("showInNav")); } <nav class="main-nav"> @foreach (var item in nav ?? []) { <a href="@item.Url()" class="@(item.IsAncestorOrSelf(ctx.PublishedRequest?.PublishedContent) ? "active" : "")"> @item.Name </a> } </nav> What is included
- Layout and Partial View development (navigation, footer, pop-ups)
- Strongly-typed ViewModel models for each Document Type
- Controllers in C# with dependency injection
- Block editor (Block List / Block Grid) with custom partials
- View Components for macros (breadcrumbs, menus, widgets)
- Adaptive images with WebP and srcset
- Minimal Umbraco markup using Tailwind or CSS Grid — upon agreement
- Documentation and access (admin panel, FTP, repository)
Timelines and cost
Timelines depend on the number of page types and block complexity. We work within the range:
- Basic set (Layout + 5–6 page types + blocks): 2–3 weeks.
- One complex template with a custom controller and caching: 3–5 days.
The cost is calculated individually after an audit of the current structure. We don't name a price blindly — first we get to know the project. We'll assess your project in 1 business day and provide an accurate estimate and timeline. Our experience of 7+ years and 50+ Umbraco projects guarantees predictable results. Contact us to discuss details — get a free consultation. Order custom Umbraco template development — get performance tailored to your project.