Umbraco 8 Demo

Hello everyone and thanks so much 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. 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 home page 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 different website. 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 can 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 navigations, which I'll show you here shortly, but you can also have it such that it follows the hierarchy of the folder structure as well. So 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. So what you're looking at here is the home page of the website that I just showed you. This is the page builder. The nice part about the page builder and the page components are that you can really drag and drop your website and you can really have a 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 home page looks like. So 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. So the banner right now I have a static image. You could have that be a video if you'd like. You can add 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 the colors, you can change the banner style, text alignment, there's a lot of different options that hopefully will give you the ability to customize it as much or as little as you'd like.

Another quick one here is the pods here. So we have a couple of text images that are laying out our products across the bottom there. It's just a very 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 sub-page 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 then 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 very 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. They also have some out of the box SEO and sharing functionality. So oftentimes we get asked 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. Just jumping over to another page on the website, I'll just jump over to our services. So our services, it's 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 you know the ability that it has, you can really blow this up and make it a lot more ad hoc or a lot more avant-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 lay out.

But I'll jump over and just show you another layout of what these pages could look like. So again I'm just jumping over to our services. I mentioned there's a banner, there's some text, and there's a few split components here that have an image on one 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 one of these content is they all sort of have their own options that are completely customizable. So out of the box Uskinned gives you a lot 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, and this could even provide you with an omnichannel approach as well where perhaps you're 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.

One other item to note is for each one of these pages, I just right-clicked here, you can see some of the other options that 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 very 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 to 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. 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 the pages that they really should be touching.

So with that being said, I'm going to hop over here to the blog as well. This is another section that we've built out on the website. So right now this kind of shows some latest blog posts. It's all just, you know, 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.

Another really neat feature of Umbraco is the ability to preview your pages on multiple devices before you push them live. So if I go back to the services page that I showed earlier let's pick one for search engine optimization. You'll see I have my page built out here and just to remind you what that looks like. So here's my page on desktop right now hypothetically let's say that I wanted to see what it looks like on mobile. So what I can do with this page is I can actually save and preview. And what Umbraco's going to do is build out a preview of this page and then allow me to look at it in multiple different versions. So I can look at it in desktop, laptop, tablet let's see maybe what a what a smartphone looks like. I mean it gives you a sense of what it'll look like and what line breaks look like on mobile because search engines are are you know mobile forward right now. Um certainly they're 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 technologies but just in case for especially for your most important pages this gives you the option to to preview those before you push them live and I can switch it over here to let's see tablet portrait etc 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. Um one other really neat feature of Umbraco is the media editor. So if you upload an image to Umbraco you want to make sure obviously that you're not uploading gigantic images but one of the frustrations of content management systems is uploading an image and not having it fit appropriately across the website. One of the things that you can do with Umbraco is you can choose an image and you can actually edit it to change the focal point across all of the ways that it might be displayed on the website. So 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 it 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 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 so 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 of your website if you have let's say a multi-site installation and you want the ability to quickly spin up a new site that has a different color, different theme, or different layout you can quickly kind of change out the theme of your website and it'll automatically change all the fonts and all the layouts and all the colors for you. One of the advantages, particularly of using a theming engine, is that if you have a custom build, you'll have the ability to create all of those options with your development team. 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. 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.

That being said, I'm going to jump over very quickly here to the media section. So the media section, you'll see we have a lot of different items in here, but it sort of gives us the ability to organize all of our media in different 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. So 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.

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. So we have a handful of managers here. I mentioned that for each one of these users, you can provide an unlimited number of permissions to each one of those. So you can actually set up user groups. So 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, you know, responding to the content form submissions. There's a lot of really great ways that 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 it for the media section if someone's in charge of uploading PDFs and that's all you want them to do. So there's a lot of really great ways that you can use this to create efficiencies and also some governance in the organization as well.

The next section to talk about here is forms. So Umbraco out of the box has Umbraco forms which allows you to create as simple or as in-depth form as you'd like. You can set up your own workflows across those forums 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 of each one of those, those pages are your users. And you can set up workflows that are as simple as the form gets submitted it sends it off to an email or you can have it be integrated with a CRM like passing that data onto a Salesforce or a Sugar CRM. So there's a lot of really cool ways that you can use Umbraco forms to build out these workflows and make sure that you're obtaining the information that you need and that it's integrating with your internal systems as well. And you can create multiple forms such that you know you can have them on different pages and and utilize them in whatever way works best for your organization.

And finally, one of the really cool features of Umbraco is its integration with translation. So if you have a need for multiple languages on your website, Umbraco is really a great content management system for ensuring that you have appropriate 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 when you go into content which we actually don't have set up right now, but if you go into your content and you 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 like English to Spanish version. This really helps to ensure that the pages on your website are catered 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 to 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 it's okay to not have a Spanish translation but we would prefer for it to be on there as well.

So that's pretty much the high level demo of Umbraco. Again, Umbraco is great for multi-site applications. You can see we have multiple websites on here. It's great for user management, 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.