<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=1639164799743833&amp;ev=PageView&amp;noscript=1">
Diagram Views

Creating Flexible Layouts in a CMS Powered Website

Brad McDavid
#CMS, #Ektron
Published on May 20, 2013

The Diagram SuperTemplate was born because we at Diagram felt there was a better way to build pages in a CMS-driven website.

The Diagram SuperTemplate

The Diagram SuperTemplate was born because we at Diagram felt
there was a better way to build pages in a CMS-driven website, a way to empower
users to create flexible layouts by making a few simple choices while editing
content. Users should be able to easily produce a one, two, or three column
page, or better yet, a completely unique home page or landing page. We feel a website
should be simple to maintain from both a developer’s and administrator’s point
of view, and that is what the Diagram SuperTemplate provides.

The Usual Approach

The majority of websites use a variety of templates
(ASP.Net web forms / ASPX pages and master pages) to accomplish different
layouts, such as a homepage, landing page, interior three column page, etc.
These templates typically have all functionality and logic stored in the site’s
files, and making any changes to them requires a programmer’s assistance.
Ektron’s PageBuilder Technology simplifies this process somewhat, allowing
content editors to drag widgets into placeholders called drop zones to add new
functionality without a programmer’s assistance (although someone still has to create
the widgets).

However, PageBuilder still falls short in a number of ways:

  • Editors have to create a content block and
    PageBuilder page for each page they want to build in their site.
  • The rendered HTML markup can become complicated
    and difficult to decipher, and can lead to difficulty writing CSS styles for
    designers, especially for responsive designs. The latest version of Ektron has
    improved on this by allowing custom classes on drop zones for responsive
    frameworks like bootstrap, but it still requires the editor to choose the
    correct classes.
  • PageBuilder is limited by predefined drop zone
    column widths, although it also allows for the creation of a drop zone that lets
    users create their own columns, which can be confusing and overwhelming to content
  • Using a PageBuilder page as a default page
    typically requires programmers to hard code the default page into a URL mapping
    or create a redirect page.

Our Approach

Wouldn’t it be easier for a website to have a homepage,
landing pages, and interior pages with one, two, or three columns, all from the
use of a single template and master page? The Diagram SuperTemplate can do just
that. While PageBuilder is a powerful tool, it is far from ideal, since
creating and editing content requires a great deal of technical assistance. The
Diagram SuperTemplate takes the best parts of PageBuilder and extends the
technology to streamline the process, allowing content editors to manage a
site’s content without having to constantly consult programmers. Diagram’s deployments
consist of a single “content.aspx” template and a single master page that leverages
a variety of Ektron tools like PageBuilder data and metadata to make a truly
powerful layout system.

Advantages of the Diagram SuperTemplate include:

  • Editors no longer have to create a PageBuilder
    page for each content block to build a page for their web site.
  • No PageBuilder HTML markup gets sent to the
    visitor’s browser, allowing for much easier CSS for designers to write.
  • Editors don’t have to worry about which CSS
    classes to apply to their drop zone or columns. We provide a flexible grid that
    sizes itself based on the drop zones that get used.
  • A robust web site can be powered with just a
    handful of PageBuilder layouts, using widgets that utilize content metadata.
  • No hard coding, URL mapping, or redirect page is
    necessary in order to use PageBuilder content for the homepage.
  • New layouts and functionality can be built in
    the current environment without impacting current content, through the use of

Final Thoughts

There are many other components included in the DIagram SuperTemplate,
such as the ability to create section specific layouts that can be applied to
an entire folder and child folders of content with just a few clicks; the
ability to edit global settings like logo image, main menu, and default layout
in a CMS smart form; and the ability to edit and translate text elements (such
as a search box’s placeholder text) in a template, all from the edit interface.
We’ve taken the functionality of the Ektron CMS and expanded it to make it more
robust and flexible, allowing content editors to create great-looking,
easy-to-maintain websites without having to rely on a programmer’s technical
expertise. What’s more, we are also currently expanding the Diagram SuperTemplate
beyond the Ektron CMS platform. Please contact us for any more information, or
if you want to know more about how the Diagram SuperTemplate can revolutionize
your website’s capabilities.