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.
Content: Pieces of text, images, and links View tags →
Sections: Stackable layout options View tags →
Regions: Customizable areas that can't be moved around View tags →
Components: Stand-alone functional elements View tags →
Groups: Alternate versions of certain content areas to choose from View tags →
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.
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.
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.
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.
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 -->
<p>Content</p>
<!-- end-block-hide -->
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.
block-preview class for preview textdata-style attribute and -style-var style to data-group and -group-var, respectivelyblock-background class and -block-background: true style for background image editingdata-block="variable-name" attribute and -block-var: 'variable-name' style for storing contentblock-component class and -block-component: true style for stand-alone components functionalitydata-style="variable-name" attribute and -style-var: 'variable-name' style for alternate region versionsblock-section class and -block-section: true style for stackabe sections to drag in to addSign up for free to import your template and test out editable tags. Need some help implementing the tags? Here are some options:
