The new uMazel Starter Kit for Umbraco 8

t's here. We promised that we would release the uMazel Starter Kit for Umbraco v8 and we did (although awfully late, but for good reasons). For those already familiar with the previous version, this is a huge update. For those who see it for the first time, this is a so-called "low-code" Starter Kit - meaning that we've tried to have as much configuration as possible via the back office so that you won't need to write custom code to adapt things to your liking. At least most of the time.

One of the reasons for the delay was that we decided to wait until content blocks were introduced in Umbraco, and then converted the whole kit to use them. Content blocks are a long-awaited alternative to Nested Content and, of course, a desired alternative to using subnodes for content elements.

For your information, our own website was made with the uMazel Starter Kit. So what you're reading right now about it is actually made with it. Inception!

So what does this Starter Kit do?

The uMazel Starter Kit combines functionality that we've been generally using in our projects with features specific to the Mazel HTML template (which the Starter Kit is based on). It features a series of "sections" or "building blocks" that can be freely placed within a page to shape it exactly as you want.

Each page you create on the site is actually a placeholder for such sections, ranging from icon lists to galleries to counters to text content. On top of that, you can also use "intro" sections (such as a slider, a full-screen image or a video) for your home page or any other page.

Page Features

Pages also feature a set of properties themselves, allowing you to define Open Graph and Meta tags, redirections, sitemap settings, scripts, titles etc.

You can have a set of different page titles for each individual page, allowing you to use different literals for menus, breadcrumbs, headers, and browser title. You can add Meta and Open Graph tags to your page or set default ones from Site Settings (a special set of nodes that contain settings for the whole site), and even have those tags inherited to child pages if needed.

Scripts can also be placed on each page individually, or globally on all pages, and they can be categorized according to the type of cookies they emit (if any) so that when you choose to customize cookie options on the (new!) cookie consent prompt, you can exclude or include selected cookie categories - also enabling or disabling scripts that belong to those categories.

You can also set up redirections for each page from within the back office. Each page can redirect to its first sub-page, another specific page, or an external URL, and redirections can be set up as temporary or permanent.

You can define Open Graph and Meta tags for each page individually or have defaults for all pages, have Meta tags copy their values from OG tags, and inherit specific OG tags to child pages.

Each page can also have a header image (which is dictated by the specific theme), allowing you to specify a dark or light overlay, make it larger or smaller in height, show or hide breadcrumbs, set up a title, subtitle, and description and control whether titles and menu elements will be light or dark. You can have the header image and/or titles inherited on child pages.

Block Elements Features

We've added two interesting features to Block Elements or ("sections") that can help you with content editing: The first one is that you can enable or disable a section (similar to publishing/unpublishing a node). The second is that if your section contains sub-elements (for example, a FAQ section containing questions) then you are able to see the number of items contained in it. Finally, we've added preview images to the Block Picker as a nice touch.

All sections can be animated (based on the original HTML theme's functionality), and you can set this up in the Settings tab, along with other general settings like padding and margins.

Responsive Images

One of the things that give headaches to most web developers is optimal image sizes, especially when viewed in smaller viewports. We've developed a library that allows for dynamic resizing/cropping of images on the server, combined with automatically generated media queries, so that you get smaller images in smaller viewports, even when they're background ones (focal point is preserved at all times). This is controlled via an XML configuration file and also supports 2x and 3x. There's also a max image resolution restriction, so you can upload this 20MB image knowing that it won't ever get on the site with a 5000x5000 size (unless needed!)

Blog

The Starter Kit features a complete blog engine with posts, authors, categories, tags, and RSS feeds (global and per category). The blog has been vastly improved, and can now feature 1,2, or 3-column layouts on the blog list page, while optionally adding a side bar with categories, newest posts and popular tags on the left or right.

Product List

New to uMazel 2.0, this set of pages can be used to create a product list (with a 2, 3, or 4-column layout). There is a variety of options for the products - you can use custom currencies, discounted prices, hide prices entirely, create a feature list for each product, have an image gallery for each product, etc. A nice addition is a custom view featuring product photos in the back office so that editors can navigate products quickly.

Site Search

Examine-based Site Search is now an integral part of the Starter Kit. You can optionally define your own Search Indexer for this (it will use the ExternalIndexer by default). You can also exclude individual pages or whole hierarchies from search.

XML Sitemap

The site map for each site is created dynamically, and you have full control over which pages (or hierarchies of pages) to exclude from it. You can specify the indexing priority attribute per page. If your installation features multiple sites (that is, multiple home pages) you can even create a Site Map Index page that will include them all.

Cookie Consent

As mentioned earlier, we've got an all-new customizable Cookie Consent dialog, which can also point users to a special page where they can select what cookie categories to allow. Cookies are also emitted from scripts, so scripts defined in the Starter Kit back office can be categorized (as Marketing, Statistics etc.) and loaded according to user preferences.

Other Features

In this version, we've added a custom 404 page which you can shape as you like, as well as the ability to disable the loading animation for pages. We've also added invisible ReCaptcha to the contact form.

As in the previous version, AutoNode works for you, automatically creating nodes when you publish specific items like a new home page, or a new blog root page, and VirtualNodes can take care of URL segments you need to hide (as happens to the "Posts" folder when you browse to a blog post).

Experimental

We've added a couple of more features in this Starter Kit to make your life easier than editors, such as:

The ability to swap the current font with a Google Font by just specifying the Google Font's URL in the back office. This is for testing and preview purposes only, since it has a significant performance hit.

The ability to change the back office login background and daily messages from within the Umbraco back office.

A context menu option on the home page that allows you to toggle between hiding/showing unpublished variants from the content tree if you're going multi-language and have a lot of stuff that is not yet published.   

The uMazel Starter Kit is free for you to use as you like. 

Click here to download the uMazel Starter Kit 2.0 for Umbraco 8 from Our Umbraco.

Click here to see a demo site with all uMazel sections and features.