Editable Tags


Pieces of text, images, and links

Text editing

block-edit or -block-edit: true

To be used on individual HTML elements, making content within each editable. This is the one you'll be using the most.


<div class="block-edit">Text copy for an area.</div>

Maximum characters

block-maxchar-# or -block-maxchar: #

Sets a character limit for content in an element.


<div class="block-edit block-maxchar-10">Text copy</div>

Disable text

block-no-text or -block-text: false

Disables text from being edited in an element. For example, a button that should only have its link updated.

<a href="#" class="block-edit block-no-text">More info</a>


block-no-bold or -block-bold: false

Disables option for adding 'strong' element around content.


<div class="block-edit block-no-bold">Text copy for an area.</div>


block-no-italic or -block-italic: false

Disables option for adding 'em' element around content.


<div class="block-edit block-no-italic">Text copy for an area.</div> block-no-link or -block-link: false

Disables option for adding 'a' element around content for linking.


<div class="block-edit block-no-link">Text copy for an area.</div>

For text where a link is added, Blocks Edit automatically uses the styling of the text and underlines it. You can specify link style options to choose from by adding the 'data-style' attribute with a unique variable name on example links to include the style from.


<div class="block-edit">Text copy <a href="#" data-style="link-standard" style="color: #ff0000">with a link</a>.</div>


block-edit or -block-edit: true

Enables option to replace an image.


<img class="block-edit" src="image.jpg" width="400" height="200" />

Resizable images

block-resize or -block-resize: true

Allows placeholder image to get resized to size of new image.


<img class="block-edit block-resize" src="image.jpg" width="400" height="200" style="min-width:50px; max-width:600px" />

Background images

block-background or -block-background: true

Enables option to replace a background image.


<div class="block-background" background="image.jpg">Text copy for an area.</div>

If there is an additional background property that is outside the container that has the block-background tag, you will need to also use the data-block attribute with a variable name on both the main container and the container with outside property. Like with Outlook code for example.


<div class="block-background" data-block="feature-bg" style="background-image: url(image.jpg)">
<!--[if mso]><v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width: 450pt; height: 300px; text-align: center"><v:fill type="frame" size="450pt,300pt" alignshape="true" src="image.jpg" data-block="feature-bg" color="#ffffff" /><v:textbox inset="0,0,0,0"><![endif]-->

Background colors

block-bgcolor or -block-bgcolor: true

Enables option to replace a background color.


<div class="block-bgcolor" bgcolor="#333333">Text copy for an area.</div>


You can use email service provider tokens/tags/variables throughout your template as you normally would and they will be read by your ESP when importing the final template into it to send out. This includes when editing content in emails in Blocks Edit.


<div class="block-edit">Hello *|FNAME|*,</div>

Preview text

The (hidden) text that is shown under the subject line in most email clients.


<div class="block-preview" style="display: none">Short line of preview text goes here</div>


block-remove or -block-remove: true

Allows a text area or image to be removed.


<h1 class="block-edit block-remove">Title</h1>

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: