Grid Based Editing in Umbraco

The core feature of any CMS is it's content editing interface. Today's modern sites are typically a grid based layout with rows and columns of rich text (text with formatting styles such as headlines, tables and links, like a word processor), images and videos. In order to meet Google Best Practice guidance that all sites should be mobile friendly, most grid based layouts should be responsive - changing the layout and size of pages to adapt to tablet, mobile and desktop browsers.

Out of the box Umbraco comes with a flexible grid based editor which supports both Bootstrap and Foundation responsive frameworks. The Grid Editor can be configured by Devs to control the number and size of columns in rows, and the type of content that can be added to a column. Base grid editor types include Rich Text Editor, headline, video, and image.

The Grid editor can also be extended through the use of the Doc Type Grid Editor plugin which enables Developers to create Grid Editors which contain multiple structured data fields, e.g. a DTGE editor could be created to insert an Image Carousel into a Grid column.

The Umbraco Rich Text Editor provides a simple to use text editor, with the ability to format and style blocks of text within a grid. Based on the open source TinyMCE editor, the Umbraco RTE supports:

  • Bold, italic and underline styling;
  • Paragraph styles, such h1-4 and custom style;
  • Bullet and numbered lists;
  • Indent and outdent;
  • Insert and remove links;
  • Insert and format tables;
  • Insert Image;
  • Insert External Media (YouTube, Vimeo, Tictok)

The RTE also provides an Insert Macro feature so that Developers can extend functionality e.g. insert a form from Umbraco Forms.

Parallax Background Image