What is Layout in Sitecore and How can we create it?

Layouts are the scaffolding for your web pages, and will usually include the <head> and <body> tags for the markup. They often pull in styling and JavaScript code but have little markup themselves, instead it have multiple placeholders in which one can plug component renderings.

All the layouts reside at /sitecore/layout/Layouts
SRG205

There are a few ways to create a new layout in Sitecore. The first way would be inside the instance. Simply navigate to the content editor, then to the Layout section. Expand this section and open the “Layouts” section inside. Create or navigate to a folder here and right-click the folder to add a new Layout item. You’ll need to provide a path to a corresponding razor view (.cshtml) file, which you should create in a project somewhere in your solution.

Let’s create one layout in Visual Studio and then create the same in Sitecore.

  1. In the Views folder, add a View – Main.cshtml
    SRG206
  2. Enter the HTML whatever you wish to – It should whole HTML (Head + Body).
    SRG207
  3. Publish the View.
    SRG208
  4. Note the path of the Main.chtml file – (/Views/Main.cshtml)
  5. Now go to Content Editor and navigate to Layouts (/sitecore/layout/Layouts).
  6. Right Click >> Insert >> Layout
    SRG209
  7. Name it – Main Layout and select the Locations as Layouts.
    SRG210
  8. Change the value in the path field to “/Views/Main.cshtml”
    SRG211
  9. Publish the layout.
    SRG212
  10. Now we are ready with the layout. Let’s assign it to one of the Item and check.
  11. Navigate to “/sitecore/content/Home/Test Item”.
  12. Click on Presentation Tab >> Details.
    SRG213
  13. Click Edit in Layout Details pop up.
    SRG214
  14. Select the Main Layout and Click OK.
    SRg215
  15. Again click OK and Publish the Test Item.
  16. Now browse http://learningsitecore/test-item
    SRG216
  17. This is how we create the layouts. It is recommended that we shouldn’t have more than one layout per device. Maximum 2 are allowed in case we are giving an option for end user to print the web page.

To create a new layout through Sitecore Rocks:

  1. Right-click a “Views” folder in your visual studio project (in the VS solution explorer, NOT the Sitecore Explorer).
  2. Choose Add -> New item…
    SRG217
  3. Select Sitecore -> MVC -> Sitecore View Layout.
    SRG218
  4. If the layout is created successfully and if your project is correctly connected to the Sitecore instance, Sitecore Rocks will ask you to create an item in the Sitecore Content Tree. Add the layout item in the Layouts folder (sitecore/layout/Layouts) in Master DB. This process will also automatically create a view file to link to the layout item.
    SRG219
  5. The layout is successfully created.
    SRG220
  6. Publish this view and Publish the layout item from the Sitecore. And you can use the layout.

If you do encounter an error when creating a layout, please refer to our “Error when creating a Layout – TemplateWizard” article.

Now that the layout is created, it can be used to display content. Layouts don’t have code-behinds with the ability to execute business logic, which is what renderings are for. However, any item in your content tree can be given a corresponding layout, and that layout can display that item’s information through the use of field renderers (like @Html.Sitecore().Fields(“title”)).

In this blog we understood, what is Layout and the ways of creating it. In the next blog we will understand how to create the Renderings and assigning it to the layout.

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

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