Before you start

Sitecore SXA is easy to use and quickly to start with. Before you start creating your pages and adding all the components, sit back and take a breath.

Start planning what you want to use and how you want to use it.

It would be a shame if you have built your website and made some mistakes along the way that can cost you a lot of time to fix.

When you have all the pieces that you want, find a way on how to structure them.

If you have a good structure from the beginning, it will be easier for content editors to find and use them.

For each requirement, analyze if out of the box Sitecore SXA components are available, or maybe the feature needs custom code.

In order to make this decision you will have to understand the possibilities of what SXA can offer.

A good overview of the possible options you have with SXA can be found at the Sitecore documentation: https://doc.sitecore.com/users/sxa/17/sitecore-experience-accelerator/en/the-sxa-renderings-and-rendering-variants.html.

Other considerations and possibilities

During my journey developing a website with Sitecore SXA I faced some moments where I needed to make decisions on how to proceed. My main goal was to build a fully functional basic website without any custom code.

1 advice I would like to give if in any case you need to change settings or add custom features, never customize the existing SXA parts. The best way would be to duplicate the items and create your own version of it and, as a best practice, don't use the default SXA folder to hold your custom elements.

Grid Structure

Some features of the newer versions of Bootstrap are not available in SXA. You can however add a custom Experience Accelarator Grid structure.

Styling components

If you decide to start styling your components, you have multiple options on how to achieve this.

Two of these options could be:

Set up presentation styles
Variant Css Class

For the presentation styles:

You can set multiple styles you plan to use and place the values within the items.

Here you can specify for what component the certain style can be used. On the component style properties you can then check this styling under the styling section.

This is an easy way of having styling throughout the website with the same options.

For example you could place a top and bottom margin for a component if you need additional spacing in between of the components.

For variant css class:

When creating a variant for a component like the Promo component, you can specify an Css Class (multiple classes can be added here) for a specific section or field.

For example if you have the Promo component and you place the “PromoText” field in this variant you specify the class you want to use. In the item “Variant Details” you can specify your class name in the “Css Class” field.

This will now be available for this Variant.

Planning and structure

Using insert option rules can help a lot on to restrict certain items to be only added where you want them to be.
The insert options can be found under “/sitecore/system/Settings/Rules/Insert Options”.

If you make for example a page list of all news items, you could have 1 root item that will contain all the news items. When you make the page list and select your root item and set it to show all children it will display all the items under the root item.

If you allow news items to be added anywhere it can be confusing for content editors. Using the insert option rules can help content editors to be able to only add items where they are supposed to be placed.

Building your page

A page will be constructed from 3 types of items. Your template, page design and partial design. Each template can have its own page design. For example you can specify a specific page design for your home page and another for a news overview page or a news detail page. On a page design you can add multiple partial designs. You can add for example the default partial designs that come with SXA, these are the “Metadata” and “Empty” partial designs. If you created your own partial designs you most likely have a header and footer partial design. Partial designs are reusable parts of your page. For example in a header you always will have a logo navigation and maybe a language selector. These items will need to be available on every page. Once you have set up your partial design you can add them to your page design. Once your page design is setup you link them to the template it needs to be on.

When you look in the Experience Editor you will see the partial designs as selected on the page design. Remember you can only add these parts on the partial designs itself. They are not editable from the template page.

Metadata

By default Sitecore SXA provides a Partial Design called "Metadata". This Partial design can be used for adding items to the HTML head section.

This includes (and others):

Browser Title
Favicon
Google Analytics

This partial design is different from others and it takes from the template "Metadata Partial Design".

Browser Title

For SEO compliance you might want to add your brand name within your header.

By default you have the item within the Settings of your SXA website. This items has the title field, this field will take the title of an item to be placed within your browser title.

If you want to add for example "- Sidewalk" as brand name for all pages you can add a variant text field. This will then include the text combined with your title field.

If in any case you would like to exclude pages for example your home page that might have a similar title already, you can use "Rules" to include or exclude certain pages.