Page templates

CAUTION

The Quick Site Creation tool is currently a tech preview. It is made available for testing and evaluation purposes and is not intended for production use unless agreed with Adobe Support.

In this chapter we will explore the relationship between a Page Template and a Page. We will build out an un-styled Magazine Article template based on some mockups from AdobeXD. In the process of building out the template, Core Components and advanced policy configurations are covered.

Prerequisites

This is a multi-part tutorial and it is assumed that the steps outlined in the Author content and publish changes chapter have been completed.

Objective

  1. Understand the details of Page Templates and how policies can be used to enforce granular control of page content.
  2. Learn how Templates and Pages are linked.
  3. Create a new template and author a page.

What you will build

In this part of the tutorial, you will build a new Magazine Article Page template that can be used to create new magazine articles and aligns with a common structure. The template will be based on designs and a UI Kit produced in AdobeXD. This chapter is only focused on building out the structure or skeleton of the template. No styles will be implemented but the template and pages will be functional.

Create the Magazine Article Page Template

When creating a page you must select a template, which will be used as the basis for creating the new page. The template defines the structure of the resultant page, initial content, and allowed components.

There are 3 main areas of Page Templates:

  1. Structure - defines components that are a part of the template. These will not be editable by content authors.
  2. Initial Content - defines components that the template will start with, these can be edited and/or deleted by content authors
  3. Policies - defines configurations on how components will behave and what options authors will have available.

Next, create a new template in AEM that matches the structure of the mockups. This will occur in a local instance of AEM. Follow the steps in the video below:

You can use the following thumbnail to identify your template (or upload your own!)

Article Page template thumbnail

Solution Package

A finished solution of the Magazine Template can be downloaded and installed via Package Manager.

Update the Header and Footer with Experience Fragments

A common practice when creating global content, such as a header or footer, is to use an Experience Fragment. Experience Fragments, allows users to combine multiple components to create a single, reference-able, component. Experience Fragments have the advantage of supporting multi-site management and localization.

The Site template generated a Header and Footer. Next, update the Experience Fragments to match the mockups. Follow the steps in the video below:

High level steps for the video below:

  1. Download the sample content package WKND-Starter-Assets-Skate-Article-1.2.zip.
  2. Upload and install the content package using Package Manager.
  3. Update the Header and Footer Experience Fragments to use the WKND logo

Create a Magazine article page

Next, create a new page using the Magazine Article Page template. Author the content of the page to match the site mockups. Follow the steps in the video below:

Use the provided text to populate the article body.

Congratulations!

Congratulations, you have just created a new template and page with Adobe Experience Manager Sites.

Next Steps

At this point the magazine article page and the site does not match the brand styles for WKND. Follow the Theming tutorial to learn the best practices for updating CSS and Javascript frontend code used to apply global styles to the site.

Solution Package

A solution package for this chapter is available to download: WKND-Magazine-Template-SOLUTION-1.0.zip.

On this page