In this tutorial, you will learn how you can build truly flexible layouts within Umbraco that will empower your content editors to take their content to the next level. Recently, Umbraco introduced a really cool feature called the grid layout editor. The grid layout property provides a new level of power for content editors. If this sounds like something you might want and your clients will love, then read on.
What Is The Grid Editor?
If you have had experience with other .NET CMS systems, like Sitecore or Episerver then you will be very familiar with creating flexible layouts. Traditionally, Umbraco has provided some form of flexible layout via macros. In most CMS systems where they have been implemented, Macros have caused headaches for software engineers. These issues have mainly around maintenance and upgrades. How do you delete a macro when it's used throughout your website (in rich-content areas) without wasting a lot of time? Macros caused so much trouble for Episerver that in version 7 they deprecated them completely and moved towards a content area/block architecture. You are reading this for some Umbraco love, and you probably don't care about Episerver. The reason I mention it is that most CMS systems have more similarities than differences. If something doesn't work well in one, it is unlikely to work well in another.
Traditionally in a CMS, you would define a template that had a very pre-set layout. The structure of the layout was agreed upon at some stage at the start of the project. This process usually involves an agreement with the client, a designer, and a developer. These pre-set layouts were cumbersome to change. As hard as you try on a new build, it's impossible to forward guess every permutation and content requirement a client might have. If a client decided they want to change the layout of a document type, typically they would need to schedule in a developer, or designer to make the required changes. A round of testing and sign off would need to happen. Finally, the change needs to be released into production. Like most teams, I work in sprints where multiple changes will be bundled together. this means the timeframe from a client asking for a simple layout change to when that change is available in production can take weeks. This process can understandably cause a lot of frustration for a client. Most changes are typically required due to some business need, like a new campaign. These changes typically have a timeframe. When you tell someone that they won't be able to get what they want for days/weeks/months, they get annoyed. Not ideal!
Now imagine a scenario where a content editor is empowered to make the layout changes. They no longer need to rely on a developer... this is the power of the grid editor! If you are still struggling to wonder what sort of flexibility a client might ask for, then have a skim of the list below:
- Adding a carousel to the top of a page
- Adding a hero banner
- Adding an accordion
- Removing the headline image
- Add a notification area
- Adding a call to action
- Changing the width of a call to action
- Re-ordering a page based on A/B testing using something like optimize
As you can probably appreciate, these are all pretty understandable needs. As a developer, if you're like me, you will probably want to spend your time working on new interesting tasks compared to moving some HTML around within a view.
How Does It Work?
If the grid editor sounds like something you want to check out, then I'll quickly cover how it works (I will go into a technical deep-dove in the following article though). In Umbraco, different page types and layouts are created using a document type definition. A document type will be built using one or more properties. The page heading might be a string. The grid editor is a custom Umbraco property that you can add to a document type that defines a flexible area. An empty grid editor, a lot like an empty text area, is pretty boring. To add content to a page, Umbraco content editors add components inside of the grid editor and arrange those components however they see fit. Out-of-the-box, Umbraco comes with 6 inbuilt property editors, as seen below:
When you add a grid editor, a content user could, for example, add a quote, followed by an image, followed by some text, as seen below.
What Are The Downsides Of The Grid Layout?
Using the grid editor gives you a lot of flexibility, however, there are a few downsides.
In most cases, you will need to create your own bespoke custom components to meet your project requirements. This will add on a little extra development effort as you'll be creating more files and more things will go wrong, however, this will be time well spent. As someone who has worked with this type of architecture on Episerver CMS for over 6 years I 100% recommend that you adopt this approach.
The second downside worth mentioning is the time it takes to test the website. Testing a static layout website is fairly easy and quick. When you provide flexible grids and components the number of permutations grows significantly. When you combine this with responsive grids and mobile testing things get more complex. The time it takes to test a page increases.
Third, don't be tempted to go to generic. A lot of peoples first thought when using this property is to create one super generic document type, provide a number of components that content editors can use, job done. It is not a good workflow to only provide your content editors to only build content from components alone.
My advice is to still identify key pages and create them as document types. Creating document type is generally good, it provides semantic meaning to your data which is good. Let's say you want to create a search page that will only display your news items. If you created a single generic document type for every page on your site, you would not be able to do this. Instead, it makes a lot more sense to still create specific document types and then use the grid editor to enhance what the content editor can do. For example, using this property to allow content editors to add content into a sidebar is ideal! I recommend that you add a super generic document type on all projects, however, do not rely on this alone as the sole basis for content generation!
From my experience, if a content editor has to create 1000 pages they will want to do this in the quickest way possible. If they have to set up each page using components alone they will get frustrated quickly. Most content editors will want a quick option for 80% of their needs. They will then want the generic flexible stuff for everything else. As you can probably guess, I think the grid editor is a great addition to Umbraco and it's something I've been waiting for the core team to provide for a long time. If you're building a new website in Umbraco you should definitely be using this. Happy Coding 🤘
