Empowering end-users using custom Sitefinity Layouts

Empowering end-users using custom Sitefinity Layouts

Posted on August 24, 2011 0 Comments

The content you're reading is getting on in years
This post is on the older side and its content may be out of date.
Be sure to visit our blogs homepage for our latest news, updates and information.

Prior to Sitefinity 4, when I needed 3-columns on a page, I had several bad options available:

  1. Inject a table using the Rich Text editor. 
  2. Toggle into HTML mode and type raw HTML.
  3. 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.

Sitefinity 3-column layout

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:

Sample quote

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:

Custom layout in Sitefinity

Custom layout in action in Sitefinity

Final result and customization of the 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):

image

Then I added a single additional CSS class to the code sample shown on the documentation.

image

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:

image

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.

progress-logo

The Progress Team

View all posts from The Progress Team on the Progress blog. Connect with us about all things application development and deployment, data integration and digital business.

Comments

Comments are disabled in preview mode.
Topics

Sitefinity Training and Certification Now Available.

Let our experts teach you how to use Sitefinity's best-in-class features to deliver compelling digital experiences.

Learn More
Latest Stories
in Your Inbox

Subscribe to get all the news, info and tutorials you need to build better business apps and sites

Loading animation