Theme overview

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.

Theme format

• Content
  Text pieces and images
• Sections
  Stackable full-width horizontal containers between the header and footer, used to create an overall layout
• Components
  Standalone elements like buttons and titles; should work by themselves in a range of contexts
• Regions
  Groups of content and components; arranged a specific way, usually as columns

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.

Importing

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 assets that are part of your theme.

Your ZIP file will need to have your HTML file and images at the root level, with no folders.

You should only include placeholder images that you expect to be replaced. For header and footer images (along with external CSS for pages), you should upload them to your host and point to their live URL.

Preview mode

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.

Email and page portions

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.

Theme updates

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.

How code is handled

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:

• In the visual theme editor, we add only editable tags to your code, the same way you would do manually within your code
• As modules are dropped in, the code for them is put in as if you were doing it manually in the code yourself
• Content edits are isolated from the structural code and their inline styling properties are kept as changes are made, including for images and links
• The only thing that may get modified in your code are some hex code color values which your browser will automatically convert to RGB values while you’re in edit mode
• Exporting your email or page removes any template tags from the code

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.

Tokens

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.