How To Make Flexible Layouts For Content Editors Within Umbraco

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 editor. The grid editor provides a new level of power for content editors if you know what you're doing.  If this sounds like something you might want, or your client 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 creating flexible layouts.  Traditionally, Umbraco has provided some form of flexible layout via macros.  Architectural macros have been plagued with issues mainly around upgrades and changes.  Macros caused so much trouble for Episerver that in version 7 they deprecated them completely and moved towards a content area/block architecture.  You probably don't care about Episerver, the reason I mention it is that the Grid Editor and the content editor are very similar in nature.

Traditionally in a CMS, you would define a template that had a very pre-set layout that was agreed at some stage with the client, a designer, and a developer.  These pre-set layouts caused lots of issues.  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.  On most projects I'm involved in a release will need to be tested.  Usually, like most people, I work in sprints where multiple changes might be required to getting a new change into the next sprint might take a week or two.  

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.

Now imagine a scenario where instead of a content editor needing to ask for a developer to make the layout change they require, they could do it all themselves... this is the power of the grid editor!

What Type Of Flexibility Do Clients Typically Want?

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
  • 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 things, rather than moving bits and bobs from one place on a page to a slightly different place.

How Does It Work?

If the grid editor sounds like something you want to check out, then I'll quickly cover how it works.  On any website you work on you will need to define multiple types of pages, like the homepage, or a content page.  In Umbraco, these pages 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 property editors inside to the grid editor and arrange them how they see fit.  Out of the box Umbraco come 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. 

First, in most cases, you will need to create your own custom property editors to meet your requirements.  This will add on a little extra development effort as you'll be creating more files and more things will go wrong, but, as I'm hoping you can see, it's time well spent.   As someone who has worked with this type of architecture on Episerver for about 5-6 years I 100% recommend that you adopt this approach. 

The second downside worth mentioning is testing.  Testing a single 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 things can get interesting.  

Third, don't be tempted to go to generic.  A lot of peoples first thought when they get introduced to the grid editor, is to create one super generic document type, provide a number of components that content editors can use and leave the rest to the content editors; don't do this.

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 in your site, you would not be able to do this.  

Instead, it makes a lot more sense to still create the document-types you think you need and then use the grid-editor to allow content editors to add in the main content any sidebar content. 

If a content editor thinks they still need the super generic document type you can still provide this as an option.  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 template they will get frustrated quickly.  From my experience, most content editors will want a quick option for 80% of their needs.  They will then want the generic flexible stuff for everything else.  

Conclusion

As you can probably guess, I think the grid editor is a great addition to Umbraco and it's something I've been wanting for a long time.  If you're building a new website in Umbraco you should definitely be using this.  In the next tutorial, I go over the technical steps on how you can implement a grid editor within your project.

submit to reddit

Jon D Jones

Software Architect, Programmer and Technologist Jon Jones is founder and CEO of London-based tech firm Digital Prompt. He has been working in the field for nearly a decade, specializing in new technologies and technical solution research in the web business. A passionate blogger by heart , speaker & consultant from England.. always on the hunt for the next challenge

Back to top