Using Blocks Edit tags to make your content editable is done by adding classes, styles, 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.

HTML classes

Adding class="block-edit" makes text and images editable. class="block-section" will turn the container you add it on and its contents into a stackable module that can be dragged and dropped in. class="block-component" allows adding standalone drag and drop elements that go within the stackable modules.

Or, CSS styles

Alternatively, instead of classes, or even in conjunction with them, you can use inline styles. Like the corresponding classes above: -block-edit: true for text and images, -block-section: true to turn an area into a stackable module, and -block-component: true for standalone elements.

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 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!

Advanced functionality

Among the advanced features: repeatable regions, background images, custom code snippets, and link styles. Attributes can be used as a way to group section and component variants: data-group="variable-name".

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 Blocks Edit tags implementation within your code, send us a message. And keep an eye on our tags docs for added helpful details and examples.