Page templates page-templates
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 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
- Understand the details of Page Templates and how policies can be used to enforce granular control of page content.
- Learn how Templates and Pages are linked.
- Create a new template and author a page.
What you will build 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 is 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 are implemented but the template and pages are functional.
Create the Magazine Article Page Template
When creating a page you must select a template, which is 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:
- Structure - defines components that are a part of the template. These are not editable by content authors.
- Initial Content - defines components that the template starts with, these can be edited and/or deleted by content authors
- Policies - defines configurations on how components 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:
Transcript
Pages in AEM are based off of a template. The basic site template created several templates for us and the sample content is based off of them. So, let’s go ahead and review these templates now.
I’ll navigate to tools general templates.
Under the weekend sites folder, we can see that we’ve got several page templates that have been already created, the article page, content page, page with right rail and homepage are all pages expected to be used on the site. The web variation is a special template just for experience fragments, which we’ll cover in the next video. Now, if we go ahead and open up the article page template we can see the basic structure.
We’ve got a global header and a global footer. We’ve got a title plate, a component placeholder and then a main container. The container defines which components are allowed to be added to the page.
Let’s go ahead and create a new template for our article page. I’ll return to the console and create a new template. I’ll select the page as the template type.
For the template title, I’ll put in magazine article page and then I’ll go ahead and click create.
Next, we can open up our new template.
When we open up our new template in structure mode we have a pre-defined container with several allowed components already configured. Next let’s add a header. A header is typically made up of multiple components and a standard best practice is to manage the header as an experience fragment. So, I’ll start by adding a new experience fragment component above the main container.
Next, I’ll configure the experience fragment to point to the header created by our site template. So, we can navigate through the structure and we can find the header variation. So, we’ll select that and click done. I’ll configure the policy of the experience fragment. Policies are similar to dialogues in that they allow us to configure various properties and behavior of a component. Policies differ in that they can be reused across templates to promote consistency.
Next, I’ll select the page header policy which is already defined by the site template. And the important thing here to realize is that we’re setting the CSS class two header, and then in our front end code, we can target this CSS class. You’ll also notice that the same policy is being used on the article page and the homepage and the content page with right rail. And so, this allows us to have consistency across our templates and ultimately across all of our pages.
And so, you’ll notice that once we save the changes that this header is now styled. And so, it’s picking up CSS rules based on this additional class.
I’ll repeat the same steps to include the footer. I’ll add another experience fragment component and I’ll configure it to point to the footer variation.
So now we’re pointing to the footer variation and you can see now the footer is populated. And again, I’m going to update the policy for this experience fragment. And this time I will select the policy of page footer. And again, you’ll notice we’ve got a footer CSS class that will get applied.
And once we saved those changes now you can see the styled footer.
Next, let’s start populating the main body of our template. So, the first thing that we’re going to do is actually lock this main container cause we’re going to introduce a two column layout. And so, in this main container I’m going to go ahead and update its policy.
So right now, the current policy is page content. And what I’m going to actually go ahead and do is introduce a new policy and we’ll call this body main. And this is going to define the main region of our page template. Now, one of the policies we can configure for containers is the allowed components. So, you’ll notice that we’ve got all of the core content components checked, as well as the core form components and the core structure components.
So, we’ll leave those settings set as default. And this time we’re also going to go ahead and update the styles and I’m going to introduce a default CSS class here. We’re going to call it main and we’ll target this with some CSS rules in the next chapter. And then we’re going to go ahead and clean up any of these additional styles.
So go ahead and click done to save our changes. I’ll go ahead and add an image component. We want this image component to be a fixed part of the template, but we want to give authors the ability to choose unique images per page. By unlocking the component, we can achieve this behavior. Users will not be able to remove this image from their page but they will be able to edit it.
Let’s add our breadcrumb component. The breadcrumb will not be edited at the page level but we will update the policy to configure where the breadcrumb navigation will start. I’ll go ahead and update the policy for the breadcrumb and I’ll select content breadcrumb and you’ll notice this is used on some of the other templates and this provides a standard CSS that we’ll target. Next, let’s go ahead and add our main content container.
So, I’ll insert a new component and we’re going to go ahead and add a new container component. And this time, since this will be editable I’ll unlock the component, and you’ll notice that it says no allowed components for the container. So, to update this, we’ll go into its policy.
And this time we’ll select the page content policy.
Now under allowed components, we want to be very specific which components authors can use. So here I’m going to actually uncheck the core structure components. Since this includes navigation we don’t think content authors will use those. The other thing we’ll review is the default components. So, whenever a user drags an image from the asset finder it’ll automatically use the image core content component.
We’ll leave the default styles as is and save the changes. So, notice now we have our allowed components that are populated.
Now in our mock-ups, we had a two-column layout. So, I’m going to introduce another container component that will act as the side rail.
I’ll go ahead and update this components policy. And since this is a new container that we really haven’t used before, I’ll introduce a new policy, we’ll call it magazine page side rail. Now this rail is going to be small, so we want to be very specific with which components we allowed. So, I’ll go ahead and add a button component, download image list separator social media sharing, text and title. So, these are the only components that will be allowed.
We’ll go ahead and click done.
And none of them are showing up right now. And so, what I need to do is actually unlock this component and now content authors will be able to use it.
So hopefully you are starting to see the power of the container component and how we can set these very granular policies to enforce what components are available and where they can be used. Now, if you recall in our layout we had our two columns sitting side by side. So next we’re going to engage something called lamp mode and actually shrink our main layout container so that it is eight columns wide.
And for our side rail, we’re again going to engage layout mode. And this time I’ll shrink it to four column slide dragging from right to left.
So, you’ll notice now the two containers are sitting side by side and then I’m actually going to create a one column gap in between the main container and the side container.
We can also update the policies for individual content components to enable more advanced authoring features.
Let’s go ahead and update the policy for our text component inside the main content container. So, I’ll click the policy icon, and this will bring up the policy dialogue for the text component.
So, I’ll go ahead and reuse an existing policy. And under plugins, you can see all these different features for the rich text editor. So go ahead and click through and enable some of these. So, we can add pasting, copying and pasting, find and replace go into formatting add a few additional formatting options. We’ll add underline and you can also enable different paragraph styles. So, for now, we’ll just leave it at paragraph block quote, and pre-formatted and then we’ll click done to save these changes. And so, these advanced editorial capabilities of the text component will be enabled whenever a text component is added to this main content container. At this point, the structure of the template looks good. Next, I’m going to switch into the initial content mode. Here, we can define several components that will be initially added to the page when it’s created. This will save content authors a little bit of time but they’ll also have the flexibility to remove or edit these components if needed.
I’ll start by adding a title component that will represent the main title for the article.
I’ll leave the default settings. Next, I’ll add a second title component and this will be kind of the by author line. So go ahead and pre-configure this, and we’ll enter the text by author, and this time I’ll set the size to H four.
And then I’ll go ahead and add one more text component to that main body.
All right, so that looks pretty good. Let’s go ahead and populate the side rail. I’ll go ahead and insert a new component and you’ll notice that the allowed components is far fewer than in the main container. And this is due to that policy configuration we created a few minutes earlier. I’ll go ahead and add a title component.
And so go ahead and populate this title component with shared this story. And this would just be a call to action to share this story on social media. We’ll set the size to H five.
Next, I’ll go ahead and add a component beneath that. And this will be our social media sharing component. We’ll leave those configurations as default. Beneath that, we’re going to go ahead and add a download component and this will allow a user to download a PDF version of the article. Beneath that we’ll add a list component and this will share a list of related articles.
Next, I’ll go ahead and set some initial page properties. Page properties are set of metadata that’s associated with the page. And what we can do at the template level is set up some initial page properties. So, we’re going to check social media sharing for Facebook and Pinterest.
Then we’ll save these changes.
And you’ll notice now the social media sharing icon is correctly populated. All right, so we’re finished with our changes. Let’s view the template in the admin console. So, I’ll click view in admin and you’ll notice that our template is currently in a draft state. So, content others aren’t able to use it. I’ll go ahead and enable it. Now that we’re ready to create pages from it. Let’s go ahead and add an icon so that we can easily identify our template.
I’ll go ahead and click properties for our template. And this is the properties for our magazine article page. And then I’ll go ahead and click upload image to upload a thumbnail for my file system. Then I’ll go ahead and save those changes. Next, you might have to hit refresh a couple of times to see the thumbnail appear, but there it goes. All right. So those are all the updates to the magazine article page template. In the next video, we will look to update the header and footer to match our mock-ups and the weekend design. - -
You can use the following thumbnail to identify your template (or upload your own!)
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 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:
Transcript
Let’s go ahead and make some updates to the header and footer to match our WKND mockups. It’s a best practice to implement global elements like the header and footer as an experience fragment. An experience fragment allows authors to combine multiple components and manage them in a central location. Experience fragments support localization and multi-lingual sites. So it’s possible to create variations of the header per locale. To accelerate the tutorial, I have a package that installs a few assets and some pages. We’ll go ahead and upload those via Package Manager. So I’ll navigate to tools, deployment, and packages.
And this is Package Manager. And here, we can upload a new AEM content package. So I’ll click Upload and I’ll browse to my content package.
I’ll click Okay to upload the package. And then once it’s uploaded, I’ll click Install.
So let’s look at those changes. So I’ll navigate back to the AEM start screen. And first, let’s navigate into Assets. So under the WKDN Site folder, you’ll notice a new folder for English and beneath that, a site folder. This includes light and dark versions of the WKND logo.
Several assets are also included to populate the article. Under Magazine, LA skate parks, we’ve got some images of skateboarders as well as a PDF version of our article.
So let’s go ahead and update our experience fragments. From the AEM start screen, I’ll go ahead and navigate to Experience Fragments. And under WKND Site, en, Site, you can see we’ve got a header experience fragment and we’ve got a single variation. So go ahead and open this.
So you can see this is the experience fragment editor. And it’s very similar to the page editor. The difference really is that the experience fragment is just a portion of our page. And so typically, just includes a single content container. Let’s go ahead and review the components that are currently populating our header.
We can view the content tree. You can see we’ve got an image, navigation, quick search, and language navigation. Let’s go ahead and update the image. So we’ll replace the wireframe image with our WKND logo.
I’ll go ahead and update this the metadata, add some alt text to identify this as the WKND logo.
Let’s inspect the navigation component. We’ll go ahead and open up the components dialogue. And the navigation component is dynamically driven by the page hierarchy. The navigation route defines where the navigation should start. And here, it’s pointed to the English page beneath the WKND site. The navigation will then be populated by all of the child pages beneath this route. Exclude route levels and navigation structure depth. Give us some options for exactly what pages are included in our top-level navigation. We’ll leave these settings in place.
Next, let’s go ahead and inspect the quick search component.
Let’s update the search route to point beneath the WKND English page. This ensures that only search results are returned from within the English page. So those are the only updates we’ll do for the header experience fragment. Let’s move on to the footer. We’ll go ahead and open up the footer experience fragment.
And you can see it resembles the header experience fragment. Reviewing the content tree, you can see we’ve got a separator component, image, title, and two text components. Let’s go ahead and update the logo. This time, we’ll use the WKND light logo.
So we’ll drag that onto the page and then we’ll configure the image. For the metadata, we’ll set the alt text to WKND logo.
Next, we’ll update the copyright info.
So let’s select the title component.
This time, we’ll use the inline editing feature. And instead of company name, we’ll put in WKND Site_2021.
We’ll go ahead and leave the rest of the footer as is. -
High level steps for the video below:
- Download the sample content package WKND-Starter-Assets-Skate-Article-1.2.zip.
- Upload and install the content package using Package Manager.
- 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:
Transcript
Now that our article page template, header and footer are configured, let’s go ahead and create a new article page. Before we do that, let’s make some adjustments to the existing content hierarchy. First, let’s edit the properties of this Articles page. Instead of Articles, we’ll retitle it to be Magazine.
And I’ll save those changes.
Next, let’s create a few more pages.
So I’ll create a page using the content page template, and we’ll create this one and it’ll be called Adventures. Click Done, and I’ll create one more page.
And again, I’ll use the content page template, and this one will be called FAQs. And we’re just doing this so that we can round out the content hierarchy.
Now, the navigation reflects our content page hierarchy, as well as the order that it’s in. So we can go into list view, and we can go ahead and reorder these. So we’ll move the Adventures up, and we’ll move the FAQs up as well. This new order will be reflected in our navigation, in the header and footer.
From the site’s console, I’ll navigate beneath Magazine and create a new page.
I’ll select our article page template and I’ll title it The Ultimate Guide to LA Skateparks. And the name will be Guide dash LA dash Skateparks.
Opening the page, we can see how the template influenced the page. We can see the updated header and footer, and notice that these cannot be modified here.
Beneath the header, we have our hero image, and this can be edited, but it is fixed in place.
And beneath that, we’ve got the breadcrumb component, which is fixed and locked, and it shows the Magazine hierarchy as well as the current page. And beneath this, we’ve got our two containers with some initial content.
Comparing it to the mock-up, I’ll go ahead and add a skateboarding image.
Next, I’ll update the By Author title and give it the name Stacey Roswells.
And I can add some text to populate the article body.
Let’s look at some of the advanced features of the Text component. I’ll add an additional Text component that’s going to contain a quote that we want to highlight as part of the article.
I’ll open it up in full screen mode and I’ll go ahead and enter our quote here. So ‘There is no better place to shred than Los Angeles.’ I’ll use our paragraph styles to make this line a quote block.
On the next line, I’ll switch it back to paragraph and we’ll attribute it to Jacob Wester, a very famous pro skater.
Next, I’ll add another Title component as a new header as part of our article.
I’ll edit this text to be Venice Beach, and then I’ll go ahead and change the size to an H2.
We can add some additional images to further populate the article.
Next, I can configure the Download component.
We’ll select the Document from the Asset Finder and add a PDF version of the article to the component.
I’ll update the description to be ‘Get the full story.’ And set the button labeled to be Download PDF.
Let’s configure the List component. The List component will create a list of pages that can be used as an alternative navigation structure. I’ll build the list using child pages and set the parent page as the Magazine page.
Under Item Settings, I’ll choose to Link the items and Show the date.
All right, so our Magazine article is starting to take shape. Let’s go ahead and view this page outside of the AEM Editor. The easiest way to do that is to click the Page Properties menu and click View as Published.
Let’s compare our current page with the mock-ups from Adobe XD.
I’ll go ahead and resize these windows so we can view them side-by-side.
And if we compare the two, you can see we’ve got a lot of the major structural elements already in place, navigation, hero image, two column layout, quote block. And so you’ll notice the thing that’s missing is our WKND branded styles. And so that’s what we’re going to look at in the next chapter around Theming. -
Use the provided text to populate the article body.
Congratulations! congratulations
Congratulations, you have just created a new template and page with Adobe Experience Manager Sites.
Next Steps 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.
recommendation-more-help
b2a561c1-47c0-4182-b8c1-757a197484f9