Communication templates create cohesive communication between team members and customers. The HTML editor takes template design to the next level using drag-and-drop blocks to create a tailored template for your company. Import your own images, links, and buttons to develop a branded template.
In this article you will learn:
- How to toggle on/off the HTML Editor.
- How to navigate the HTML Editor.
- How to create a new template using the HTML Editor.
- Content
- Blocks
- Body
- Images
- Uploads
This guide will walk you through creating a Communication Template using the HTML Editor. Additionally, there is a written guide below.
How to Toggle On/Off the HTML Editor
Within the Templates Library, click the + Add Template button.
- Locate the Text/HTML.
- Click HTML.
- Click Edit.
How to Navigate the HTML Editor
There are many options to make your email design pop! You can add content, blocks, stock images, and upload your own files. You can also personalize the body of the email to match your brand.
The small, black bar in the bottom left corner of the HTML editor includes undo and redo buttons, preview button, and a desktop and mobile view.
You can utilize different tools to make your template unique.
Tool | Description |
Content | Add columns, buttons, dividers, headings, HTML code, images, menus, text. |
Blocks | Create placeholders within your template. You can drag and drop content, images, or uploaded files into a specific block. |
Body | Customize the text color, background color, content width, content alignment, and font family. You can also designate a specific color for links. |
How to Create a New Communication Template with the HTML Editor
You can create a new communication template from the Template Library or from the Message Composer Window.
Content
Within the Content tab, you can add different objects that will help you develop a message that your recipients will appreciate.
Add Columns
Columns create placeholders for content. You can drag and drop content into a specific column to increase readability. Hold + click on Columns to drag it over to the Content area. Choose the number and size of columns (Note: decreasing columns will deploy a Delete pop-up confirmation). You can also find column placeholders under Blocks.
💡 Tip: Un-do keyboard commands work in the HTML Template Editor.
For Mac Users: Command + Z
For PC Users: Ctrl + Z
Column properties allow you to manually adjust each column's background color, padding (space between text and borders), and border style (solid, dashed, dotted), width, and color.
Row properties apply to the whole row. You can change the background color of the row, change the background color of the content in the row, and you can upload a background image. Clicking on Apply Effects will allow you to edit your uploaded image.
After customizing your columns, you can drag and drop objects into each area. Clicking on the object after dropping it will open up a properties panel where you can customize the object.
Blocks
Similar to dragging and dropping a column, you can drag and drop a block. Simply choose the block placeholder you prefer and drag into the content area. Column properties will appear on the right once the block has been dropped. You can continue to edit the block in the same way as the columns.
Body
Under this tab, you'll find ways to customize your template to match your brand. You can even set the template settings to match the topic. The options are endless.
Images
If you would like to use stock images from the Image gallery, it's super simple to add. Click on Images in the right navigation bar. A search panel will appear. Type in the topic of the image you would like and hit Enter on your keyboard. Images will populate. Choose the best one and drag and drop it into the appropriate placeholder.
Clicking on the image will open up Image Properties. You can click on Apply Effects to edit the image. You can also set the image to be a clickable link under Actions, choose its alignment, and adjust padding.
Uploads
Upload your own images and drag and drop into a placeholder. You'll also find any uploaded images as well as any edited stock images for the template in this panel view.
