Create and assign a page design in the Content Editor
To design a webpage, you work with reusable pieces of content and layout. A page design is a group of partial designs that make up the design of a webpage.
For example, you might need a reusable page structure for a blog page. By creating a page design that includes the partial designs for the blog page, you create a basic template that content authors can use to create content without having to worry about the design of the page.
This topic describes how to work with page designs in the Content Editor and Experience Editor, but you can also work with page designs in XM Cloud Pages.
Do not add components directly to page designs. Page designs cannot hold the information on their own. Instead, they refer to the information stored in the partial designs. Therefore, if you add components directly to the page designs, they do not render on the page.
Create a page design
A page design determines the layout of a page and consists of partial designs. You can add page designs to the presentation folder of your site and select the partial designs that you want to add.
To create a page design:
-
In the content tree, on your site, click Presentation, right-click Page Designs and then click Insert > Page Design.
NoteIf you want to add a group of related page designs, click Page Design Folder. This can be convenient if you have a complex site that requires a large number of partial designs. You can divide your page into sections of partial designs, for example, blogs, news, products, and careers.
-
Enter a name for the new page design and click OK.
-
In the Designing section, select the partial designs that you want to add, click the right arrow
to move them to the list of selected items, and then save it.
NotePartial designs that are assigned to the same page design must have different values specified in their Signature field.
-
Right-click the new page design, and then click Experience Editor to view your design.
Update the partial design signature in the component properties
Each partial design has an identifier stored in the Signature field of the partial design item. Partial designs added to the same page design must have unique signatures.
If you're using different partial designs with the same signature for a page design, make the signatures unique by changing at least one of the signatures.
If the partial design has any components and is being used by a page, update the Placeholder field accordingly in the properties of each component. Otherwise, you'll break the link between the components and the partial design.
You can update the component properties in the Content Editor or Experience Editor. Do this for all pages that use the partial design.
To update the component properties in the Content Editor:
-
Select the page that uses the partial design.
-
On the PRESENTATION tab, click Details.
-
In the Layout Details dialog, click the relevant component.
-
In the Control Properties dialog, in the Placeholder field, update the path with the renamed signature. Add the sxa- prefix to the signature name.
-
Repeat these steps for each component.
To update the component properties in the Experience Editor:
-
Open the partial design where you've changed the signature.
-
In the floating toolbar of each component, click More > Edit component properties.
-
In the Control Properties dialog, in the Placeholder field, update the path with the renamed signature. Add the sxa- prefix to the signature name.
Assign a page design to a template
You can use page designs to map content types to your page layouts. By doing this, you keep the layout of your site consistent. For webpages that you use often, such as landing pages, product pages, and navigation pages, you can keep them consistent by assigning a page design to the template for that page. In this way, you link the content to the design.
To assign a page design to a template:
-
In the content tree, go to your site, click Presentation > Page Designs, and then click the Content tab.
-
In the Designing section, select a template in the left column and, to associate it with a page design, in the right column, select the page design.
You can also assign page designs to specific pages. This might be necessary when you need a page that you normally don't use very often, for example, a release notes page. To assign a page design to a single page, go to your site and select the page. In the Designing section, select the design from the drop-down list and save the changes.
To view the result in the Experience Editor, right-click the page and then click Experience Editor.