Developer

Making HTML templates editable in Blocks Edit

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 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 →

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. 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.

Using browser dev tools for quick fixes: While in edit mode for an email, you can use your browser's dev tools to make edits to your HTML and then click Save to save the updated code! The use-case for this would be to fix, tweak, or add minor HTML and CSS to an email. Changes would 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.

Implementation Support

Need help implementing your template? Here are some options: