Making HTML templates editable

The Blocks Edit CMS framework is a simple library of tags 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 HTML 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, a video walkthrough of adding tags to an example template.

Inline editing iconContent: Pieces of text, images, and links View tags →

Sections iconSections: Stackable layout options View tags →

Regions iconRegions: Customizable areas that can't be moved around View tags →

Components iconComponents: Stand-alone functional elements View tags →

Groups iconGroups: Alternate versions of certain content areas to choose from View tags →

Working with your template

Importing to test results

You can try out the editable features that you've added tags in your code for by just importing your HTML file into Blocks Edit. Log in to your account (sign up for free) and click the "Import template" option at the top of your dashboard.

Preview mode

Try out a template's features after import without having to create emails. Click on the title of your template from the dashboard to go into preview mode. Any edits you make here are not saved. However, you can save layouts to be reused in emails.

Template versions

While in preview mode, you can also update a current template by uploading a new version of it using the "Import new version" option at the top. 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.

Additional dev features

Quick adjustments using browser dev tools

While in edit mode for an email, you can use your browser's dev tools to make edits to your HTML and then click the "Save" button to actually save the updated code! Using this option should be limited to fixes, tweaks, or minor HTML and CSS changes to a particular email. Changes will only be saved to that email. We don't recommend adding any Blocks Edit editable tags. You will also see Blocks Edit UI in the code that you'll have to avoid.

Hiding content

If you want to hide certain areas from being seen in Blocks Edit when working with an email, wrap your code with the 'block-hide' option.

<!-- block-hide -->
<!-- end-block-hide -->

Email portions

You can import just a portion of an email for editing. This may be helpful if you have a current email provider that uses a master template and locks in the header and footer for example, and you just want to work with a particular module. Or, if you want to provide your team with templated email signatures to use.

Updates log

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: