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.

Cheat Sheet

The essential properties of the Blocks Edit editable framework

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

Thinking in Blocks

What to take into consideration when making your HTML content editable in Blocks Edit

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.

Content

Pieces of text, images, and links

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.

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.

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>

Components

Stand-alone functional elements

component

block-component or -block-component: true

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

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.

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>

Regions

Customizable areas

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.

Sections

Layout options

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.

style

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

Multiple versions of a Section that can be switched between.

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