Support
Still have questions? Message us.
Making your design editable can be done either by by using the visual theme editor which will add template tags to your code for you, or by tagging your own code with CSS classes and HTML attributes manually.
Note: you'll need to either have an account Owner role, or given an Admin role for the organization in order to upload and update a theme.
Tags that you add generate inline editing options in the Blocks Edit visual editor. Only the specific settings you add will be shown. This ensures the overall design and code remains intact and follows brand guidelines. And it keeps the editing for your team simple to interact with, without having too many unnecessary options.
Blocks Edit follows design and development best practices and standard modular hierarchy. Sections are containers of content stacked on top of each other and make up a layout. Components, like headlines and buttons, are stand-alone pieces that can be used among content within sections. And content consists of text and images that can be edited inline.
A theme is a single HTML file that has all of your design's components. Template tags will need to be added to the code, but they work around it so you can code the design any way you like and continue updating and reviewing your theme even after adding tags in.
This also means placeholder content should be included as editable tags are to be added on HTML elements around the content itself. This allows for showing examples of how the design should be used.
From your Blocks Edit dashboard, click New Theme at the top to upload your HTML and get started.
You can either import a standalone HTML file, or a ZIP file with any image assets part of your theme.
Your ZIP file will need to have your HTML file and images at the root level, with no folders. Images will be included with each export, along with any other added images that may have been uploaded while editing.
You can try out a theme's features after import without having to create emails or pages. Click on the edit icon () next to the title of your theme from the dashboard to go into theme preview mode.
You can import just a portion of an email or page for editing. This may be helpful if you have a current tool that uses a template and locks parts of your design editing, and you just need to work with a particular module.
If you want to provide your team with templated email signatures to use, this will also work to make that setup easier.
When updates are made to a theme, changes do not get applied to current emails or pages, only newly added ones. By default, each email or page associates the specific template version that was available at the time that the email or page was created. This ensures that potential design changes don’t affect an email or page as it’s being built.
However, there is an option to apply a theme's update and essentially upgrade to the latest version if needed. At the top of an email or page in the editor, an update icon () will be shown that will update the HTML code while keeping the content intact.
In order for this to work, and for the option to be shown, every editable content element requires having a variable name set. As should sections, components, and regions as well. Both in the updated version, and the version of the theme used for the email or page.
Layouts and pins also need to be updated separately from the email or page since they also use the theme version of when they are saved, separately from when the email or page is created. Layouts and pins will have an update icon at the top in the left sidebar. Applying the updates allows all emails or pages for their theme to use the updated versions.
If layouts and pins don’t meet the requirements for being updated, you will see a warning icon () next to the layouts and pins that the update can’t be applied to and have to be rebuilt manually.
We take great care not to modify the code that you import into Blocks Edit. Here is how your theme code is handled as you build emails or pages from it in the visual editor:
Note: while in edit mode, certain browser plugins may make changes to your code that get saved with it. If you have any plugins that visually affect the interface for your email or page, make sure to disable the plugin while editing.
You can use email provider tokens/tags/variables (ex: {{FirstName}}) throughout your theme and emails as you normally would and they will be read by your ESP when exporting your emails to it.
This includes using tokens in text, links, and images as you build and edit emails in the visual editor. Note that images may appear to be broken if a token is used for an image's path.
Still have questions? Message us.