Skip to main content

Chief Strategy Officer, Kyle Brigham, provides an in-depth look at the Umbraco CMS, walking through some of the most exciting features and components of "the friendly CMS".

Introduction to Umbraco

Hello everyone and thank you for joining this Umbraco 8 demo. My name is Kyle and I am Director of Strategy at Marcel Digital. I’d love to walk you through all of the benefits and features that Umbraco 8 has to offer today. So I’m going to be going over most of the high level features, I won’t be going into all of the features that Umbraco has to offer, but I will sort of give you a sense of the Umbraco back-end and show you how it can be configured and then show you sort of what a starter pack looks like as well.

The Basic Layout of Umbraco

So with that being said I’ll jump right in. What you’re staring at here is a demo website that we put together. We made it kind of look like our own website but it’s full of a bunch of dummy content. Just to give you a sense of some of the features and how they can lay out. This is the homepage with a few modules here and I’ll show you what this looks like in the back-end.

So I’m going to jump over to the back-end of Umbraco. This is what Umbraco looks like, this actually has multiple websites because we’ve done multiple demos in the past. So each one of the houses on the left-hand side is a site, today we’re going to focus on the “Marcel Digital Demo”. So you’ll see that there are a lot of pages underneath here. I only have a few of them published, but just to give you a sense of the breadth of Umbraco and what you could do. You could build out as many pages as you’d like, it is built entirely on an intuitive folder structure so you can keep everything nice and organized. You can create your own navigation which I will show you here shortly, but you can also have it such that it follows the hierarchy of the folder structure as well.

A Content Management System Customizable to Your Needs

It is a very intuitive UI. Umbraco is completely customizable to your needs, so what you’re looking at here is actually an implementation of a starter pack called uSkinned. uSkinned is a theming engine for Umbraco that has its own layouts and its own content options, but it is pretty indicative of what you can do with Umbraco. Just imagine that you can really build out custom content modules yourself for your own needs, this just sort of has a library of the most commonly used content elements such that you can build a site very quickly. So we’re going to use this today just to show you some of the options that Umbraco has to offer.

The Umbraco Block Editor

What you’re looking at here is the homepage of the website that I just showed you. This is the page builder. The nice part about the page builder and, you know, the page components are that you can really drag and drop your website and you can really have lot more control over the options on the website than you could with a lot of standard content management systems where perhaps you have to know some HTML or some CSS and they are perhaps a little bit clunky. This tries to make it as simple as possible such that editors can make those changes themselves and have options to make adjustments to those content elements. You’ll see here there are a lot of different options. Again, I’ll just give you a reminder of what the homepage looks like.

Each one of these content modules aligns with the content modules in the main content section here. So I’ll show you a couple of these very briefly. The banner, right now I have a static image. You could have that be a video if you’d like, you could have that be a heading, secondary heading, text. You can also add a CTA button. But you’ll see here that there’s a lot of settings to change the look and feel of that banner as well. So you can change colors, you can change the banner style, text alignment, there’s a lot of different options that hopefully give you the ability to customize it as much or as little as you’d like.

Another quick one here is the pods. So we have a couple of text images that are laying out our products across the bottom there. It’s just a brief image with some text. We have some windows here, so this just gives you a sense of some of the different layouts that you can do, and then a subpage listing at the bottom. So we chose to show our latest blog posts so that people can always stay up to date with our content. Then of course you have a CTA and a footer as well, all managed by the content management system.

You’ll see that there are a lot of other tabs up here. I won’t go into detail on all of those today, again this is just a high level overview, but you’ll see that you do have the ability to make more adjustments to a lot of this content to really get down into the weeds if you’d like to make it exactly how you’d like to make it.

Umbraco: The SEO Friendly CMS

They also have some out of the box SEO and sharing functionality, so oftentimes we get asked “well what capabilities does Umbraco have from an SEO standpoint?” Really it’s a completely SEO friendly content management system. So it does give you the ability to change page titles, meta descriptions, images, you know, if you want to get in even deeper you can build this out for yourselves or for an SEO agency partner to help you optimize these pages even further. Then there’s a couple of advanced features here as well.

Multiple Layouts for Multiple Applications

So just jumping over to another page on the website, um I’ll just jump over to our services. Our services is just another layout utilizing those components that I just showed you. So this utilizes a banner, a brief little intro text, some split components, and then right down to that global CTA component as well. All of these components, again, this is not by any means showcasing our designs or the ability that it has. You can really blow this up and make it a lot more ad hoc or avante garde if you’d like. This is really just utilizing some of those standard components to build out a website very quickly so you can see how they all layout.

But I’ll just jump over and show you another layout of what these pages could look like. Again, I’m just jumping over to “Our Services”. I mentioned there’s a banner, there’s some text, and then there’s a few split components here that have an image on side that I have selected, and then text on the other that I have typed in here for Search Engine Optimization. The other cool thing about each of these content items is that they all sort of have their own options that are completely customizable. So out of the box, uSkinned gives you all of these options but if we were building this custom for you, we could really design these options around your internal workflows to make things more efficient for you as well.

This could even provide you with an omnichannel approach as well where perhaps you are changing some of the options depending on the channel that you’re publishing to so that could be desktop or mobile or tablet or even email. So this gives you a sense of what some of those options look like.

Building Content Templates

One other item to note is for each one of these pages, uh I just right-clicked here, you can see some of the other options you have for each page so I can create a page. But one of the really cool things is if you have a content template that you’re looking to duplicate or replicate on a regular basis like landing pages or you have multiple services you want to add, you can actually go ahead and create a content template out of a page that you’ve already built. This will allow you to utilize a template library and quickly build pages rather than having to go back and rebuild that page every single time.

I can also move this page very easily to another section, I can copy it so if I’ve built out a one-off page that I don’t necessarily want to turn into a content template, but I do want to utilize it again, I can copy this page and move it to another section of the website. You can sort just for easy management of this website and then there’s a few other options here as well.

A Quick Note On User Management & User Groups

One that I’d like to point out and I’ll show here in just a little bit is user management. So Umbraco is really great about permission-based user management throughout the entire content management system where you can provide users different access to the website based on their needs. So you may have an admin that needs to control everything, you may have a user that only needs to manage the blog, they may only need to manage a single page. Umbraco really gives you the ability to create that hierarchy such that it can fit your organization and make sure that people are only touching pages that they really should be touching.

Blogging In Umbraco

With that being said, I’m going to hop over here to the blog as well, this is another section that we built out on the website. Right now this kind of shows some latest blog posts that’s all just, again, filler content so none of this is real, but Umbraco can be utilized as a blogging platform so you can build out categories, you can build out your authors, you can build out individual posts. This will allow you to keep content fresh on your website but also keep them organized by topics on your website as well. It’s a very basic blogging platform, but it is out of the box ready for blogging and ready to categorize with your categories and with your authors as well.

Page Preview & Device Testing

Another really neat feature of Umbraco is the ability to preview your pages on multiple devices before you push them live. If I go back to the services pages that I showed earlier - let’s pick one for search engine optimization - you’ll see I have my page built out here. Just to remind you what that looks like… Here’s my page on desktop right now.

Hypothetically, let's say I wanted to see what it looks like on mobile. What I can do with this page is I can actually save and preview, and what Umbraco is going to do is build out a preview of this page and then allow me to look at it in multiple versions. So I can look at desktop, laptop, tablet - let’s see maybe what a smartphone looks like. It gives you a sense of what it will look like and what line breaks look like on mobile.

Because search engines are mobile forward right now, certainly they are mobile first, we want to make sure that these pages look good on mobile as well. Umbraco out of the box is responsive so it is built on the latest responsive technology, but just in case, especially for your most important pages, this gives you the option to preview those before you push them live. And I can switch it over here to, let’s see, tablet portrait so you can kind of see what those look like. I’m just going to hop back over to the website here. So that gives you the ability to save and preview. 

Quickly Editing Images With the Media Editor

One other really neat feature of Umbraco is the media editor. If you upload an image to Umbraco, you want to make sure that obviously you aren’t uploading gigantic images, but one of the frustrations of certain content management systems is uploading an image and not having it fit appropriately across the website.

One of the things you can do with Umbraco is you can choose an image and you can actually edit it and change the focal point across all of the ways that it might be displayed on the website. I can change the focal point universally and you’ll see that it changes for each one of these, but if I want to change that focal point specifically for an application on the website I can choose that particular application and I can change the scalability, the focal point, and it will only save it for that one section so I can make sure that the image is always showing up appropriately throughout the entire website, and make sure that I’m not accidentally creating an image that is being cut off in a weird spot.

Typically with older content management systems you’d have to download that image, drop into photoshop, change the sizing, re-upload, and it was very much a nightmare in efficiency. Umbraco allows you to do that all in one spot, very quickly, and very efficiently. So I’m going to save and close that.

Changing Themes In Umbraco With uSkinned

Specifically with uSkinned, uSkinned gives you the ability to change your themes very quickly so you can change the look and feel, the fonts - that’s all held underneath a global theme settings. With this particular installation of Umbraco I’ll show you very briefly what some of those look like.

This is utilizing a design style from the uSkinned website. You can actually set up multiple themes or multiple layouts for your website if you have, let’s say, a multisite installation and you want the ability to quickly spin up a new site that has a different color or a different theme or a different layout. You can quickly change out the theme of your website and it will automatically change out all the fonts and all the layouts and all the colors for you. So that is one of the advantages, particularly of using a theming engine, but if you have a custom build you’ll have the ability to create all of those options with your development team.

Umbraco Is Scalable

Again, one of the benefits of Umbraco is how absolutely scalable it is. So everything you see here is one implementation but this could be implemented in whatever way works best for your team so you can expand on these options, remove some of these options, you can think about new content modules, new ways of utilizing these settings. There’s a lot of really great ways that you can expand upon what’s already here.

Organizing and Storing Your Media

That being said I’m going to jump over very quickly here to the media section. The media section - you’ll see we have a lot of different items in here - it sort of gives us the ability to organize all of our media into folders. Interestingly enough, there are some content management systems out there - some very mainstream content management systems - that don’t allow you to organize your images into folders or really any way for that matter. It is nice to have the ability to quickly drag and drop files, to quickly organize them and make sure that you‘re keeping all of your content and all of your media content very organized in the backend. And then of course when you choose this in the content section, you can quickly find the folders that you’re looking for to find the media that you’d like to insert into that page.

User Management In Umbraco

I’m going to skip over some of these other items as they are very developer forward, but the final piece here is just user management. We have a handful of users here. I mentioned that for each one of these users, you can provide an unlimited number of permissions to each one of them, so you can actually set up user groups - right now I’m set up as an administrator - you can set up blog content writers, you can set up blog approvers, you can set up resource providers, you can set up people who only have access to responding to content form submissions. There’s a lot of really great ways you can utilize this access to build out very particular user groups. And I mentioned that you can do this across the entire website, you can do this for specific content nodes, you can do this for a media section if someone is in charge of uploading PDFs and that’s all you want them to do. There’s a lot of really great ways you can use this to create efficiencies and also some governance in the organization as well.

Umbraco Forms: Setting Up Your Own Workflows

The next section to talk about here is forms. Umbraco out of the box has Umbraco forms which allows you to create as simple or as in-depth a form as you’d like. You can set up your own workflows across those forms as well. Which makes it really easy to build out forms for your landing pages, service pages, contact page, and make sure that you have different forms that are unique to those needs for each one of those pages for your users. You can set up workflows that are simple as the form gets submitted and sends it off to an email, or you can have it be integrated with a CRM, like passing that data on to a Salesforce or a SugarCRM. There’s a lot of really cool ways you can use Umbraco forms to build out these workflows and make sure you are obtaining the information that you need and that it’s integrated with your internal systems as well.

You can create multiple forms such that you can have them on multiple pages and utilize them in whatever way works best for your organization.

Translating Your Content For Multiple Languages

And finally one of the really cool features of Umbraco is its integration with translation. If you have a need for multiple languages on your website, Umbraco is really a great content management system for ensuring that you have translations across pages. This is just a list of a lot of different sections that may need to be translated to Spanish, but the easier version is if you go into content - which we actually don’t have set up right now - but if you go into your content and look at a specific page, you would actually see the English version and the Spanish version side by side so that you could see the translation immediately next to the English to Spanish version.

This really helps to ensure that the pages on your website are catering to the native speakers and the native languages of the people coming to your website. If you need to have those translations, you really want to have it easily accessible and Umbraco does that in a lot of different ways.

So there’s a lot of great ways that you can set that up to help create some efficiencies around your translation. You can also set it so that the permissions will either allow you or not allow you publish if one of those is not filled out. So if you require that every page has a Spanish translation, Umbraco will not let you publish that page until you’ve added in a Spanish translation. Or you can override that and say that it’s ok to not have a Spanish translation, but we would prefer for it to be on there as well.

Overview and Wrap-Up

That’s pretty much the high level demo of Umbraco. Again, Umbraco is great for multisite applications - as you can see we have multiple sites on here. It’s great for user management - it gives users and administrators the ability to provide access to individual sections of the website as needed or individual websites as needed. It really is great for translations, for translating from one language to the next. It has a lot of really great embedded features. It’s very easy and scalable to use. I hope that you’ll find it as incredible as we find it here at Marcel Digital, and we’d love to answer any more questions that you have about it.

Thanks so much for joining today and I hope that you have a wonderful day.

Headshot of Michael Duquet

I went with Marcel Digital over a larger - and much higher priced - competitor and it's one of the best decisions I've made. Marcel Digital are lovely people to deal with, extremely knowledgeable and approachable and willing to take the time to examine possible solutions that differ from how they would normally proceed. I value the partnership with their company and am planning on having our company be a client of theirs for years to come. Can't recommend them enough.

Michael Duquet / Director, Web Strategy / Absolute Software

Headshot of Ray Fast

Marcel was an excellent thought partner in the evaluation process as we considered major changes to our systems and website. They were willing to engage on many concerns and worries we had approaching the project. Thanks to their help, we felt confident that our concerns could be planned for, and that we had selected the right system for the changes we wanted to make. Their subject matter expertise and client care were exactly what we had hoped for.

Ray Fast / Director, Travel Experience / PerkSpot

Headshot of Kim Rafalowitz

Marcel Digital is simply the best Digital Marketing agency. We hired them years ago, and I can't say enough amazing things about their dedication to the field, to my team, and their phenomenal leadership team. Top-notch professionals all around.

Kim Rafalowitz / Dir. of Global Marketing / Worldpoint



Headshot of Dave Hamilton

I can't believe how simple Marcel Digital and Umbraco Cloud made it to get a beautiful and easy-to-use website. My only regret is not doing this sooner.

Dave Hamilton / Creative Director / StreetWise

Headshot of Mauricio Caneda

We are very pleased with the Umbraco website developed by Marcel Digital. Their Umbraco Master's transparent development process and attention to detail resulted in a beautiful website that has made a tremendous impact on our digital marketing efforts. They continue to be a valued partner and one we recommend without hesitation.

Mauricio Caneda / Sr. Vice President, Chief Information Officer & Director of Operations / Generali USA

Headshot of Diane Locher

Having a partnership with Marcel Digital has been a lifesaver for our business. We could not be happier with their work ethic, attention to detail, and superior expertise. I highly recommend them if you are looking for a talented, and trustworthy partner!

Diane Locher / Director of Sales and Marketing / Precision Medical

Megan Patterson at Arbour Group

Marcel has been a great a partner in our journey into the 21st century. They helped us to build a beautiful and functional Umbraco website, and have been there to help support us anytime a crisis arises. The increase in quality of leads was immediately recognized and anytime there was a change in lead flow our Marcel team was immediately there to offer suggestions and help us stay updated. We truly view Marcel as an extension of our team.

Megan Patterson / International Operations Manager / Arbour Group

Headshot of Andrew Barta

The overall experience of working with the Marcel team is outstanding. They have built a team of all-stars who are easy to communicate with and execute ideas effectively.

Andrew Barta / VP of Partner Relations / Umbraco HQ


Web Dev Case Studies

Get In Touch


Looking for help with your website? Fill out our form and our team will be in touch shortly!