Grid Layouts - flexible Umbraco content

I  love Umbraco Grid Editors.... 

Since Umbraco 7.2 'Grid Layouts' and 'Grid Editors' have been the alternative to the more traditional 'rich text editor'. They are more time consuming to setup, but allow a content editor almost limitless layout flexibility. They give editors a grid layout content component which allow the insertion of different types of content in a predefined Grid Layout. And 'Grid Layouts' consist of two main sections that need to be configured, grid layout area and grid rows.


Umbraco grid editors

A selection of custom Grid Editors available to the content editor in Umbraco


The real power of 'Grid Editors' comes when you create your own 'Custom Grid Editors', which can be bespoke to the requirements of the project. It is possible to create custom Grid Editors for anything from banner images to news blogs and share tickers.


Custom Grid Editor

The great thing is that a content producer is given a set of predefined custom editors, which allows great flexibility in terms of content production, but still within the boundaries of maintaining the layout of the site.

Grid Editors


It's even possible to review the output of the custom grid editor, before publishing a page.

Test Grid Editor


Creating 'Grid Layouts' and 'Grid Editors' is quite a lengthy process. It's necessary to define your custom grid editor in the developers section of Umbraco, and also the Grid Layout.  Then, you have to create the partial view itself (which defines the code layout) and any associated surface controller. It's worth bearing in mind that grid editors are output as JSON and do not have direct access the Umbraco API - so you can't do all the clever things that a standard template/view/controller can do... So, it has it's limitations.  But, having said that, it is a great way to give content editors a set of bespoke tools.


Grid editor code


About Us

WJP Media concentrates on creating responsive, high functionality websites using the 'friendly' op…

Umbraco Development

In today's online environment the ability to easily modify and update your website is crucial. Umbra…

Full -Stack Development

'Full-Stack' development, refers to a developer (or developers), who are just as comfortable working…


WJP Media and it's founder Warren Palmer has been creating web applications for household names sinc…