SXA Page Design Creation : Tutorial 7

Till the previous post, we are done with Implementation of Partial Design required for our site, now will add the partial designs to Page Design.

But before implmentation, let's discuss Page Design

What is Page Design?

"Page design is used to group partial designs, it's kind of layout - where we add multiple partial designs and apply this page design to the page."

Flow:

In descending order, the list of components is used to create the partial design and the list of partial designs are used to create page design.

• Page Design

• List of Partial Designs

• Partial Design

• List of Components

When to use?

"When we wanted to reuse the list of components together so we add them in partial design, and when we need to reuse more than one partial designs together then will add them in Page design."

Now let's start the creation of Page Design for our site, so first create page design as defaultPageDesign by going at path "/Sitecore/content/demosite1/mydemosite/Presentation/Page Designs"

and add partial design as PartialHeader and PartialFooter to the Page Design, now save and come to the Home page and select page design to this page.

and apply this change to the Home Page

 now open it as preview mode

Now I wanted to apply this page design changes on all the pages as default, for that let's look into Home's Standard Value

and if you see page design changes is getting applied from Page template's standard value

so here I'm applying page design changes to the Page template's standard value

Now, this changes are applied to all the existing pages and new page when we will create in future.


Till now we are done with page design creation and their usage.

In the next post, will add rendering components to the pages as per our need in the body (main) section...

SXA Partial Design Creation Part 2 : Tutorial 6

Till previous post, we were working on partial design for Header, Just to recap - we added image -logo in PartialHeader.

Let's start with adding navigation to the column by dragging Navigation - Navigation after that open the component properties and add data source (generally we give home path as navigation link starting point)

currently we don't have the other pages so first will create pages as AboutUs, Services, ContactUs, Elements.

Now come back to the experience editor and see navigation item with Item list will be visible

will take SXA existing styling feature for navigation component as - Main Navigation drop down vertical and Indent Side

save all, and now change the view mode as preview and it will look like

Now will add Social - Social Media Share to the third column by dragging and will choose data source as default one.

Save all.
Now open PartialHeader as preview mode, it is ready now.

Now let's start with implementation of PartialFooter,

Giving the steps below to implement PartialFooter
1. First will Open Created PartialFooter as experience editor mode and remember to save each changes every time.

2. add the Page Structure - Container component to the footer section

3. After this will add Page Structure - Splitter rows by updating rows as 2 by clicking on Plus symbol

4. Once done will add Page Structure - Splitter columns to the first row of footer section by updating columns as (4-2-2-4) 4 part by clicking on Plus symbol and update the size by changing from Component Properties.

5. After this will Media - Image (reusable) to the first column of size-4 and will give data source as site-logo

6. then will add Address of the site to the second column of size-2 by adding Page Content - Rich text (reusable) and once added will add the address content.

7. After this will add contact support to the third column of size-2 by adding Page Content - Rich text (reusable) and once added will add the contact support content.

8. and now will add the social links of the site to the fourth column of size-4 by adding Social - Social Media Share and set the data source as default.

9. Now move to next row of the footer section and add Page Structure - Splitter columns and update column size(6-6) by changing from Component properties.

10. in the first column will add Page Content - Rich text (reusable) and will add copyright content

11. once done add the Navigation - Navigation to the second column with data source as Home path and also will set styling as drop down vertical with link level one.

Save all, now we are done with PartialFooter.

Our Partial designs are ready, In next post will start working on Page Design and usages...

SXA Partial Design Creation Part-1: Tutorial 5

In previous post, we worked on creation of Tenant and Site. Now it's time to create pages using SXA Features, For that first here we are referencing sample static site, having source code.

Let's start implementation with Sitecore SXA using provided static site. First unzip the project by downloading source code which provided above and after this make zip of image directories and now come to /sitecore/media library/Project/demosite1 upload as advanced and select zip image directories

After successfully uploaded images, it's time to start creating pages using SXA. and below is the static page as reference which we are going to create using SXA

Here we see and know that header and footer will be repeating on all the pages. So first we will work on master components ( i mean Header and Footer) using SXA Partial Design Feature 
And before implementing Partial Design,

let's discuss

What is partial design?
"Partial design in SXA mean collection of renderings, which is used to create master component (Header, Footer, Link list)"

When to use Partial design?
"When feel a set of renderings are getting repeated on pages, then use partial design - Create Once Use As Many"

Now Let's create Partial designs (Header, Footer) for our Site, and Remember after each steps don't forgot to save from left top on Experience Editor view.

for that first goto location
/sitecore/content/demosite1/mydemosite/Presentation/Partial Designs

once partial designs for Header and Footer created, open partial design item- PartialHeader using experience editor and start adding components in Header Section

Follow steps

• First drag Page Structure - Container component to the Header Section

• Now drag Page Structure - Splitter (Rows) after adding container to the Header Section and from the properties of Splitter (Rows) component and reduce as 1 (means we need here only one row under the header section) by clicking on minus symbol

• After this will drag Page Structure - Splitter (Columns) component and open component properties and increase columns as 3 ( here we need three columns with ratio 2-6-4, 2 for logo and 6 for primary navigation and 4 for social links)

• Now in the first column drag Media- Image (Reusable) component (for logo image)

Till now we are done with structuring Partial Design for Header, and added Site-Logo.In next blog will continue with adding navigation, social links to complete PartialHeader and also will create PartialFooter ...