How To Create A Sub Layout and Add It to a Page in Sitecore

Adding functionality onto web pages is the core of all web projects.  In today’s tutorial,  I’m going to cover the basics of creating a sub layout in Sitecore and then adding it to a page.

Creating The Sub Layout

sitecore_sublayouts
First open your Sitecore editor and in the content tree go to the Layouts->Sub Layouts area.  Right click on ‘Sublayouts’ and select the ‘Create New’ option.

sitecore_sublayouts_1

Next, we select where we want the SubLayout to appear in Sitecore.  If you have a lot of controls, then you should organise this by folders etc..  in this example, I’m just going to whack it in the Sublayouts.

sitecore_sublayouts_2

Next, you need to select where in your webroot you want Sitecore to create the sub layout.  Sitecore will automatically create the sub layout as a user control.  After  you have created your control, it’s time to add some text onto it so we can see it rendering.  In Visual Studio open up your project and navigate to the layout we created above.

sitecore_sublayouts_3

In here we can now add any HTML we want.  Remember that you need to wrap your text in tags otherwise it will not render!

Creating A Place Holder

In Sitecore, a place holder is an area that content editors can drop components into.  We can add restriction to only allow certain users to add it.  To add our sub layout we will need a place holder to allow us to add the control on the page.

sitecore_sublayouts_4

In the content tree, again go to Layouts and right click on ‘Placeholder Settings’.  As I’m only going to use this place holder on the home page, I’m going to call it ‘HomepagePlaceHolder’.

sitecore_sublayouts_5

After you have created a new place holder, we now need to add our Sub layout into the allowed controls list.  This is pretty straightforward, just hit the  ‘edit’ button in the ‘Allowed Controls’ section.  After we have the place holder set-up we need to add it onto the Homepage layout.

<form id="mainform" method="post" runat="server">
<div id="MainPanel">
<sc:placeholder key="main" runat="server" /> 
Before
<sc:placeholder ID="Placeholder1" runat="server" key="homepagePlaceholder" /> 
After
</div>
</form>

To add a place holder, we use the Sitecore control, ‘placeholder’ and add the key in as the same name we called the place holder above. Now we should have everything we need to add the sub layout onto the page. Go to the home page in Sitecore and click ‘Page Editor’ in the Publish section in the top ribbon.

sitecore_sublayouts_8

From the page editor you should now see a placeholding area on your page. Click the ‘Add to here’ button

sitecore_sublayouts_9

Add your control onto the page

sitecore_sublayouts_10

Now you should see the Html being displayed on the page

sitecore_sublayouts_11

Conclusion

In today’s guide, I talked a little about what a sub layout is and how they can be used to allow content editors to drag dynamic content onto their pages. To render a sub layout onto a page we can use Sitecore place holders. A place holder creates an area on a webpage where content editors can drag sub layouts onto a page. Creating one is very quick and simple. We can then add the layout to the page and render it accordingly.

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

More Posts

1 reply

Trackbacks & Pingbacks

  1. […] talked previously about How To Create A Sub Layout and Add It to a Page in Sitecore that explained how to create old school web forms, user controller to add functionality into your […]

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *