Developer

Content

Pieces of text, images, and links

Content highlight icon

edit

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.

Example

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

text

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

Disables content from being edited in an element.

min/max characters

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

Sets a character limit for content in an element. Default: unlimited.

bold

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

Allows/disables adding 'strong' element around content. Default: bold allowed.

italics

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

Allows/disables adding 'em' element around content. Default: italics allowed.

block-link or -block-link: true
block-no-link or -block-link: false

Allows/disables adding 'a' element around content for linking. Default: linking allowed. You do not need to enable changing the link on current linked areas.

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 to example links to include the style from. If a section has a 'data-style' variable defined, it will only show link styles from within that specific section.

images

block-edit or -block-edit: true
block-image or -block-image: true
block-no-image or -block-image: false

Allows/disables replacing an image. Default: replacing image not allowed.

background images

block-background or -block-background: true
block-no-background or -block-background: false

Enables/disables replacing a background image. Default: replacing image not allowed.

tokens

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.

Example

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

stored content

data-block="variable-name" or -block-var: 'variable-name'

Adding to HTML elements stores their content. This works with style functionality to update content across each style version.

Example

<div class="block-edit" data-block="example-text">Text copy for a specific area that will be stored.</div>

Regions

Customizable areas

Region highlight icon

region

block-region or -block-region: true

Group of elements and Components that can be customized.

repeat

block-repeat or -block-repeat: true

Allows duplicating a Region, making it part of a listing where each copy can be reordered or removed.

style

data-style="variable-name" or -style-var: 'variable-name'

Multiple versions of a Region that can be switched between.

Example

<div class="block-region" data-style="header">
  <h1 class="block" style="text-align: left">Title Left</h1>
  <p class="block" style="text-align: left">Content Left</p>
</div>
<div class="block-region" data-style="header">
  <h1 class="block" style="text-align: center">Title Center</h1>
  <p class="block" style="text-align: left">Content Center</p>
</div>
<div class="block-region" data-style="header">
  <h1 class="block" style="text-align: right">Title Right</h1>
  <p class="block" style="text-align: left">Content Right</p>
</div>

remove

block-remove or -block-remove: true

Allows a Region to be removed.

Implementation Support

Need help implementing your template? Here are some options: