Content Design Blog

On email design and content workflow

How to: Using Blocks Edit tags in your dev workflow

How Blocks Edit editable tags fit into any email development workflow.

How to: Using Blocks Edit tags in your dev workflow

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.

CSS styles

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

Advanced functionality includes repeatable content, components, background images, preview text. Attributes can be used as a way to group design variations of specific areas: 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 BE tags implementation within your code, send us a message. And keep an eye on our tags docs for added helpful details and examples.

Photo of Ovi Demetrian Jr By Ovi Demetrian Jr

Share this post

Tweet | LinkedIn post | Facebook post | Email a team member