Templates to Create Pages that are Editable with the Page Editor creating-page-templates

You can use the Template Editor to create templates that your content authors can use to create pages that are editable with the Page Editor.

Overview overview

When an author creates a page, they must select a template, which is used as the basis for the new page. The template defines the structure of the resultant page, any initial content, and the components that can be used when editing the page in the Page Editor.

With the Template Editor, creating and maintaining templates is not developer-only task. A type of power-user, who is called a template author, can create templates. Developers are required to setup the environment, create client libraries, and create the components to be used, but once these basics are in place the template author has the flexibility to create and configure templates without involving a developer.

The Template Editor allows template authors to:

This document explains how a template author can use the Template Editor to create and manage editable templates.

For detailed information about how editable templates work at a technical level, see the developer document Editable Templates for more information.

Before You Start before-you-start

Before you start, it is important to consider that creating a template requires collaboration. For this reason the Role is indicated for each task. This does not impact how you actually use a template to create a page, but it does impact how a page relates to its template.

Roles roles

Creating a new template requires collaboration between the following roles:

Due to the nature of some tasks such as creating a folder, a development environment is needed, and this requires knowledge/experience.

The tasks detailed in this document are listed with the role responsible for carrying them out.

Creating and Managing Templates creating-and-managing-templates

When creating an editable template you:

Creating a Template Folder - Admin creating-a-template-folder-admin

A template folder should be created for your project to hold your project-specific templates. This is an admin task and is described in the document Page Templates.

Creating a New Template - Template Author creating-a-new-template-template-author

Defining Template Properties - Template Author defining-template-properties-template-author

A template can have the following properties:

After creating the template, use the Templates Console to view or edit the template properties.

Template Thumbnail Image template-thumbnail-image

To define the template thumbnail:

Enabling and Allowing a Template - Template Author enabling-and-allowing-a-template-template-author

To be able to use a template when creating a page you need to:

Enabling a Template - Template Author enabling-a-template-template-author

A template can be enabled or disabled to make it available or unavailable in the Create Page wizard.

Use the Templates Console to enable or disable a template.

Allowing a Template - Author allowing-a-template-author

A template can be made available or unavailable for certain page branches.

Publishing a Template - Template Author publishing-a-template-template-author

As the template is referenced when a page is rendered, the fully configured template must be published so that it is available on the publish environment.

Publish templates using the Templates Console.

Editing Templates - Template Authors editing-templates-template-authors

When creating or editing a template there are various aspects that you can define. Editing templates is similar to page authoring.

The Mode selector in the toolbar lets you select and edit the appropriate aspect of the template:

While the Page Policy option on the Page Information menu lets you select the required page policies:

Template Attributes template-attributes

The following attributes of a template can be edited:

Structure template-structure

Components added to the structure cannot be moved/removed from resultant pages by the page authors. If you want page authors to be able to add and remove components to resultant pages, then you need to add a paragraph system to the template.

When components are locked you can add content, which cannot be edited by page authors. You can unlock components to allow you to define Initial Content.

Initial Content template-initial-content

When a component has been unlocked you can define the initial content that is copied to the resultant page(s), created from the template. These unlocked components can be edited on the resulting page(s).

Layout template-layout

With the layout you can predefine the template layout for the required device formats. Layout mode for template authoring has the same functionality as the Layout mode for page authoring.

Page Policies template-page-policies

Page policies can connect predefined page policies to the page. These page policies define the various design configurations.

Styles template-styles

The Style System allows a template author to define style classes in the content policy of a component so that a content author is able to select them when editing the component on a page. These styles can be alternative visual variations of a component, making it more flexible.

Please see the Style System documentation for more information.

Editing a Template - Structure - Template Author editing-a-template-structure-template-author

In Structure mode you define components and content for your template and define policy for the template and its components.

There are several actions you can take in the Structure mode of the template editor and several features to assist you:

Add Components add-components

There are several mechanisms for adding components to the template:

Once added, each component is marked with:

Component Actions component-actions

Take actions on the components once they have been added to the template. Each individual instance has a toolbar that lets you access the available actions, the toolbar is dependent on the component type.

It can also be dependent on actions taken such as when a policy has been associated with the component, then the design configuration icon becomes available.

Edit and Configure edit-and-configure

With these two actions you can add content to your components.

Border to Indicate Structure border-to-indicate-structure

When working in Structure mode an orange border indicates the component currently selected. A dotted line also indicates the parent component.

Policy and Properties (General) policy-and-properties-general

The content (or design) policies define the design properties of a component. For example, the components available or minimum/maximum dimensions. These are applicable to the template (and pages created with the template).

Create a content policy, or select an existing one, for a component.

