In this tutorial, you will learn how to allow your content editors to create a flexible layout using the Umbraco grid layout.
If you're new to Umbraco and you don't fully 'get' why flexible layouts are super cool, or what the grid layout is, then I suggest you read this article first. For the rest of you, let's get on with it.
Creating A Document Type To Add The Grid Layout
First, log into your Umbraco backend, then go to 'Settings' -> 'Document Types'. To create a user-editable content area you will need to add a 'grid editor; to your page. To do this, go to your document-type and select -> 'Add Property'
From this list, add a name like 'editable area and then select 'add editor'.
From here select 'Grid layout'
Boom... that's the hard part done! As you are just getting familiar with the grid layout, I suggest that you just go with the default options, click save on the properties page and get a feel for what you can do, instead of focusing on how you can customize it.
Now you have a grid editor property on your document-type. Save it.
Using the Grid Layout
To use the newly created grid layout, go into the content tree, create a new page using the document-type you created in the step above.
In the Umbraco editor, you should be able to see the grid layout property ready to rumble, as you can see below:
After you click the 'Add Content' button, you can select which block you want to add. Out-of-the box, you can create a video, a headline, images, quotes, text and even macros.
After you add a block to the grid editor, you are then free to either publish the page, add more blocks onto the page, or re-arrange the existing blocks however you see fit. For long-time Umbraco users, you will see how the grid editor gives you a lot more flexibility. When you build a new project for a client, I suggest you go with this type of approach, as it gives content editors a lot more power.