Umbraco 12 Demo

Hi everyone, Kyle here at Marcel Digital. Today I'm going to show you a demo of Umbraco 12. So this is the first screen that you're greeted when you log into Umbraco 12. We are utilizing a third-party solution called USkinned that gives us access to a library of UI components. Think about it sort of as like a theming engine. So you will see that there are some references to USkinned here, but essentially the editing on the back office for editors is going to be very similar whether you use USkinned or you build a custom Umbraco website. We're just going to show you this demo site that we've spun up quickly with USkinned. We've replicated our current website so this kind of looks like our current website but it's a demo site that has a very slim down version of content so we can show you some of the aspects of the back office.

Of course with Umbraco, there is no annual license fee. It has a really powerful drag and drop content editor. It's a very scalable structure, there's a very simple to use back office for editors. So their tagline is the friendly CMS. It empowers editors to create and edit pages without the need for a developer. It's very highly customizable. There's excellent user management as well as being SEO friendly and just generally incredibly easy to use.

All that to be said, you'll see here on the left-hand side we have our content structure and this matches very closely with what we have on the website. So we have a banner, we have some icons, we have some service tiles, a couple of Icon tiles, and a testimonial. You'll see when I click on the homepage that this aligns with that structure as well. So we have the homepage, our logo Gallery, our What We Do tiles, our icon pods, and then our testimonials.

Just to show you really briefly what this looks like, right now we have a simple image in the background of our banner. I'll just show you what happens when we change that out really quickly. So I'm going to submit this, I'm going to save and publish. You can see how easy it is for us to make this change on the homepage. So let me just scroll back up here, reload this. The image has changed but as you can see, the cropping is a bit off. It's actually very easy to make those adjustments in Umbraco. So I'm just going to go and change the focal point here. This is a medium banner so you can see why the cropping is a little bit off. I'm going to pull that down a bit, I'm going to save it, and then that should go ahead and adjust the image on the homepage so that I don't have to redownload the image and recrop it. It's very easy to make those changes in Umbraco.

Similarly, these logos, this Gallery here is pulling from our content here. So we have all of our logos in a folder. You can very easily select those. It's easy if you have something like a logo carousel, image galleries where you want to show the latest images. It's very easy to pull those directly into a gallery. The What We Do section is just two sections of text and image. So right here text and image, so we can control things very easily in Umbraco, make adjustments, we can add buttons, we can hide buttons, you can add CTAs. You have a lot of control over the settings for each one of these page components as well. So we can change, for this particular one which is a pod, we can change the text position, we can add a background color, you can align a lot of custom stylings in Umbraco so that it can line up perfectly with your brand guidelines. You can change text alignment, you can even add in custom CSS as well. So if you do have a designer someone who's familiar with CSS styling you have the ability to make some adjustments to that as well.

The general interface is very intuitive. It's meant to be very drag and drop. So if I want to move some of these around I simply just click and drag it up and I can save and it'll rearrange the order on the page. With USkinned in particular, it comes with this library of UI components. So all of the general components that one would use to build a simple website you have access to and each one of these has its own options that you can select for both design and functionality. Again, this is utilizing the USkinned technology but if we built it custom we could build this in any way that you want. So we could build a whole library of custom components that are specific to your website and your workflows.

As far as all of these other Pages here, you'll see that the blog posts are slightly different. The rest of these pages are going to follow the same structure. So similarly to what you just saw on the homepage, our services page is the same way, it's just a different layout. So we have a split component here, we have more tiled layouts, another split component, then we have this section that pulls in the latest blog. So that's one of the UI components in USkinned, is the ability to pull in the latest posts from individual pages. Again, similar layout just utilizing different components. The blog posts are a little bit different. You have the ability to create a blog post directly within Umbraco. Each one of these blog posts has a similar layout to what you just saw. So you have full control over your blog post, you're never really put into a box with Umbraco, you have the ability to kind of customize each of the blog posts or each of the pages individually. Or once you've built out a page like this Umbraco services page, I can right click here and I can actually create a content template that can then be added to our library and utilized over and over again. That way if you have larger content teams and you have pages such as paid search landing pages or service pages or event pages that everyone's following the same guidelines and the same templates.

As I mentioned specifically with USkinned, we do have this concept of global components. So you can certainly adjust the navigation directly in the content management system which is great. There's a handful of content and settings that we can change but one of the really cool features are these reusable components. So with reusable components, you have the ability to create a component that only needs to be edited in one place but can be used across the entire website. So if you imagine like for us in particular, we might utilize webdev specific testimonials on all of our website development pages. We don't want to have to go and update every single one of those pages every time we add a new testimonial. So we have one reusable component that we can utilize for all of our webdev testimonials. We can update it, when we click save and publish it's going to go ahead and publish that across all of the pages that utilize it. So it's very handy for more scalable content editing.

Umbraco also has this neat save and preview feature. So you can look at some of these pages like our homepage. We can view it in different, let me just wait for it to load here, we can look at it in different browser types. So right now, this is for a desktop but I can also change it for a laptop, I can change it for a smartphone portrait and a smartphone landscape. So you can kind of get a sense of what your page is going to look like when it's scaled to a different size. You can make sure that it's responsive and you can make any adjustments accordingly moving forward.

Media management is very simple in Umbraco. It's all a folder structure so you have the ability to stay as organized as you like. I would recommend staying as organized as possible. It makes things very easy to find as you're doing content editing in the content section. But it's all based on a folder structure so it's very simple to organize. And then the forms as well, forms are very easy to create in Umbraco. You simply right click, click create and then it has a whole workflow that you can work through to make sure that it's one has the right fields and the right sections on it but also has the ability to send it to the right folks internally at the organization whether you want to route that to an email address or an email group or send it to a CRM. There's a lot of different options that you can do with Umbraco forms.

One of the sections that we're not demoing today but again is very very robust is the user management. So user management in Umbraco is very extensive. You can do everything from very simple editor admin privileges all the way down to providing people individual access to individual pages to different sections. You can create user groups, there's a lot of ways that you can slice and dice it to make sure that you're putting in place the proper governance around your editors and around your organization so you can keep your website clean and make sure that there's a publishing process. There also is an ability to create multiple layers of users that only have the ability to save and send for approval versus save and publish. That can be helpful if you have editors that need to go through an approval process wherein someone need to look at it, they would save and it would send to approval, then that person when they log in would be able to approve all of those posts quickly and those will be published and sent to the website.

Finally, in USkinned in particular, you'll see all these pages kind of follow the same structure but USkinned in particular has a design tab. So you can actually set the theming in a custom website. This would all be built from the ground up by us to match your brand standards. But in USkinned they give you the ability to kind of quickly map out all of your colors and your fonts and your layouts such that it matches across the entire website.

Really, a lot of the changes in Umbraco 12 are foundational changes. So it's much much faster, it's even more secure, it's easier to use, it's faster on both the front end and the back end. So hopefully you found this useful. We're going to be continuing to put out more of these demo videos as new versions of Umbraco are released but certainly feel free to reach out to us with any questions.