Creating a Layout – Part I

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.
    125
  2. Open the Visual studio in administrator mode. And open the DummyWebsite solution.
    126
  3. Create a folder Assets under the solution.
    127
  4. Create Css, Fonts and Js folder under this folder.
    128
  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.
    129
  7. Similary, add font files under Fonts folder & Js files under Js folder.
    130
  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” />
    131
  10. Click on Views folder and add a View, name it “Main”.
    132
  11. Click Add. A scaffolding process will start which will add couple of files and folders which we need to delete.
    133
  12. Delete the highlighted files and folders.
    134
  13. Open the index.html file under the extracted Logistico folder in notepad++ and copy all the content to the Main.cshtml.
    135
  14. Lets change the references one by one to the one in the Visual Studio.
    Changed for Css references:
    136
    Changed for Scripts:
    137
  15. Lets publish the codebase to website folder.
  16. Click on Dummy Website and click on Publish.
    138
  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)
    139
  19. Right Click >> Insert >> Layout. And name it as Main Layout.
    140
  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.
    141
  22. Go to Home node (/sitecore/content/Home).
  23. Click on Presentation tab >> Details.
    142
  24. Click on the Edit link for Default device.
    143
  25. In the drop down select the Main layout and Click OK.
    144
  26. Again click OK.
  27. Go to Publish tab and publish site to the web database.
    145
  28. Click Publish and wait for the completion of the publishing process.
    146
  29. Once the publish is completed. Browse the front end site (http://sitecoredemo.dev.local/)
    147
  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”
    148
  34. Locate the Comments “Estimate_area start”
    149
  35. Remove all the HTML between these comments.
    150
  36. Save and Publish the Main.cshtml.
    151
  37. Reload the Front end site.
    152

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

2 thoughts on “Creating a Layout – Part I

  1. Pingback: Setting up Dictionary Items (Resource Strings) | Sitecore Dairies

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s