This lets you define the design details.

The configuration window is divided in two.

The properties available are dependent on the selected component. For example, for a text component the properties define the copy and paste options, formatting options, and paragraph style amongst other options.

Policy policy

The content (or design) policies define the design properties of a component. For example, the components available or minimum/maximum dimensions. These are applicable to the template (and pages created with the template).

Under Policy you can select an existing policy to apply to the component by way of the drop-down.

A new policy can be added by selecting the add button next to the Select policy drop-down. Give a new title in the Policy Title field.

The selected existing policy in the Select policy drop-down list can be copied as a new policy using the copy button next to the drop-down list. Give a new title in the Policy Title field. By default the copied policy is titled Copy of X, where X is the title of the copied policy.

A description of the policy is optional in the Policy Description field.

In the Other templates also using the selected policy section, you can easily see which other templates use the policy selected in the Select policy drop-down list.

Properties properties

Under the Properties heading you can define the settings of the component. The heading has two tabs:

Main main

On the Main tab, the most important settings of the component are defined.

For example, for an image component the allowed widths can be defined along with enabling lazy loading.

If a setting allows for multiple configurations, select the Add button to add another configuration.

To remove a configuration, select the Delete button located to the right of the configuration.

To remove a configuration, select the Delete button.

Features features

The Features tab lets you enable or disable additional features of the component.

For example, for an image component you can define the cropping proportions, allowed image orientations, and if uploads are allowed.

Policy and Properties (Layout Container) policy-and-properties-layout-container

The policy and properties settings of a layout container are similar to the general usage, but with some differences.

The configuration window is divided in two, just as in the general usage of the window.

Policy policy-layout

The content (or design) policies define the design properties of a component. For example, the components available or minimum/maximum dimensions. These are applicable to the template (and pages created with the template).

Under Policy you can select an existing policy to apply to the component via the drop-down. This functions just as it does in the general usage of the window.

Properties properties-layout

Under the Properties heading you can choose which components are available for the layout container and define their settings. The heading has three tabs:

Allowed Components allowed-components

On the Allowed Components tab, you define which components are available for the layout container.

Default Components default-components

On the Default Components tab, you define which components are automatically associated with given media types so that when an author drags an asset from the asset browser, AEM knows with which component to associate it. Only components with drop zones are available for such configuration.

Select Add Mapping to add an entirely new component and MIME type mapping.

Select a component in the list and select Add type to add an additional MIME type to an already mapped component. Click the Delete icon to remove a MIME type.

Responsive Settings responsive-settings

On the Responsive Settings tab you can configure the number of columns in the resulting grid of the layout container.

Unlock and Lock Components unlock-and-lock-components

You unlock/lock components to define whether the content is available for change in Initial Content mode.

When a component has been unlocked:

This includes unlocking container components so that further components can be added, either in Initial Content mode or on resulting pages. If you have already added components/content to the container before unlocking it, then these are no longer be shown when in Structure mode, but they are shown in Initial Content mode. In Structure Mode, only the container component itself is shown with its list of Allowed Components.

To save space, the layout container does not grow to accommodate the list of allowed components. Rather the container becomes a scrollable list.

Components that are configurable are shown with a Policy icon, which can be tapped or clicked to edit the policy and properties of that component.

Relationship to Existing Pages relationship-to-existing-pages

If the structure is updated after creating pages based on the template, then these pages will reflect the changes to the template. A warning is displayed in the toolbar to remind you of this fact along with confirmation dialogues.

Editing a Template - Initial Content - Author editing-a-template-initial-content-author

Initial Content mode is used to defined content that will appear when a page is first created based on the template. The initial content can then be edited by page authors.

Although all content created in Structure mode is visible in Initial Content, only components that have been unlocked can be selected and edited.

Editing a Template - Layout - Template Author editing-a-template-layout-template-author

You can define the template layout for a range of devices. Responsive layout for templates operates as it does for page authoring.

Editing a Template - Page Policy - Template Author/Developer editing-a-template-page-policy-template-author-developer

The page policy including required client-side libraries is maintained under the Page Policy option of the Page Information menu.

To access the Page Policy dialog:

Page Policies page-policies

You can apply a content policy to either the template or resultant pages. This defines the content policy for the main paragraph system on the page.

Page Properties page-properties

Using page properties, you can define the required client-side libraries by using the Page Design dialog. These client-side libraries include stylesheets and javascript to be loaded with the template and pages created with that template.

Editing a Template - Initial Page Properties - Author editing-a-template-initial-page-properties-author

Using the Initial Page Properties option, you can define the initial page properties to be used when creating resultant pages.

Best Practices best-practices

When creating templates you should consider: