Create and change a partial design

Abstract

Learn how to create a partial layout in the Content Editor or Experience Editor.

SXA uses sets of renderings, called partial designs that make up a webpage. You can use the partial designs to create the design elements of your pages quickly for a consistent style. For example, you can create parts of your page once, such as headers and footers, and then use them everywhere on your site.

You can also change a partial design for a specific page, for example, if you need a slightly different header on a particular page. Partial designs can inherit from each other, so you can build increasingly complex designs from a basic set of reusable partial designs.

This topic outlines how to:

Create a partial design

If the existing partial designs do not suit your needs, you can create a new partial design to reuse across pages, for example, a partial design for a page header.

To add a partial design in the Experience Editor:

  1. On the ribbon, on the Experience Accelerator tab, click Partial Design, and then click Insert a new Partial Design.

  2. In the Insert Item dialog box, select Partial Design, enter a name and click OK. SXA now loads an empty page. If you select the navigation check box, you can see you are in the presentation layer.

    D262BB12258D463C90637EAD7447CCFF.png

    Note

    If you want to create a group of related partial designs, select Partial Designs and enter a name and click OK. When you click the new group, you can add partial designs to it. 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, articles, and careers.

    30F5E292A238451688EE9B183C51D001.png

  3. Now you can add renderings to your partial design by dragging them from the Toolbox to the page. For example, for a header, you could add some layout elements and divide the header in 4 columns on the left and 8 on the right. Drag the Splitter (Columns) rendering to the page and split the layout.

    8FD668E31D7747C586C13FDC37DE0BC7.png
    4C9C4E83EF2C4B81807E24E9AA5D32B3.png

  4. Use the Image (Reusable) rendering to add a logo to the left 4 columns. To do that, drag the Image (Reusable) rendering to the left columns, enter a name and click OK.

    9290A45FD59C41F7A87A54D991DCD01B.png

  5. In the Select the Associated Content dialog, select the image and click OK.

    C771D4BB41CA480E9BEEF3CCF826E315.png

    Note

    If you select a data source under the Page Data node it will be a local data source that is stored as a subitem of the page item. Any changes you make to local data sources will only affect the page you are working on. If you want to be able to reuse the data source and manage it globally, select a different place in the tree.

    When your header is ready after for example adding a slogan to the header, and adding navigation, save it to make it available in the Partial Design menu.

    FB53C5271F134123AFFB251ACCA4A9DE.png

Change a partial design

Occasionally, you may want to change a partial design. For example, you might need to update it because the address in the footer has changed or because you want to add a slogan to the header.

Note

When you change a partial design, the changes are updated on every page that uses this partial design. Therefore, you should make sure that you check where it is used before you change it.

To change a partial design in the Experience Editor:

  1. On the ribbon, on the Experience Accelerator tab, click Partial Design.

  2. Select the partial design that you want to change.

    Note

    When you hover over the partial designs, the renderings that belong to this partial design are highlighted in green on your page.

  3. Make the changes by for example changing the text or adding renderings from the Toolbox to the partial design.

  4. On the main ribbon, click Save8E4E3E3CA0A14E5F9FC405641C97A5E4.png. Now the partial design has changed for every page that uses it.