Block editor for email template

Block editor for email template is a tool for creating, editing and customizing marketing email templates and emails without writing code. It is designed for marketers and designers who want to quickly assemble professional emails with an easy-to-use interface using blocks, visual elements and design customizations.

Detailed instructions, usage examples and tips on how to use the editor are available in a documentation.

Interface and main functions of the editor

In the main menu, open the Templates section and create a new message template. Select Editor → Email.

You will see an email template configuration window, select "Block Editor".

Central working area

The current email template, consisting of blocks, is displayed here.

You can move the blocks, to do this select the item you want and click on the pointer or drag it manually.

Furthermore, you have additional actions available to you with the blocks of your template:

• Edit Code — provides access to the HTML code of the selected block for manual modification. In addition, you can add variables in the code editor.

• Duplicate — creates a copy of the selected block, preserving its content, style and settings.

• Delete — deletes the entire selected block with its contents

Left panel

Contains ready—made blocks categorized into categories:

Block — makes it easier to work with the template, as they are some blanks for the platform user, which he is likely to use in almost every Email message. Header — blocks for adding the top part of the email, often used for a logo or slogan. Image — elements for adding pictures or banners. Text — text blocks with customizable font size, color and style. Button — blocks with buttons for calls to action (for example, "Buy", "Learn more"). Footer — elements for adding the bottom of the email with contact information, links to privacy policy and unsubscribe. AMP — AMP—enabled blocks for interactive emails.

To add one of the blocks to the template, you just need to drag and drop it into the required area of the email.

Right panel

• Design — customize the appearance of the block, including: paddings and margins, columns, colors (background, buttons and blocks), image settings.

• Structure — allows you to edit the structure of some blocks. For example, you can remove a subheading or text in a block.

Upper operating panel

1. "Preview ” button — shows how the email template will look like on the recipient's screen, taking into account all added elements;

2. "Apply ” button — saves the changes made in the template;

3. Cross (Close) — closes the editor;

4. Cancel Action and Return Action buttons;

5. History — button to view changes made earlier;

6. Links Map — helps you quickly find, edit or check links without having to go through the entire template manually;

7. Settings button — allows you to customize the preheader of your email. Preheader is a text that is displayed right after the subject line in email clients. It serves as a brief description of the e-mail content and helps to interest the recipient by complementing the subject. In this block editor, the preheader is an invisible element. This means that it is not displayed in the email body itself, but its text is visible to the recipient in the preview bar next to the subject line in the email client.

Working with the template after creation

After creating a template and applying the changes, you will have several actions available to you:

1. "Edit" button - allows you to return to the editor and make changes to the template;

2. "Show template code" button - shows HTML code of the created template:

caution

You can go to the code editor from the window that appears by clicking the "edit as code" button, but you will no longer be able to edit your template in the block editor.

3. "Edit text version" button — demonstrates the text version of your template, it also allows to edit it.