Creating footer and header in SXA in Sitecore 9.0.1

Question

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.

Answer 1

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/

Answer 2

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):

• https://doc.sitecore.net/sitecore_experience_accelerator/designing/page_design/create_and_change_a_partial_design

• https://doc.sitecore.net/sitecore_experience_accelerator/designing/page_design/create_and_assign_a_page_design_in_the_content_editor

Answer 3

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.