Sitecore Layouts, Sublayouts, and Placeholders

Posted 07/05/2016 by Nabil Orfali

Sitecore Layouts and sub-layouts are considered an essential and foundation part of your Sitecore implementation and act as the canvas for your website. They're used to structure the pages with the outer HTML mark-up.

Layouts

To create a new layout, right-click your layouts folder in your visual studio project (in the VS solution explorer, NOT the Sitecore Explorer) and choose Add -> New item... -> Sitecore -> Layouts -> Layout. 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).

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 must be assigned if you want to use it. You can assign the layout to a template by navigating to the template's standard values item, right-clicking on it and clicking Tasks -> Design Layout. In the layout field, click browse and choose your layout.

choosing layout

The layout is now assigned to the template by default and will apply to any item that is created using the template.

Sublayouts

Sublayouts are the most commonly used component in a web forms implementation. They act as movable, reusable, components that can also be nested. Creating a sub layout is not very different from creating a layout. To create a new sub layout, right-click your layouts folder in your visual studio project (in the VS solution explorer, NOT the Sitecore Explorer) and choose Add -> New item... -> Sitecore -> Renderings -> Sublayout. Same as before, If the sub 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 sub layout item in the Sublayouts folder (sitecore/layout/Sublayouts).

Great, so now we have a layout and a sub layout, and we already assigned the layout to the template! So how do we use our sub layout? We will need to use placeholders.

Placeholder

Placeholders are Sitecore controls that are used in layouts and sub layouts and are used to define where components can dynamically be bound. The key attribute identifies the placeholder. A typical placeholder looks like this:

Web Forms:

<div class="container">
<sc:placeholder key="maincontent" runat="server" />
</div>

MVC:

@Html.Sitecore().Placeholder("maincontent")

Insert the placeholder in the layout you created earlier. We can now bound our sub layout to it. Navigate to the template's standard values item (the same template you assigned your layout to), right-click on it and click Tasks -> Design Layout. In the Design layout page, click on Add Rendering. Search for your sub layout, select it, and click OK.

Now that the sub layout is added, we need to bind it to our placeholder. To do so, double click on the rendering to open the Edit Rendering Properties. Under behavior, click on the … next to PlaceholderKey and choose the key that identifies your placeholder. When you are done, it should look something like this:

placeholder code

Add your comment