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".

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.

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

SEE OUR WORK

Web Dev Case Studies

Ready to start your project?

 

Let's chat. Fill out our form, and our team will be in touch with you shortly.