Being a content owner, the Experience Editor provides a simpler user interface to change the page design. In this recipe, we will take a look at how to add components from the Experience Editor using Placeholder Settings.
In the previous recipe, we placed different components on different placeholders, for example, the Title and Body rendering on the main-content placeholder. We will place Carousel or any other rendering on the same placeholder from the Experience Editor.
As we want to place components on the main-content placeholder of the Home page from the Experience Editor, we will first create a placeholder setting for it:
From the Content Editor, select the
/sitecore/layout/Placeholder Settingsitem. Create a placeholder settingmain contentitem in it. In its Placeholder Key field, enter the name of the placeholder that we defined in theMain Layout, for example,main-content.Now open the
Homepage in the Experience Editor. Find the Title and Body rendering that is placed on themain-contentplaceholder, as shown in the following image. From the floating toolbar visible there, click on Go to parent component to reach its parent component, which is themain-contentplaceholder in our case. Now, you will find two Add here buttons in themain-contentplaceholder to place components before and after the Title and Body rendering:
Clicking on this button will open a Select a Rendering dialog, from which you can select a component to add to that place. Select the Carousel rendering to place it before the Title and Body rendering, save the changes, and see how your page has been changed!
There are two types of placeholder settings: global placeholder settings and data template specific placeholder settings.
In the preceding steps, we used the global placeholder setting as we specified a placeholder key in the placeholder setting. So, whenever Sitecore finds the main-content placeholder in any component of the requested page, it will allow us to manage components on that placeholder. In our case, it will be shown on all the pages of the website. So ideally, it's good practice to use the global placeholder setting for placeholders of the main layout of the site.
We can also set placeholder settings on the data template level. For example, we want to restrict the main-content placeholder setting only for Site Root or other selected templates. For this, we should follow these steps:
In the placeholder setting that we created, don't specify the Placeholder Key field (leave it blank) so that we can override it on the template level.
Select the standard values of the
Site Roottemplate. Open its Layout Details, and select the Select the Placeholder Settings tab in the Device Details dialog. Click on the Add button, which will open the Placeholder Setting dialog. Here, select the created placeholder setting, main content, and set themain-contentplaceholder name, as shown in the following image, and save the settings:
Now you will be wondering how Sitecore adds the components directly to Layout Details of the page. Open the Layout Details of Home item; you will find that the Carousel rendering we added from the Experience Editor got stored to FINAL LAYOUT, where SHARED LAYOUT is still the same as before, as shown in the following image. This is because of the Versioned Layouts feature we got from Sitecore 8. Read more about it at https://goo.gl/FXxHkP:
You can also remove any components by clicking on the Remove component. button found on the floating toolbar of the component, as shown in the following image:
Learn more about the Experience Editor at https://goo.gl/1ZFIpX.