This tutorial will hopefully be quite short. One of the things I didn't find intuitive whenI started doing content editing was how to add controls on to Sitecore pages. I wasted more time than I want to admit staring at a blank page and wondering why my control wasn't showing.
In today's tutorial, I'm going to cover the steps needed to add a control to a page and cover some of the gotchas's that you might stumble across on your journey. This tutorial is purely on the content editor level and doesn't go into details about how to create a rendering.
If you want a more technical guide, then I recommend reading, How To Make Sitecore Use a MVC Controller, Controller Renderings Explained, or, How To Create A Sub Layout and Add It to a Page in Sitecore
Adding a Control/ Block / Rendering To A Page
Adding a control to a page is pretty simple. Click on your chosen page, open the 'Presentation' tab in the top ribbon, In the 'Layout' section, click on the details option. From here you should see the following dialog box.
From the 'Device Editor' click the 'Controls' section, then click 'Add'. From here, select your control from the navigation tree.
That's all you need to do to add a control to the page.
How To Configure A Sitecore Control
You should now have a control added to a page, however, you may still need to do several configuration tweaks it if you want it to display on a page. To edit a control on a page, click on the page, click 'Presentation' in the top ribbon, go to the 'Layout' section and click 'Details'
In the 'Controls' click on the control you want to configure and a new 'Editing' dialog will appear. In here you have two main configuration options. First, the placeholder property defines which placeholder the control should appear. You can either manually set this in here, or, you can do it from the Page Editor.
The other important configuration option is the 'Data Source' parameter. If you want your control to display specific data then you need to tell it where to pick the data up. Controls work in a very similar manner as SItecore pages do. The control defines what it will look like, but it still needs it's own template to define the data to display.
In most website builds, I usually create a folder called 'Blocks' or 'Controls'. Under here I create a folder for each control.
My Sitecore Control Isn't Appearing.. Help!
Ok, so adding the control was easy.. making it appear can be a little tougher. Your first step is to make sure the control you have added to the page is published. Just like Pages, Controls/Blocks need to be published before they can be visible on a site. Publishing control is exactly the same as a normal page. Click on the item, in the 'Publish' section in the top ribbon, select 'Publish' -> 'Publish Item'.
If you publish a control and it still doesn't display, it's sometimes a good idea to enable the 'Publish Related Items' checkbox from the publish dialog, just to make sure you haven't missed anything.
Hopefully, that should cover the basics of how to add controls/blocks/renderings onto a Sitecore page. When I started using controls as a content editor I didn't find the process that intuative, but after understanding a few key concepts it's pretty straightforward.