Using Blocks Edit tags to make your content editable is done by adding styles, classes, and attributes to your HTML code. This works with your current email development workflow, with minimal code addition that doesn't mess with the rendering of your current HTML code.
At an essential level, you can add tags as inline styles.
-block-edit: true makes text and images editable.
-block-maxchar: #, and replacing # with a number, allows setting a character limit.
-block-section: true will turn the container you add it on and its contents into a stackable module that can be dragged and dropped in.
This can be extended to a workflow that requires outputting compiled HTML code, where your CSS may start in a separate file, for example. Whether it's based on your own custom Grunt-based workflow, or part of a framework, like MJML. Basically, anywhere you keep your CSS styles, you can add BE editable styles to go with them.
Or, HTML classes
Alternatively, instead of styles, or even in conjunction with them, you can use BE tags as HTML classes. Like the corresponding styles above:
class="block-edit" for text and images,
class="block-maxchar-#" for setting a character limit, and
class="block-section" to turn an area into a stackable module.
Advanced functionality includes repeatable content, components, background images, preview text. Attributes can be used as a way to group design variations of specific areas:
The simplicity of the tagging approach makes it easy to maintain any future updates to your template. And you can do so with the flexibility of working around your code, and without creating code bloat in the process.
If you have any questions on BE tags implementation within your code, send us a message. And keep an eye on our tags docs for added helpful details and examples.