Prior to Sitefinity 4, when I needed 3-columns on a page, I had several bad options available:
- Inject a table using the Rich Text editor.
- Toggle into HTML mode and type raw HTML.
- Create a brand new template for this narrow scenario.
However, using Sitefinity 4’s layout editor I can quickly complete this task by dragging & dropping a 3-column layout onto my page.
No HTML knowledge is needed and anyone can make use of this feature.. However, this gets even better; these layouts are fully extensible and custom layouts bring a whole new opportunity for non-technical content authors to produce sophisticated results.
Custom Sitefinity Layouts in action
Consider the following page element:
To a seasoned HTML & CSS veteran, this isn’t overly complex. But non-technical content authors won’t understand how to reproduce this effect in Sitefinity. This is the type of custom styling that can be wrapped in a custom Sitefinity Layout:
This is extremely simple to utilize within Sitefinity. Content authors are fully empowered to create rich results, while still adhering to best practices.
How to create custom Sitefinity Layouts
The best part of this is how easy it is to create these layouts. For the scenario shown above I created a single ASP.NET User Control (ASCX file):
Then I added a single additional CSS class to the code sample shown on the documentation.
The CSS styling that creates this effect is attached to the “note” class. This styling was added to my Sitefinity Theme.
Lastly, I added this widget to Sitefinity Layout Toolbox:
The ControlType and CssClass (shown above) was copied & pasted from the existing 100% layout that already exists in Sitefinity. For more details, see our official documentation for this topic.
Conclusion
The core purpose of a CMS is to serve as an abstraction for the underlying technologies and to enable people who know nothing about web technologies, to create web content. Sitefinity Layouts represent another tool for empowering your content editors to do more.