The quick site creation features showcased here will be released in the second half of 2021. The related documentation is available for preview purposes.
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.
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.
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.
In most cases, planning for a new website starts with mockups and static designs. Adobe XD is a design tool building user experiences. Next we will inspect a UI Kit and mockups to help plan the structure of the Article Page Template.
Download the WKND Article Design File.
A generic AEM Core Components UI Kit is also available as a starting point for custom projects.
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:
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:
A finished solution of the Magazine Template can be downloaded and installed via Package Manager.
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:
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:
Congratulations, you have just created a new template and page with Adobe Experience Manager Sites.
A solution package for this chapter is available to download: WKND-Magazine-Template-SOLUTION-1.0.zip.