Developers

Making HTML templates editable in Blocks Edit

The Blocks Edit CMS framework is a simple library based on classes, styles, and attributes that you add to your HTML code to define editable features. However, with full flexibility comes great responsibility! While these set of properties are designed to work with any kind of custom-coded template, it may take some finessing to get right. In the same way HTML and CSS are conceptually simple, it's in the practice of using them that yields powerful results.

See also: Thinking in Blocks, on how to think about your HTML template's various parts.

Preview Mode: Try out a template's features after import without having to create emails. To go into Preview Mode, click on the title of your template in the dashboard. Any edits you make here are not saved.

Template versions: You can update a current template by uploading a new version of it using the 'Import new version' option in Preview Mode (accessible from clicking on the title of your template on the dashboard). New emails will be created based on the latest version. Any emails created from previous versions will continue to work, but with features only from the specific version each email was created from.

Below is an index of all the properties available.

edit To be used on individual HTML elements, making content within each editable. More Info →	`block-edit` `-block-edit: true` `-block-edit: false`
text Disables content from being edited in an element.	`block-no-text` `-block-text: false`
min/max characters Sets a character limit for content in an element. Default: unlimited.	`block-minchar-#` `-block-minchar: #` `block-maxchar-#` `-block-maxchar: #`
bold Allows/disables adding 'strong' element around content. Default: bold allowed.	`block-bold` `block-no-bold` `-block-bold: true` `-block-bold: false`
italics Allows/disables adding 'em' element around content. Default: italics allowed.	`block-italic` `block-no-italic` `-block-italic: true` `-block-italic: false`
link Allows/disables adding 'a' element around content for linking. Default: linking allowed. More Info →	`block-link` `block-no-link` `-block-link: true` `-block-link: false`
image Allows/disables replacing an image. Default: replacing image not allowed. More Info →	`block-edit` `block-image` `block-no-image` `-block-image: true` `-block-image: false`
background images Allows replacing a background image. More Info →	`block-background` `block-no-background` `-block-background: true` `-block-background: false`
component Stand-alone piece that can be added throughout a template. More Info →	`block-component` `-block-component: true`
region Group of elements and components that can be customized. More Info →	`block-region` `-block-region: true`
repeat Allows duplicating a region, making it part of a listing where each copy can be reordered or removed.	`block-repeat` `-block-repeat: true`
remove Allows a region to be removed.	`block-remove` `-block-remove: true`
section Areas of content stacked on top of each other that can be added in as part of a template's layout. More Info →	`block-section` `-block-section: true`

Start with your current template

You don't need to build a new HTML template. You can use the last HTML template you worked on as a starting point. And you can always update your template to add functionality later.

Look for patterns

Find consistencies used in the design like layout pieces, repeating content formatting, headlines, buttons, etc. Then isolate them in your code. Blocks Edit works by copying and duplicating code that follows standard design and development practices.

Take apart the layout

Making things editable is essentially based on tagging parts to add functionality to. Blocks Edit Sections make up a template's layout, as modular parts stacked on top of each other. All defined sections are shown in the left sidebar and can be dragged in between other sections.

Gather elements

Blocks Edit Regions are used for repeating blocks of content within Sections, like a listing of items. They are not added to the sidebar and are usually specific to a particular Section's formatting. Blocks Edit Components are stand-alone pieces that can be used throughout a template, like buttons and headlines. They are also added to the sidebar to be dragged in anywhere there are other content pieces.

Add styling options

Sections, Regions and Components can have alternate versions to choose from, called Styles. This allows for switching out a different look for areas that contain the same kinds of content. For example, offering color options, but which are limited based on brand guidelines.

Make the text editable

Once you have the pieces for putting together a layout, it's time to go into the individual text and images and enable them for editing. To do this, add the 'block-edit' class or style to containers directly around text and on images themselves. You can limit bold and italics options, as well as the character count, and even disable links from being added to certain text.

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.

Use it as close to the copy as possible, outside of bold and italic formatting tags, and outside of a string of text that has a link within it
Use on 'img' elements to allow for uploading a new image
Editable elements cannot have nested elements that are also editable
For areas with multiple paragraphs, make the container editable instead of the individual paragraphs

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.

links

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.

For styling text links within content, Blocks Edit automatically picks up all link styles from the original template's sections and adds them as link options. 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.

When an image in a template is uploaded in place of a current one, an option to crop the image is given with the same proportions as the original source image
If there is a 'height: auto' CSS style for the image, there is no cropping option; the image is scaled to the width of the source image with a proportional height of the new image
The source of each individual image can by overriden with the image's URL option
Includes option for alt text

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.

Works for CSS background/background-image property as well as background attribute
Takes into account Outlook workaround and accordingly matches the image URL

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.

Each unique content piece requires its own variable name
Using the same variable name on multiple content pieces will update content for all pieces when one is updated

Example


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

component

block-component or -block-component: true

Stand-alone piece that can be added throughout a template.

Is shown as part of a library on the left sidebar
A Component can always be removed
A dashed red line is shown where a Component can be dropped in
A dashed red outline is shown when mousing over a Component along with its options

Example


      <a href="#" class="block-component" data-style="button" style="background-color: #333333; padding: 5px 10px; color: #fff;">Call to Action</a>

style

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

Multiple versions of a Component that can be switched between.

The same variable name should be used for all Style blocks that apply to its Component
Style blocks should be adjacent to each other
Numbered tabs are shown to switch between the available Styles
Optionally, use Stored Content for content to get updated within each Style version

Example


      <a href="#" class="block-component" data-style="button" style="background-color: red; padding: 5px 10px; color: #fff;">

      <a href="#" class="block-component" data-style="button" style="background-color: blue; padding: 5px 10px; color: #fff;">

      <a href="#" class="block-component" data-style="button" style="background-color: yellow; padding: 5px 10px; color: #fff;">Call to Action</a>

region

block-region or -block-region: true

Group of elements and Components that can be customized.

Regions cannot contain nested Regions
A dashed red outline is shown when mousing over a Region along with its options

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.

The same variable name should be used for all Style blocks that apply to its Region
Style blocks should be adjacent to each other
Numbered tabs are shown to switch between the available Styles
Optionally, use Stored Content for content to get updated within each Style version

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.

section

block-section or -block-section: true

Areas of content stacked on top of each other that can be added in as part of a template's layout.

Sections can be added in multiple times, reordered, and removed as needed
Sections are stored and shown in a grid of thumbnails to choose from
A dashed blue line is shown where a Section can be dropped in
A solid blue outline is shown when mousing over a Section along with its options

style

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

Multiple versions of a Section that can be switched between.

The same variable name should be used for all Style blocks that apply to its Section
Style blocks should be adjacent to each other
Numbered tabs are shown to switch between the available Styles
Optionally, use Stored Content for content to get updated within each Style version

Example


      <div class="block-section" 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-section" 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-section" data-style="header">

        <h1 class="block" style="text-align: right">Title Right</h1>

        <p class="block" style="text-align: left">Content Right</p>

      </div>

Start implementing your template for free Sign up

Making HTML templates editable in Blocks Edit

Cheat Sheet

edit

text

min/max characters

bold

italics

link

image

background images

component

region

repeat

remove

section

Thinking in Blocks

Start with your current template

Look for patterns

Take apart the layout

Gather elements

Add styling options

Make the text editable

Content

edit

Example

text

min/max characters

bold

italics

links

images

background images

tokens

Example

stored content

Example

Components

component

Example

style

Example

Regions

region

repeat

style

Example

remove

Sections

section

style

Example