This is the fourth article in 'Creating Your First Umbraco Page' series.  So far we've split a very boring HTML page into a master layout, header component, footer component and a homepage template.  So far the page is all hard coded and content editors can't update any of the text.  

In today;s guide, we're going to change that and add several properties that will put the power in the content editors hands. Every web page in your websites will have shared data, like a page title for instance, as well as unique properties, like a homepage welcome banner.  This means we need to add global properties to the master template and the unique properties to each individual template.

umbraco_add_properties_to_templates_1

To get started, open up the master document type we created in the second tutorial.  If you're just joining now, this process works with any layout, or, template.

umbraco_add_properties_to_templates_2

When you load the page you should be presented with a page similar to the above.  This page is the properties builder.  The first thing you can do is create'tabs'.  Each tab that you create here will be a tab the content editors see when they create to try and create a page using the template.  Some standard tabs tat get created on most projects include:

Metadata:  A tab to store all your pages meta-data properties, e.g. page title, meta keyword etc.. Settings: A tab for page, related settings, these types of settings could include things like 'include in breadcrumb', 'exclude for search results/do not index', 'exclude from sitemap' etc.. Main Properties related to a pages main bits of content.

The names you want to call your tabs is completely up to you, however, one common mistake I see on a lot of projects is that developers don't spend that much time thinking about names that make sense to the content editors who will be using the site.  

If you find yourself in this situation, my advice is to always ask the people who will be using the system, what names and tabs they find best.  In some instances it might not make sense to you, but, in all likelihood, you won't be the person updating content!

umbraco_add_properties_to_templates_4

As we want to create a page title, a good tab for this would be 'Metadata'.  In the 'Metadata' tab, you should see a giant 'Add Properties' button as seen above.

umbraco_add_properties_to_templates_3  

Clicking on 'Add Properties' will open up the 'Property Settings' dialog.  As we want to create a property for the page title, we add the appropriate title and description.  Since every page needs a title we also need to tick the 'Field is mandatory' checkbox.

umbraco_add_properties_to_templates_5

Lastly, we need to define the type of element the content editor can use to enter in the data, this is done by clicking the 'Add editor' link.  Clicking on this will load the dialog above.  For a page title, we only need a string to represent the page name, but we could use rich-text, a date, an image etc.. you can even create and add custom ones you build yourself, but, that's definitely something for a later date.

umbraco_add_properties_to_templates_6

After defining the page property, click the 'Save' button, in the bottom left-hand side.  Now we have a property defined, the next step is to render it within a template.

umbraco_add_properties_to_templates_7

Open your 'master' template and in my example, I replace the tex within the