Setting the scene
I think most people would say the web industry is pretty fast at changing, just think how the web looked a mere 10 years ago. Back then we used to have individual website templates that would do a single task, homepage, gallery page, custom content, ABC page etc. If a client wanted a change then they would call up their agency and get them to either change an existing template or add a new one. Depending on the nature of the change, the budget available, and the timescales allowed, the final result would be on some kind of scale from exactly what is required to some sort of compromise.
Introducing content widgets
To mitigate some of the issues templates can have, we started to build our sites with a slightly different make-up. Instead of a lot of bespoke templates, we started to use a few bespoke templates and one generic one. This generic template would be the standard template throughout the site and would work for around 90% of the use cases.
So what's so special about this template? For a start, the main content elements are not predetermined, instead, the page starts with no elements and an editor picks what elements they want from a bank of possible ones. We call these elements content widgets and its this flexibility that makes it a lot easier for the editor to create the required page without having to keep coming back to the agency for relatively simple content changes.
There will still be a need for custom elements but we can now decide on what works better for the editor, a new template or a new content widget. As we progressed we found adding a new widget was the way to go for the majority of cases.
So how did we implement this in our Umbraco sites?
We started doing this back in Umbraco V6 with widget builder but it really came into its own with Archetypes for Umbraco 7. We split the content into 2 main types of widgets; main content and sidebar. There was a bit of cross over between the 2 types but we found it easier for the editor to keep them as separate banks of widgets.
Using Archetypes in Umbraco CMS
So let's assume you have a fresh install of Umbraco CMS.
Lets set up a few items we will need...
- In the developer section, add the archetypes package.
- Next, create a new datatype - let's call it "Main Content Widgets" and set the property editor to archetype.
- Next, we will need to fill in the details for the widgets we want to have available.
- Archetypes are broken down into what are called fieldsets and for each fieldset, there are a number of properties. For us each fieldset will be a widget and the properties will be what we need for that widget - so first let's add a basic widget that has a heading and a rich text editor - it will look something like this: