Sitecore XM Cloud provides a flexible and scalable way to structure page layouts through Partial Designs and Page Designs. These design tools allow developers and content authors to create reusable templates that help in building consistent layouts across the website while minimizing redundant work. In this guide, we will explore what Partial Designs and Page Designs are, how they differ, and how to configure them for your pages in Sitecore XM Cloud.
What Are Partial Designs?
Partial Designs are reusable design fragments that define specific sections of a page. They allow developers to create common layout structures that can be reused across multiple Page Designs. Examples of Partial Designs include a header, footer, or a sidebar that needs to remain consistent across many pages.
Key Features of Partial Designs:
- Reusability: Once created, a Partial Design can be applied to multiple Page Designs, promoting reuse of common elements.
- Flexibility: Multiple Partial Designs can be combined to build more complex layouts.
- Consistency: By using Partial Designs, you ensure consistency in how common components, like navigation or footers, are applied across your site.
Typical Use Cases for Partial Designs:
- Header and Footer sections shared across all pages.
- Sidebar layouts used in specific sections of the website.
- Common promotional banners or call-to-action elements reused across multiple pages.
What Are Page Designs?
Page Designs are the overall layout structure for a page, which brings together both Partial Designs and component placeholders. A Page Design defines the entire structure of a page, deciding how it is divided and what Partial Designs are applied. You can think of a Page Design as the "master layout" for different types of pages, such as a homepage, product page, or article page.
Key Features of Page Designs:
- Complete Page Structure: Page Designs are responsible for determining the full layout and which Partial Designs are included.
- Flexible Component Placement: Components can be dynamically inserted into placeholders defined in the Page Design.
- Reusable Templates: Like Partial Designs, Page Designs can be reused for multiple pages, ensuring layout consistency. ### Typical Use Cases for Page Designs:
- Creating distinct layouts for homepage vs. content pages.
- Defining unique designs for landing pages or product pages.
- Building a template for blog or news article pages.
Configuring Partial Designs and Page Designs in Sitecore XM Cloud
In the Pages Editor, go the left panel and select "Templates" in there you'll find your partial designs and page designs.
First, we need to create a Partial Design, we can click in the top right corner to create one.
After creating you'll get a blank page with the Placeholders you have configured in the layout.
In there you can add any renderings you want to always appear on your page.
When you add a rendering as a partial design it cannot be clicked on pages, therefore it cannot be edited in any way. To make changes you'll have to go to the partial design configuration
After that, you can go ahead and create a Page Design, in this case we have the Default page design.
Then you select which partial designs to use and that's it.
Adding the Page Design to Page Templates
Go to this path on the Content Editor
/sitecore/content/YourProject/YourProject/Presentation/Page Designs
And click on Content.
There' you'll find the following:
You can select any page template you need and assign it the Page Design we created earlier. That way, any page created with that template will automatically apply that page design.
Conclusion
By using Partial Designs and Page Designs in Sitecore XM Cloud, you can create reusable, modular layouts that simplify site management and ensure consistency across your website. Partial Designs allow you to define reusable components such as headers and footers, while Page Designs give you control over the overall structure of the page. Together, they form the backbone of a scalable and flexible layout system, making it easier to manage large and complex websites.
Top comments (0)