Editing Overlapping Content with Sitecake

Sitecake is WYSIWYG HTML CMS and because of that, sometimes, it’s hard to edit overlapping objects. But, it’s doable if we use Sitecake as a regular CMS – edit items in the background and get changes on public pages. Named containers will help with that.

The trick is to create named sc-content container like the one below and have it on two pages. On the backend page and the public page.

<div class="sc-content-image">
<img src="images/leaves.jpg">

Public page can have overlapping elements, complex JS, hidden elements or something else that is blocking Sitecake editor, but that is okay because we will do editing on the background page.

I’ve made a 3 minute video to explain technique.

You can live test here