Director of Strategy 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".
Video Transcription
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.