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.

You can also go back and forth with adding editable tags, using the visual editor and modifying your code. You can export out an updated theme from the visual editor and import in any updated code. We recommend importing in your HTML before adding any tags the first time as the visual editor will automatically add editable tags to all of your content pieces so you don't have to go through each one 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

A theme is a single HTML file that has all of your design's components. Blocks Edit follows a format for breaking down components that can be applied universally to any design:

• Content
  Text areas and content images accompanying text; what's found within HTML elements; are editable inline in the editor
• Components
  Standalone elements like buttons that work in various contexts and serve specific functions; are drag and dropped in in the editor
• Regions
  Repeated groups of content and components, usually in columns, like a listing of content items; are rearrangeable in the editor
• Sections
  Stackable containers between the header and footer that serve to create an overall layout; are drag and dropped in and rearrangeable in the editor

To include all of your theme pieces into a single HTML file, just put them all in their proper hierarchy — sections within the frame (between the header and footer) of your page or email, regions within sections, components within regions and/or sections, content within components and/or regions/sections.

Template tags work as classes and attributes in your HTML elements so you can code your design any way you like and continue updating and reviewing your theme even after adding tags in.

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

Your ZIP archive will need to have your main theme HTML file, CSS file(s), and image(s) at the root level, with no folders. Importing font files isn't currently supported and would need to be pointed to a host in your HTML.

Preview Mode

You can try out a theme's features after import without having to create pages or emails. You'll be shown this mode after importing your HTML. You can also access it from the dashboard by clicking the edit icon () next to the title of your theme.

Edit Mode

From Preview Mode, you can click the Edit button at the top to go into Edit Mode to update the editable options for your theme. Any options you add will be added around your code. You can make updates to your code by downloading the updated version and then uploading your changed version back using the Import new version option at the top.

Save Content

You can make changes to just the content for your theme by editing different content pieces while in Preview Mode and then clicking the Save Content button at the top. Changing any content here will update the default placeholder content for your components. This is also how global header/footer navigation and content are updated.

One-off designs

You can import a single-focused page for editing, where you don't need to setup any components and can just make text and image content elements editable.

Portions

You can import just a portion of a page or email 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 component.

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, layouts, sections, and components are rebuilt with any changes and updated in the sidebar. Changes do not get applied to current pages or emails. An update icon () is shown in the editor for each page or email.

The update button allows for the option to only update what was changed and to not update any old content that you don’t want updated. Layouts and pins also need to be updated separately from the page or email. The update button will appear at the top in the left sidebar for each.

In order for this to work, make sure each content piece has a unique variable associated with it, and each section, component, and region has a unique group variable associated with them. When an update option is used, each page or email goes through the following build process:

1. Sections and components are put back in their same order
2. Text pieces and images are put back in based on their variables
3. Form fields are put back in with their custom properties
4. Repeated content uses the region group variable along with the content pieces variables within the region
5. Variants are assigned the same variant number

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 pages or emails 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 it manually within your code
• As components are dropped in, the code for them is plugged in, also as if you were doing it manually your code
• Content edits are isolated from the structural code
• 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 individual pages or emails 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 page or email, you'll need to make sure to disable the plugin while editing.