Create Flexible Layout in Umbraco

One core reason why a client wants to create their website using a CMS is because it gives them the ability to control their web content without having to wait for any technical help or a developer. Content editors and publishers can now enjoy the power to create components like banners or call to action blocks.

This means that they will have the power to decide how the layout of the page would look within Umbraco. If this is what your content editors are looking for, then this article will help your Umbraco developers to create flexible layouts for the content editors.

Create Flexible Layout in Umbraco Using Grid Editors

Recently Umbraco has introduced a new feature called the grid editor.  This offers a new level of power to the content editors. Let’s read to know more.

Understanding the Grid Editor

If you are a software developer and have experience with other .NET CMS systems, then you must be familiar with creating flexible layouts. Umbraco development offers some forms of flexible layouts via the macros. A grid editor is a component that is responsible for getting the data into the grid and the data can be a simple text or even a media picker.

Traditionally in a CMS, you had to define a template that had a preset layout, which was agreed by the client, the designer and the developer.  These preset layouts often caused lots of issues and it was very difficult to fit the content requirement of the client exactly. If in any case the client wanted to change the layout of the document, they would need a developer and a designer to make the changes, which would also involve a lot of time. But with the grid editor of Umbraco CMS, content editors or publishers can now make the layout change whenever needed without taking any help from the developer.

The Flexibility That Your Clients Might Look For?

If you are not aware of the flexibility that your client might look for, then take a look below for an idea:

  • Removing the headline image
  • Adding an accordion
  • Adding a call to action
  • Adding a notification area
  • Making changes in the page based on A/B testing

How does the Grid Editor Work?

If you want to work with the grid editor, then let’s see how it works.  In any website, you will always have to work with multiple types of pages, home page, content page and etc. In Umbraco, such pages are usually created by using a document definition and the document type is created by using one or more properties. The Grid Editor is a custom Umbraco property that can you can easily add to the document type that defines the flexible area.

In order to add content to the page, Umbraco editors will have to add property editors inside the grid editor and arrange them for the best fit. Umbraco comes with 6 inbuilt property editors and they are Call to action, Embed, Headline, Image, Macro, Quote.