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
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...
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.
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.
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.
No comments:
Post a Comment