Sitecore Experience Accelerator (SXA): What is Partial Design in SXA?
The
Sitecore Experience Accelerator (SXA) emphasize on the re-usability. For this Sitecore Experience Accelerator (SXA) providing the concept of Partial Design.
The Partial Design is the sub-set of page. Its uses set of responsive and reusable renderings. These renderings can be added to 12 columns provided by
Sitecore SXA Theme. The set of SXA Partial Designs help to create complete page.
For example, one website having Header and Footer:
Header generally contains following items:
- Logo with link
- Navigation
- Search Text Box
In ASP.NET MVC based project we used to create partial views to add above mentioned controls and including these partial design in the Master page, so that it can re-used throughout the website for consistent look and feel.
In the same way, we can utilize
Sitecore SXA Partial Design to create sub-set of page by adding multiple controls into the canvas provided by Sitecore.
We can add partial design in following ways:
Login to Sitecore Instance (instance name is USA) > Go to Presentation > Partial Designs > Right Click > You will get following options:
- Partial Design Folder: Used to clubbed partial design which serving the same type of purpose, e.g. Common partials or Page specific partial design e.g. Products
- Partial Design: This item, used to add renderings/components, e.g. Site Header related components.
Now create new Partial Design Folder and name it as “Common”:
Now right click Partial Design Folder called “Common” > It will give you again the 02 Insert Options Partial Design Folder and Partial Design > Select Partial Design > Name it as “Header”:
Now, we need to design the sub-set of page with required components provided by
Sitecore SXA. For this select the Partial Design Item > Click on Publish Tab > Click on Experience Editor > It will open the Partial Design, so that you can Drag and Drop the components:
Sitecore SXA provide by default following sections to add the components:
- Header: Used to add items, which needs to be displayed on the Header section of the website
- Main: Used to add items, which needs to be displayed on the Content section of website
- Footer: Used to add items, which needs to be displayed on the Footer section of the website
The above sections defined at the Page Layout present at the Physical Web Root folder of your website <Drive>\inetpub\wwwroot\<Site Instance Name>\Views\SxaLayout:
I have already explained some details about above mentioned Sitecore themes in my previous articles:
The above mentioned theme providing 12 columns layout to design the page.
Now we will design the Header mentioned in the below screen shot with the help of Sitecore SXA OOTB components and
Sitecore SXA Partial Design:
Now, we have to divide our Header section in Experience Editor into 3 parts:
For this, Select Header Section > Click on Add Here:
It will open Dialog Box to select, existing rendering/components:
Select
Splitter (Columns), because we have to divide existing row into 03 columns. If you want to add extra row, then you can use
Splitter (Rows) component:
By default
SXA Splitter (Columns) divide the row into 02 columns and each column will contains 6 columns:
If you will click on the + button then New column would be inserted which internally contains 06 columns:
If you click on the Edit style icon then it will give provide you the option to display columns as per device channel:
This type of customization you will not be getting in normal Sitecore development. After adding the 03 columns, we have to adjust the number of columns into equal numbers , i.e. 12/3=4 columns in every section.
You can perform this section by selecting the main
SXA Splitter Column component:
Select splitter column component:
Click on Edit Component Properties: It will open dialog box with properties
Go to each Grid property of Column1/Column2/Column3 and change it to 4 and click on OK and SAVE the page. Now all column section will come into one line:
Now add the components in each section:
For first section:
Upload the logo image at /sitecore/media library/Project/<Tenant Folder>/<Tenant>/<Site> as Logo.
After that go to /sitecore/content//<Tenant Folder>/<Tenant>/<Site>/Data/Images > Right Click > Create image item > Select image uploaded in previous step:
In the first section, Click on Add Here > Go to Media > Select
Image Reusable component
After that select the Image item, which created earlier and click OK:
Save the page
Now add
Navigation component and
Search Text box and apply the styling:
To use this Partial Design called “Header”, you have to create the Page Design first.
Go to the Sitecore Instance (instance name is USA) > Go to Presentation > Page Designs > Right Click > You will get following options:
- Page Design Folder: Used to club Page design which serving the same type of purpose, e.g. Products Page Design or Module specific Page.
- Page Design: This item, used to add diferent-2 partials, which will help to create page, which at the end would be visible to user.
Now create new Page Design Folder and name it as “Home”:
Now go to Partial Design section of Home Page Design and select the Header Partial, which we created earlier: Move to R.H.S.
Save the item. Now open the item and apply the styling and it will look like:
Now, we will apply Page Design to page, in our case its Home page.
Go to Home Page > Go to Page Design Option > Select Home Page Design > Save item:
You can also assign Partial Design to Page Design by opening the page in experience editor:
In the above screen shot, we have just selected the Header Partial Design but we can add as many Partial design as per our design like Footer which will be presented at the page in the Footer container including the Main container, which generally contains Items, which vary from page-to-page.
After this click on Pick Design and select the Page design, which we need to apply on the page:
With this way, you can re-use same Partial Design/Page Design in different-2 pages without changing any physical file and writing code. It will save lot of development time and accelerate the development of website.
Comments