Welcome back! Till now we have created templates and content based on those templates. Its a time we start creating a layout.

So Layout in Sitecore is similar to a Master page concept in web forms which we will be using on all the pages. So as we know about Static and Dynamic renderings. We will be binding components like Header, Social Media, Get Estimates form & Footer statically on the Layout where as the other components which vary on all the pages will remain Dynamic. If you are not sure about Static and Dynamic renderings then you can read it here.

So lets start creating a layout for the logistico website.

1. Go to the folder where you have extracted Logistico.zip.
   
2. Open the Visual studio in administrator mode. And open the DummyWebsite solution.
   
3. Create a folder Assets under the solution.
   
4. Create Css, Fonts and Js folder under this folder.
   
5. Click on Css folder >> Right Click >> Add >> Existing Item.
6. Browse to the extracted folder and go to css folder and add all the files.
   
7. Similary, add font files under Fonts folder & Js files under Js folder.
   
8. So now we have the assets of the HTMl template in our website scope.
9. Lets open a Web.config file under Views (/Views/Web.config) and add a namespace to it.
   <add namespace=”DummyWebsite” />
   <add namespace=”Sitecore.Mvc” />
   
10. Click on Views folder and add a View, name it “Main”.
    
11. Click Add. A scaffolding process will start which will add couple of files and folders which we need to delete.
    
12. Delete the highlighted files and folders.
    
13. Open the index.html file under the extracted Logistico folder in notepad++ and copy all the content to the Main.cshtml.
    
14. Lets change the references one by one to the one in the Visual Studio.
    Changed for Css references:
    
    Changed for Scripts:
    
15. Lets publish the codebase to website folder.
16. Click on Dummy Website and click on Publish.
    
17. Click on Publish button. Once the publish is successful, load the sitecore site & go to Content Editor.
18. Go the Layouts (/sitecore/layout/Layouts)
    
19. Right Click >> Insert >> Layout. And name it as Main Layout.
    
20. Click Next >> Next >> Create.
21. Change the value of Path field to : “/Views/Main.cshtml” as we have created the View at this location.
    
22. Go to Home node (/sitecore/content/Home).
23. Click on Presentation tab >> Details.
    
24. Click on the Edit link for Default device.
    
25. In the drop down select the Main layout and Click OK.
    
26. Again click OK.
27. Go to Publish tab and publish site to the web database.
    
28. Click Publish and wait for the completion of the publishing process.
    
29. Once the publish is completed. Browse the front end site (http://sitecoredemo.dev.local/)
    
30. The html is properly published and configured. The only thing you will notice is the images will not appear as we have not added the Images folder in the assets.
31. Lets remove the html which will be dynamically bound to the layout later like Services, Testimonials, etc.
32. Go to the Main.cshtml file in Visual Studio.
33. Locate the Comments “header-end”
    
34. Locate the Comments “Estimate_area start”
    
35. Remove all the HTML between these comments.
    
36. Save and Publish the Main.cshtml.
    
37. Reload the Front end site.
    

So we have created a layout with the static HTML, in our next blog we will divide the HTML in different components and binding it statically and will also create a placeholder to bind the other components dynamically.

Thank you.. Keep Learning.. Keep Sitecoring.. 🙂