Home

Download this help site
(PDF 80MB)

Download

Page templates

About page templates

Page templates form the foundation for individual site pages, as well as system pages . Each page derives its layout from a template, and inherits any content that appears on the template.

 Read more/less

You can set up multiple templates, each with its own layout and shared content. Each page can be based on a different template, and multiple pages can share the same template. You could, for example, use one template for public pages, another for member-only pages, and a separate one for landing pages.

Each page template is based on a particular master layout which defines the areas where content can be added. The master layout provides a broad outline of the page, which the page template can refine and add content to. The master layout can also contain graphical elements.

Each website theme contains a number of different master layouts which can form the basis of any number of different page templates.

You can design and modify page templates using the content editor, the same graphical editor used to edit individual web pages. Master layouts are not accessible through a graphical interface but can be modified through theme overrides.

Using templates as the basis for site pages has several benefits:

  • Efficiency – shared content can be added or updated on a template then automatically applied to multiple pages without having to edit the pages one at a time
  • Flexibility – selected pages, such as landing pages or member only pages, can appear different from the others
  • Simplicity – changing the overall look and feel of your site can be accomplished using a graphical editor instead of CSS customization or theme overrides (though both are still available for this and other purposes)

Assigning page templates to pages

You can assign a page template to a site page or system page from its page settings. The page settings appear in a panel on the left side you click the Edit button to begin modifying the page.

 Read more/less

If you are already editing the page and the page settings are not displayed along the left side, click the Page icon towards the top of the screen.

Icon

Switching to a different page template after you have begun modifying the page may result in layouts and gadgets changing position within the page. Switching back to the previous page template may not restore them to their previous positions. You can, however, restore a version of the page that was saved prior to switching templates.

Creating a page template

You can create a page template from scratch or by duplicating an existing template.

 Read more/less

To create a page template, you begin by selecting the Templates option under the Website menu.

From the Templates screen that appears, you can create a new page template from scratch by clicking the Add template button.

To duplicate an existing page template, click the template you want to duplicate within the template list on the left then click the down arrow within the Add template button and choose the Duplicate template option.

Alternatively, you could display the information panel – by hovering over the information icon beside the template within the list – then click the Duplicate link.

Template settings

When you create a new template, or open an existing template for editing, the settings for the template appear in a panel on the left.

 Read more/less

Within the template settings, you can set the template name, and choose the master layout to used as the basis for the template.

Master layouts define the areas where content can be added to the template. Different master layouts are available depending on the currently selected website theme.

Icon

Switching to a different master layout after you have begun modifying the template may result in layouts and gadgets changing position, both within the template and any sites or system pages that are based on that template. Switching back to the previous master layout may not restore them to their previous positions. You can, however, restore a version of the template that was saved prior to switching master layouts.

At the bottom of the template settings is a list of the site pages and system pages that use the template.

Setting the default template

Within the template list, one template is designated as the default template. The default template is the template automatically assigned to new pages.

 Read more/less

Within the list, the default template is marked by a gold star.

To change which template is designated as the default template, display the information panel – by hovering over the information icon beside the template within the list – then click the Set as default link.

Modifying a template

You can design and modify page templates as you would individual web pages.

 Read more/less

Within the page template, you can divide the page into sections by adding layouts. Layouts consist of one or more columns and rows. For example, you could add a 2-column layout to a template so that any pages based on it are automatically divided into 2 columns.

You can insert gadgets to add dynamic functionality or static content. Any content that appears on the template – menus, site headings, login boxes, headers, and footers – is also inherited by the pages that use it. Page headers and footers are simply the content that appears at the top and bottom of the template and thereby, the top of each page that is based on it. For instructions on setting up page headers and footers within a page template, see Page headers and footers.

Any changes made to a template are automatically applied to all pages that are based on that template.

(For instructions on modifying site-wide elements, including background image, see Customizing colors and styles.)

To modify a page template, follow these steps:

  1. Hover over the Website menu and select the Templates option.
  2. Within the list of templates on the left, click the template you want to modify. The selected template will appear on the right.
  3. Click the Edit button. 

     

    Alternatively, you could display the information panel – by hovering over the information icon beside the template within the list – then click the Edit link. 

  4. Now, you can modify the template settings in the panel on the left, or click the Gadget or Layout drop-downs to insert gadgets and layouts. You can modify the content of existing gadgets by clicking the gadget then using the options appearing on the editing toolbar to insert or modify text, graphics, links, and other elements. You can also adjust settings for layouts and gadgets by hovering over the layout or gadget and clicking the Settings icon. For more information, see Designing site pages. You can also adjust placeholder settings (see below).
  5. When you are finished modifying the system page, click the Save button.

Singular gadgets – those that cannot be combined with other singular gadgets on the same page – are not available when modifying page templates. The following is a list of singular gadgets:

  • Blog
  • Discussion forum
  • Donation form
  • Event calendar
  • Forum summary
  • Membership application
  • Member directory
  • Photo album
  • Subscription form

Placeholder settings

