Editable Regions

Editable regions in smooster CMS

All you need to make a region in your template editable is the data mercury attribute data-mercury=”full” and an ID. The ID works just like in CSS and can be anything you chose.

You attach the editable regions to block elements and use an attribute and an ID:


What does data-mercury=”full” do?

Everything inside this region can be edited - even the formatting. Changes only affect the page you are editing.

I want to keep the H1 tag, so it can’t be deleted 

In this case you just have to move the editable region further down. If you’re dealing with headlines (H1 - H6) you can attach it directly to the tag. As for p, ul and span, you still need to work with an enclosing block element like div for example.


I don’t want to make the formatting editable

If you want to make only the text editable but keep the formatting as it is, attach the attribute data-mercury=”simple”.

Your HTML code should look like this:


IMPORTANT: Don’t use data-mercury=”simple” on a p tag. If you do that, you won’t be able to format the text at all - including line breaks, paragraphs or other formatting options like bold or italic. 

I want changes to affect every page on the site

If you want to make changes effective for the whole site you have to add the data-scope=”site” attribute. The corresponding ID has to be the same for every template. This attribute is really useful for the footer for example. It can be used with every data-mercury attribute. 

Your HTML code should look like this: