Editable Tags

Thinking in blocks

What to take into consideration when making your HTML content editable in Blocks Edit

Getting started

You don't need to build a new HTML template. You can use the last HTML template you worked on as a starting point. And you can always update your template to add functionality later.

At the base level is the content, individual text and images that you can start to enable for editing. To do this, add the 'block-edit' class or style to containers directly around text and on images themselves. You can limit bold and italics options, as well as the character count, and even disable links from being added to certain text.

Look for patterns

Making things editable is essentially based on tagging parts to add functionality to. Find consistencies used in the design like layout pieces, repeating content formatting, headlines, buttons, etc. Then isolate them in your code. Blocks Edit works by copying and duplicating code that follows design and development best practices and a standard modular hierarchy:

Components are stand-alone pieces that can be used throughout a template, like buttons and headlines. They are also added to the sidebar to be dragged in anywhere there are other content pieces.

Regions are used for repeating blocks of content within sections, like a listing of items. You can also use them to allow for removing certain content areas. They are not added to the sidebar and are usually specific to a particular section.

Sections make up a template's layout, as containers stacked on top of each other. All defined sections are shown in the left sidebar and can be dragged in between other sections.

Additional customization options

Components, regions, and sections can also have variations to choose from. This allows for switching out a different look for areas that contain the same kinds of content. For example, offering color options, but which are limited based on brand guidelines.

Testing your template

Sign up for free to import your template and test out editable tags. Need some help implementing the tags? Here are some options: