Business Catalyst Feature Exploration - Page Templates

Business Catalyst Feature Exploration - Page Templates

Adobe Business Catalyst (BC) is a content management system (CMS) and online marketing platform. It features many tools that make managing your website easy. Today, we’re taking a general look at Business Catalyst’s Page Templates, what they are used for and how they are created.

Page Templates Control Layout

You might have several layouts across your website pages. For example, you may have a different page layout each for your home page and your contact page. Also, your about page and services page may use the same basic layout. In the example below, the home page has a wide area across the top with two content areas below. The About / Services layout has content on the left and a right sidebar. The Contact page is just one large content area. This scenario would result in a desire to create three Page Templates in BC.

example web page layouts

Rather than enter all the HTML and CSS layout code into each web page you create in BC, you use a Page Template so that you only enter the code one time and can reuse that code across many pages. A Page Template is simply a special code file that contains the HTML, CSS, and JavaScript code that surrounds your CMS based content. There are special BC code tags placed inside the HTML code that tells BC where to output the content that you enter in the CMS.

Creating BC Page Templates

Templates are setup within BC’s admin tools under Site Manager > Page Templates. You can also create a template by creating a file with the .dwt file extension, within the Templates folder, if you’re working with the files via sFTP.

business catalyst page templates admin

My strategy for creating templates is to create your most basic layout as a template first. I like to start by building this base template to include the most widely used site elements, such as the header, footer, navigation, etc. In the example layout scenarios above, I’d probably create a very simple template first, name it something like Default, and use that for the contact page until a more custom template became necessary.

With this basic template created, you can then “copy” that template to create each of your other layouts. You copy a template using the “Copy this Template” button from the Page Template BC admin page or by duplicating and renaming the file on the sFTP file system in the Templates folder.

Working with Page Template code

I prefer to work with a desktop text editor rather than BC’s admin for working with the HTML, CSS, and JavaScript. I personally use Coda on Mac for a lot of Business Catalyst development, as it has great sFTP support built-in. Here’s an example of a complete, basic template we use on this website.

business catalyst edit page templates with Coda

Notice two special areas in the template.

<!-- TemplateBeginEditable name="doctitle" --><title></title><!-- TemplateEndEditable --><!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="ContentArea" -->{tag_pagecontent}<!-- TemplateEndEditable -->

These two areas are marking the parts of the template that are overridden by the page that uses the template. You must include these markup sections in your Page Template for web pages to correctly output content.

You probably noticed that this example Page Template is using several content holders. This is a trick you should employ to make life easier. Group logical groups of code into reusable Content Holders.

Some example bits of code you may want to create content holders for are the header, navigation, footer, and other commonly reused widgets. You should also make two content holders for your shared JavaScript logic (one to use in the head element and a different one to output right above the closing body tag). Different JavaScript frameworks and tools have different requirements for where you should put their code so having two content holders for this is best. Often, you can put all your shared CSS into the head JavaScript content holder. With this configuration, you can quickly add a new feature or plugin to all your pages.

Content Holders are created in Business Catalyst by going to Site Manager > Content Holders. The current content holder config for this site is below.

business catalyst content holders admin

A few more tips

Before we go, here are a couple miscellaneous tips that may help you as you design your Page Templates.

  • If you’re in the BC admin, you’ll notice one of your templates will be marked as “Default Template”. This is the template that will be suggested for all new pages. You’ll want to mark default the template that is most likely to be the layout for new web pages. It may not be your really simple layout that you create first.
  • Note that you have the option to NOT base your page on a Page Template. You do that by selecting “Don’t use a template” when creating the page. This is helpful if you want to make some one-off pages that don’t use one of your existing layouts or embed something from an external website.

 

Did I miss something that you’d like explained regarding Business Catalyst Page Templates? Let me know in the comments and I’ll respond.

Abby Sims

About The Author

Abby Sims is passionate about growing small and mid-size businesses through well-done websites and custom software.