Our team is new to SXA. We are building our first site using SXA. So far the experience is really great. We are currently creating header and footer as Partial designs and assigning them on Page designs. We want to have same header and footer on every page.

Is this valid setup? Or with SXA we should use different approach?

We are using SXA 1.6 with Sitecore 9.0.1.

3 Answers 3


Yes you are doing a valid setup. In your case to put header and footer together create a new Page Design and configured it to use the two new Partial Designs To actually start using the Page Design you need to apply it to a Template to Design Mapping. You can do this on the ‘Page Designs’ item or from the experience editor. After that it’s pretty simple. Just create a new page of type ‘Page’ and you’ll get it prefilled with the two partial designs.

Design process with out-of-the-box components using SXA is as below:

  1. Create site with new theme
  2. Create partial designs (wireframe)
  3. Create page designs (wireframe)
  4. Create page item for each page design
  5. Export theme using creative exchange
  6. In parallel:

    • Front-end developer applies styling to the theme

    • Content editor creates pages and content

  7. Import theme using creative exchange

Try to have a look at: http://reinoudvandalen.nl/blog/sitecore-experience-accelerator-partial-designs-and-page-designs/

  • Thanks for your provided steps. We are exactly doing the same :) Commented Mar 6, 2018 at 9:46

Yes, it is, then you have to specify mapping for you Page Design (specify which templates should use it).

If you think that seeing other solutions will help you I recommend you to install one of the demo sites:

Docs (how to create and assign partials):

  • Thanks for your answer and especially links to demo sites :) Commented Mar 6, 2018 at 9:44

Its a basic bootstrap structure.

you drop container components in header and footer placeholder in EE mode and name them as header and footer by apply custom css classes.

you put a splitter and divide it in 2 columns, 3-col for 1st one for logo, and other one with 9-col for navigation.

Same goes for the footer. Just assign the css classed on each component and let the frontends style them for you.

You can create custom classes in your Sitecore website folder.

/sitecore/content/Tenant/Your website/Presentation/Styles

I give you a tip, use prfixes for you custom classes. like your project name is "google" you can use "gg-your-class-name" this way you can differential your classes and the rest of the SXA classes.

  • We are doing it almost the same :) Thanks for answer Commented Mar 6, 2018 at 9:44
  • 1
    check my free tip in my answer. you will thank me for the rest of your projects :) Commented Mar 6, 2018 at 9:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.