How to Build Responsive Templates in Percussion CMS

Thu Dec 12, 2013

Percussion CMS version 3.3 enables you to quickly and easily create responsive templates from scratch in 30 minutes or less. The following guide will walk you through how to create a simple responsive template, and style template-level elements such as logos, navigations, body content as well as the footer elements.

1.jpgStep 1: Log-in to Percussion CMS, navigate to the Design Manager in order to create new templates.

Step 2: Under the “Actions” drop down menu, click on “Add Template”.

In the “Add Template” dialog, click on “Percussion Templates” and choose “Responsive” from the drop down menu.

By doing this, you will see a list of all available responsive templates to choose from.

Step 3: Select the “Basic” Template and click “Save” to start creating your basic responsive template.

There are three responsive template options available to you: basic, banded, and plain, depending on how much of the template you like to have already built.

The basic template is used in this blog post.

2.jpgNow, you should see your basic template listed in your Design Manager. This template is currently named as "Basic-Copy." You can change the name of the template by simply double-clicking on the title. I renamed mine to "Responsive-Template."

2.jpg

Step 4: Click on the pencil icon to start editing the template.

Once the template is loaded, you will see several empty regions on your screen.

These regions represent <div> tags within the page HTML. These regions are automatically styled to be fully responsive using Zurb Foundation framework.

Step 5: Enhance the layout of this template to fit into your desired layout structure.

In my example, I would like to split the header region into two side-by-side regions in order to place a logo on the left and navigation on the right.

I accomplish this by dragging and dropping a new region to the left of the inside region within the header (see screenshot).

Once the new region is snapped into its place, you can then resize the region by dragging the side of the region to the right or to the left.

You can repeat this process until every region is exactly as you want it.

4.jpg
IIn this example, I also divided the main content region into two separate regions that are on top of each other. The top region will hold my breadcrumb as well as page header image and the bottom region will have my main rich text content.

Step 6: Once you are satisfied with the rough layout of your new template, you can start to assign Widgets into the appropriate regions.

Widgets represent placeholders for different content types.

If you are planning on inserting some text into a certain region, you should drag and drop a Rich Text Widget there. Same also applies for other commonly used elements such as Image and HTML Widgets.

Step 7: Drag and drop an Image Widget to the logo region, Navigation Widget to the region to the right of it, drop Breadcrumb and Image Widgets inside of the top main content region, and a Rich Text Widget in the bottom main content region, and populate the rest of the regions with the widgets of your choice.

Here’s what my template looks like so far:


5.jpg

So far we have been working within the “Layout Tab”. In order to populate these widgets with content, we will switch to the “Content Tab”.

Step 8: Switch to the Content Tab and populate your widgets with content.

6.jpg

Only content that will repeat on each page should be added at the template level. Areas of the template where the content is unique on each page should be left blank. 

The following image shows all template level widgets populated:


7.jpg

The areas of the template left blank will either pull the content from your existing site or they can be populated once the pages are created.

Next, let’s look at styling this template using CSS. So far, we didn’t need to edit our CSS file. Moving forward, if you are looking to touch up colors and fonts, you can either insert your CSS rules into the Override Theme CSS section under the Style Tab or you can directly edit your main theme CSS file (located in your web_resources/themes/yourTheme folder).

Step 9: Write new/or edit existing CSS file to make design changes.

In the example below, I would like to change all link colors to green, make footer text bold and assign a green border around my sidebar. Switch to the Style Tab and under “Override Theme CSS” enter your CSS rules.
I am using the following CSS rules to accomplish my task:

a:link {color:green;}
#perc-resp-footer-content p {font-weight:bold;}
#perc-resp-body-sidebar {border:2px green solid;}

#perc-resp-footer-content and #perc-resp-body-sidebar are region names. They automatically get assigned to your regions when you create them. Region names and div ID’s are the same. If you are looking to style a region, you can refer to it by its name (ID) using # or you can assign a class to it and style the class using a “.” in your CSS file. You can add/edit your region names under the Layout Tab by selecting the region and clicking on the wrench icon.

Now that I have the basic styling out of the way, I would like to create a page and test the responsiveness of my new template.

Step 10: Using the Finder, click on the “Create a New Page” icon, select your Responsive-Template and assign an appropriate name to your new page.

8.jpg

Once the page is created, it will be open for editing.

Step 11: Populate your page level widgets with content.

In this example I will insert a header image inside the Image Widget and some lorem ipsum text into the Rich Text Widget.

Step 12: Preview your page using the integrated mobile preview to test your new template’s responsive capabilities.

You can now test how your design will respond to the changing viewport size, from computer, to tablets and smartphones, and with changing device orientation.

9.jpg

I hope this tutorial will help you better understand how responsive templates are created within Percussion and how you can use some of the built-in tools to make your templates presentable on the web.

Kemal Demirhisar
Senior Solutions Engineer | Percussion Software

Originally from Istanbul, Turkey, Kemal is the hub that connects prospective customers to product management, and engineering to sales. If you've seen a demo of Percussion CMS, Kemal was probably your presenter. A passionate digital marketer with mastery of code, he is a web content management expert with experience in social, web design and development, building engagement, SEO, and anything Google.

comments powered by Disqus