Within a page template, placeholders define the areas where content – in the form of layouts and gadgets – can be placed. The page template inherits the placeholders from the master layout, forming the foundation for the template. You cannot add or remove placeholders, but you can adjust the settings of individual placeholders, including height.

Icon

The width of a placeholder is determined by its theme, and can have a fixed width (as in older themes) or a responsive width that varies according to the device (as in newer themes like the Treehouse or Simple themes).

Placeholder settings appear in a panel on the left side (which can be hidden to maximize the page design area). To display the settings panel, you position your pointer over the placeholder – while editing the page template – then click the placeholder's Settings icon.

The following placeholder settings are available:

Setting

Description

Padding

Controls how much blank space – in pixels – appears inside the placeholder.

Background color

The background color of the placeholder. To set the background color, you can click a color or enter the hex code for the color. To make the background transparent, so that the site background shows through, click the Set to transparent button. Whether the background color shows through or not may depend on the style settings of any gadgets that appear in the placeholder.

Background image

The background image that appears in the placeholder. To select a background image, click the Select button then select an images from the image library or click Own resources to select an image from File management. After you have selected the background image, click Apply background. Once you have applied a background image, you can control whether and how the image is repeated within the placeholder (tiled, repeated horizontally, repeated vertically, not repeated), and the position of the image within the placeholder (left, right, or centered). Whether the background image shows through or not may depend on the style settings of any gadgets that appear in the placeholder.

Height

The height of the placeholder. You can allow the height to be set automatically based on the content added to the placeholder – by clicking the Auto option – or set the height yourself by clicking Fixed then entering the height in pixels. To adjust the height of the placeholder to the background image – if one has been selected – click the Adjust height to background image link, and the height of the placeholder will be automatically set to the height of the image.

HTML ID

A unique identifier by which the placeholder can be referenced within custom CSS or JavaScript code. The identifier is automatically generated but can be replaced with a more readable or memorable one.

CSS class

The name of a CSS class whose values have been entered on the CSS customization screen.

Inline style

CSS code to control the behavior or appearance of the placeholder. For example, you could enter CSS code to control the width of the placeholder.

Icon

If you set both a background color and background image for a placeholder, only the background image will be displayed.

Sticky placeholders

(For Blueprint, Fiesta, and Homestead themes) A special placeholder is available that you can use within a page template to create a non-scrolling area at the top of your page, or within a sidebar.

 Read more/less

Within this "sticky" placeholder, you can place any content, including your site menu – thereby creating a sticky menu. Any content positioned within this placeholder will remain in position as you scroll through the rest of the page.

Icon
The sticky behavior is disabled within admin view, and can only be seen in public view. Sticky placeholders will not stick for Fiesta themes on mobile browsers.

Since a sticky menu does not scroll, you should limit the number of items in any drop-down menu so that they do not drop off the bottom of the screen. You should also keep in mind that fewer drop-down menu items can fit on mobile device screens.

Icon
You should not place a menu gadget within a sticky placeholder if you have enabled responsive behavior.

Sticky placeholders are identified by its HTML ID field value, which you can view within the Advanced section of the placeholder settings.

The HTML ID for sticky placeholders varies according to theme and master layout.

ThemeMaster layoutHTML ID
BlueprintMain layoutid_Header1
Sidebar layoutid_LeftSidebar
FiestaMain layoutid_Header2
HomesteadMain layoutid_Header1

Deleting a template

You cannot delete a template that is being used by a site page or system page. You must switch the page(s) to a different template before you can delete the template.

 Read more/less

The number of pages that are using a template is indicated when you select the template within the list.

To delete an unused template, select it within the list on the Templates screen, then click the Move to trash button.

Alternatively, you can display the information panel – by hovering over the information icon beside the template within the list – then click the Move to trash link.

In either case, the template will be moved from the template list to the trash. From the trash, you can restore the template or delete it permanently, along the rest of the deleted pages and page templates.

Restoring a deleted template

To restore a deleted page template, follow these steps:

 Read more/less
  1. Click the Trash option under the Website menu.
  2. Within the list of deleted pages and template, click the template you want to restore.
  3. Click the Restore button beside the selected template. 

Icon

Once the trash is emptied, its previous contents cannot be restored.

Restoring previous versions

Each time you save changes to a page or page template, a separate version is saved. You can view the previous versions of any page or template, and restore any version.

 Read more/less

Within the version history, you can also view who made the changes and when.

To view the version history for a page or template, click the page or template within the list, then click the Changes history link on the right side of the screen.

For each version in the list, the time and date of the change is displayed, along with the name of the user who made the change.

To restore a previous version of the page or template, select the version within the list and click the Restore button.

For more information, see Version history.

Tracking template use

To see which pages are using a particular page template, select the template within the list then hover over Used on x pages beside the template name.

 Read more/less

You can jump to one of the pages by clicking it within the list.

What can't you do with page templates?

  • You cannot delete a template that is being used by a site page or system page
  • No labels
 
Wild Apricot Inc. 144 Front Street West Suite 725, Toronto, Ontario, Canada M5J 2L7