How To Create A Layout For A Sitecore Page

This is the fourth article in the 'Creating Your First Sitecore Page' series, we'll finally get around to discussing our web pages presentation. In Sitecore, when we talk about presentation and rendering text, CSS, JS and images onto our pages, we talk about layouts.

What Is A Sitecore Layout?

In the previous articles, we've created templates that define the schema for our pages. We've also created a page based on our master and content page templates. As you may have noticed, we've done all of that without even thinking about how our pages will look. The reason for this is down to Sitecore's architecture. In Sitecore, the data template and the layout is decoupled. This decoupling is pretty powerful, as it means you can create a content page and change the way it looks very easily. It also means you can have an adaptive layout, you can have one layout for your mobile view and one for your web view. Another example where this is useful is if you run several websites within your Sitecore instance, that share content and require different layouts. When you decouple content from how it looks, you have a lot more power.

How To Create Your First Sitecore Layout

We will create our first layout using MVC. Like we discussed in the first part of this series, to follow good practice, we will need to create an MVC master layout and a view for our content page. Like template items and content items, your layout items have a pre-defined area within the Sitecore tree called 'Layouts'. Before we start to create any layouts, I would strongly recommend you create a few folders to help organize your layouts. If you don't do this, when your site grows it will be a nightmare to manage and find content. My advice is to copy the folder layout you created in your template area, e.g. within ‘Layouts’ either create a folder called ‘YOUR WEBSITE NAME’, or if you plan on hosting multiple Sitecore sites, a folder called ‘Sites’ and then create a website folder underneath that. To create our web page the first component we need to create is a master layout. In your 'my website' folder create a new 'MVC Layout' by clicking on the 'MVC Layout'. Add a name in the 'Name' dialog and click 'Next'. Select the location where you want Sitecore to create the Layout item. This is just the reference in Sitecore, where the actual physical .cshtml file will be created is configured in a minute. Click 'Next'. Next, you'll see your website's webroot. This is the section, where you tell Sitecore where to store your actual .cshtml file. Now, if you look in your website's webroot, you'll see the 'Master.cshtml' files created. In this guide, I'm going to assume you have a Visual Studio solution created for your website. When you install Sitecore through SIM it will automatically create one for you. After Sitecore creates the file, you need to include it in the project. Now we have an actual .cshtml fie we can write some HTML. For this article, instead of me writing some custom HTML which may make the lesson more complex, for this guide, for laziness and speed, I’m going to copy the basic template HTML from the bootstrap site, which is available from this page, within the basic template section, here and the CDN links here. That HTML looks like the snippet blow.
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
  

    <!-- Bootstrap -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Foss.maxcdn.com%2Fhtml5shiv%2F3.7.3%2Fhtml5shiv.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
      <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Foss.maxcdn.com%2Frespond%2F1.4.2%2Frespond.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
    <![endif]-->
  </head>
  <body>
	
		

<div class="jumbotron">

<div class="container">

<h1>Hello, world!</h1>




This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.



<a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a>

      </div>


    </div>


<div class="container">
   
        @RenderBody()
		

    </div>




    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F1.12.4%2Fjquery.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fmaxcdn.bootstrapcdn.com%2Fbootstrap%2F3.3.7%2Fjs%2Fbootstrap.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
  </body>
</html>
For your reference, the only changes I've made is to use the CDN version and as we're using HTML and creating a layout, we also need to included a RenderBody() call. Now we have a master template defined.  We need to repeat the process above and create a 'content page' layout.  In the site folder, click the 'MVC Layout' button, create a view called 'content page' within your website folder. Next, we add our pages HTML within Visual Studio. In this lesson, I'm going to add the bare minimum HTML:
@{
  Layout = "~/Views/Shared/Master.cshtml";
}


<div>
EXAMPLE HTML
</div>


All I'm doing is pointing the layout to the master layout we created above and add your HTML. You should have specified this above, but, in case you've forgotten you can just look in your webroot.  If you have followed this guide, you should now have your data templates set-up, a content page created in Sitecore and a master layout and a content page HTML. If you have published all of the items in Sitecore, you should be able to see your content page. To preview a change, I usually click on the 'Preview' button, from the 'publish' tab in the ribbon. If everything has gone correctly, you should now see a web page with some HTML.  The page is still extremely basic as it's just a static HTML site.  In the next lesson, we'll start to render data added by content editors onto our pages, as well as think about adding our header and footer into seperate items.  

Jon D Jones

Software Architect, Programmer and Technologist Jon Jones is founder and CEO of London-based tech firm Digital Prompt. He has been working in the field for nearly a decade, specializing in new technologies and technical solution research in the web business. A passionate blogger by heart , speaker & consultant from England.. always on the hunt for the next challenge

Back to top