How to Move the Page Editor Ribbon

Sitecore CMS 6 introduced the awesome Page Editor (along with the Page Designer and improved preview and debugging). When using the Page Editor etc., a ribbon is inserted on the page with relevant commands:


By default, the ribbon is inserted as the first element inside the server-side FORM-tag on the page, which means that in most situations the ribbon will fill the entire page width and be positioned at the very top of the page.

Moving the Page Editor Ribbon
But suppose you want to place the Page Editor Ribbon somewhere else on the page? How would you do that? The solution is luckily simple (although not necessarily very obvious).

You simply insert a placeholder with key="webedit" somewhere on a layout, sublayout or in a rendering. This will typically look like this:

Using this placeholder, you can for example place the Page Editor Ribbon in the top of the content area:


And that's it. The placeholder is used for both the Page Editor, the Page Designer, the Preview and the Debugger, so everything will show up in a consistent location on the website.

Happy coding :o)