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...