Now that we have a header and footer, we would like to make this a default page that must be included. The function to achieve this will be Page Design, which we will introduce in this issue.
Building a Demo Site with Headless SXA - Part 7 Controlling Page Templates
XM CloudHeadless SXAPublished: 2023-02-15
Check page design
One standard one is included as page design.
Clicking on this Default will bring up the following dialog
The left side lists the partial designs that are currently available. Also, since a Demo Header was previously set up, there is one Header and one Footer, although they are different from the ones originally set up. Since we have created a new Demo footer, we have made the following changes.
In fact, the default page design is now applied to all items, so the Products page looks like this
The header and footer are set up, and no partial design is set up for the main part, allowing components to be placed.
Display order in page design
With the above in place, we would like to set the Header that is provided by default. The order is as follows
In this case, the partial design is applied from the top to the bottom, so the custom header and the standard header are displayed below the custom header.
Since there is no use having two headers, we will put them back this time.
Add a partial design for the main area
For this demo, we will create a partial design that constitutes a simple main area. First, create a Demo Main.
This time we will place components in the main area. This time, we will create two areas by placing Row Splitter, and place Title and Page Content there.
The main partial design to be used in the new page design is now ready.
Create a new page template
To create a new page design from the menu, click on the menu item below.
Name the page Demo Page as follows
Set the partial design to be used on the page. Apply the partial designs for the three Demos you have created so far.
After setting, save the page design to complete the page design settings.
Change the page template
The main partial design we have created calls out the item's title and content. The following information is again entered into the item.
The item for designating the page of this item is set under Designing, and the page design created this time is displayed in the list.
After the changes are made, the item is opened in the Experience Editor and can be edited as seen below.
Summary
In this article, we introduced you to the page design. We also checked and created a new design, including how to control the order of display and how partial designs combined with the main area can be set up.