Hi everyone, Kyle here at Marcel Digital today. I'm going to show you a demo of Umbraco 12. This is the first screen that you are greeted with 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 like a theme engine. 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 have 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 is a very scalable structure, there is 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 is very highly customizable. There is excellent user manage as well, as well as being SEO friendly and and just generally incredibly easy to use.
So all that to be said, you will 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 will see when I click on the homepage that this aligns with that structure as well. So we have the home page, our logo gallery, our what we do tiles, our icon pods and then our testimonials. So just to show you really briefly what this looks like right now, we have a simple image in the background of our banner. I will just show you what happens when we change that out really quick. So I'm gonna submit this, I'm going to save and publish. You can see how easy it is for us to make this change on the home page. Let me just scroll back up here. Reload. This 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 want to save it. And then that should go ahead and adjust the image on the home page so that I don't have to re-download the image and re-crop it and all this sort of nightmare. It is 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 for 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 to 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 customs 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. If you do have a designer or someone who is familiar with CSS styling, you have the ability to make some adjustments to that as well.
You will see that 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 will 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 will 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, just a different layout. We have a split component here. We have more tiled layouts, another split component, then we have this section that pulls in the latest blogs, 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 of your blog posts. 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 you know, paid search landing pages or service pages or event pages that everyone is 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 is 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. If you imagine, like for us in particular, we might utilize web dev 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 web dev 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 home page. 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 gonna 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 are 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 is 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 is 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. User management in Umbraco is very extensive. You can do everything from, you know, 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 is 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, where someone would 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 very 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 theme. 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. 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.
