Page templates

SHOW ME (4:59)

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.

Page templates should not be confused with website themes that determine the overall look of Wild Apricot sites.

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.

https://cdn.elev.io/file/uploads/jEC8HySvDwISUdSg8iqChOB9kMRsiM1RCnIFiA0173M/NJBT4MgtHpLP-ny4dIXQbmUef6o8o1oei95DxqFr7vA/templates and layouts2-ITs.png

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)

How to tell which template a page is using

To figure out which page template a particular page is using, hover over the page within the Site pages list then hover over the information icon that appears.

The name of the page template being used by the page will appear in a pop-up window, along with other information and options.

How to tell which pages are using a template

To figure out which site pages are using a particular 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. The template you choose will appear on the right.
  3. Click the Edit button.

A list of pages that use this template will now appear below the template settings on the left. 

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.

https://cdn.elev.io/file/uploads/jEC8HySvDwISUdSg8iqChOB9kMRsiM1RCnIFiA0173M/S3sseTlYeUQPyLRjZVWmsU39RO2Y7-YlvXhyBAZrq8w/selecting page template-28E.png

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.

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.

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

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.

https://cdn.elev.io/file/uploads/jEC8HySvDwISUdSg8iqChOB9kMRsiM1RCnIFiA0173M/EKcncsXuRvUYZuMIlaQqOoM2SRivJS3hTDfYGwhj6LI/duplicate template option 2-u3M.png

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.

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

https://cdn.elev.io/file/uploads/jEC8HySvDwISUdSg8iqChOB9kMRsiM1RCnIFiA0173M/K7hES8jlUcEw1AqIpa7Ob1oBmf7kG38AK4OD-nfMCIE/template settings-3d0.png

Master layouts define the areas where content can be added to the template. Each master layout consists of placeholders that define the areas where gadgets and layouts can be added.

Different master layouts are available depending on the currently selected website theme. A plain master layout consists of a single placeholder. A master layout with the phrase mobile panel in its name will include a mobile menu panel when viewed on a mobile device.

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.

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

https://cdn.elev.io/file/uploads/jEC8HySvDwISUdSg8iqChOB9kMRsiM1RCnIFiA0173M/-D4pOViwYexJuCj7lf7yfagksxssucCpBL7YoBWjDmQ/default template-o7Y.png

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.

https://cdn.elev.io/file/uploads/jEC8HySvDwISUdSg8iqChOB9kMRsiM1RCnIFiA0173M/3GSa-G5EOl1S6ob_iqkDwFLggDFZdOsOGIZSPnnP4ck/set as default template-bVQ.png

Modifying a template

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

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. Within the Website module, 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. https://cdn.elev.io/file/uploads/jEC8HySvDwISUdSg8iqChOB9kMRsiM1RCnIFiA0173M/1FTLEcJcsXD_gPgyIofLqTWQlFXNOaaxNZQVa_Xv46Q/modifying%20template%202-IEY.png
  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. 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.

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.

https://cdn.elev.io/file/uploads/jEC8HySvDwISUdSg8iqChOB9kMRsiM1RCnIFiA0173M/B3wnEnprSscVBOscT3E_FaRMBOvKysmdsk4nIpXLRVo/placeholder settings-_0o.png

The following placeholder settings are available:

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 image 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. Whether the background image shows through or not may depend on the style settings of any gadgets that appear in the placeholder. After you have applied a background image, you can control the horizontal and vertical alignment, and choose how your image appears within the available space. You can choose from the following Behavior options:

  • Tile – the image will be repeated horizontally and vertically to completely fill the available space.
  • No repeat or scaling – the image will be displayed as is, and will be not be repeated or scaled.
  • Repeat horizontally – the image will be repeated horizontally to fill the width of the available space.
  • Repeat vertically – the image will be repeated vertically to fill the height of the available space.
  • Fill – the image will be stretched to completely fill the available space, and may therefore appear distorted.
  • Cover – the image will be proportionally resized to cover the available space, and may therefore be cropped.
  • Scale by height – the image will be proportionally resized to fit the height of the available space. Depending on the dimensions of the space, the image may be cropped, or may not fill the entire width of the space.
  • Scale by width – the image will be proportionally resized to fit the width of the available space. Depending on the dimensions of the space, the image may be cropped, or may not fill the entire height of the space.

To remove the existing background image, click the Remove link.

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.

Stretch to full width
(Casefile themes only) The Stretch to full width placeholder setting will force the placeholder and its contents to occupy the full screen width.

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.

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.

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.

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.

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.

https://cdn.elev.io/file/uploads/jEC8HySvDwISUdSg8iqChOB9kMRsiM1RCnIFiA0173M/sRcWsqg1S2c4yB0cn9GM7M704pj9z7NZU2z-0rlUbRI/sticky placeholder ID-4KU.png

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

For Blueprint themes, you also have to add the following code to the CSS customization screen to make the id_Header1 placeholder sticky:

.header1StickyWrapper.stick {
        position: fixed;
        top: 0;
        z-index: 1000;
}

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.

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.

https://cdn.elev.io/file/uploads/jEC8HySvDwISUdSg8iqChOB9kMRsiM1RCnIFiA0173M/CvGE9PIdxe9Mp8QQtONP6YarCOdXTGJ5xJmnpOR8BH0/deleting a template 2-Uj8.png

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:

  1. Click the Trash option under the Website menu.
  2. Within the list of deleted pages and templates, click the template you want to restore.
  3. Click the Restore button beside the selected template.
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.

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 hover over the info icon and click the Changes history link.

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.

https://cdn.elev.io/file/uploads/jEC8HySvDwISUdSg8iqChOB9kMRsiM1RCnIFiA0173M/S8d2T-pAP_0w8gWU6Za5GClCg3PUbKT5L3D_KSR1D_o/template updates history-3cQ.png

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.

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

Search: WildApricot.com 

About results ( seconds) Sort by: 
Sorry, an error occured when performing search.
Powered by Zendesk