You will learn
Learn how to convert sections of your custom HTML templates to editable blocks that you can change, add, or delete within Klaviyo's drag-and-drop editor. This functionality is only available in Klaviyo's classic template editor at this time.
We only recommend using custom HTML for technically savvy marketers, or for anyone who has access to a developer. While our product does support custom HTML, our support team is unable to help you build out your custom templates beyond offering the general guidance covered in this documentation.
To maintain the security of your data, Klaviyo's support team is not able to open your HTML files.
Before you begin
Before proceeding to the steps below, learn how to import your custom HTML templates.
Add drag and drop support to your template
- Add a property to the enclosing <td> tag that indicates it's going to be an editable column.
Here's what this looks like:<td align="center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600">
For each table column, you'll specify that it's an editable region and you'll specify the width of that region. Editable blocks all have to start with a table column. - Add a
<div>for the type of block.
Immediately within that<td>tag, you'll add a<div>tag specifying the type of block that it will contain: either text or an image block.
You aren't limited to just text and image blocks in custom HTML templates with drag and drop support. To add other block types (e.g., Table Blocks or or Button Blocks), follow the instructions below to add a text block. Once you've uploaded the template, open it in the campaign or flow editor, then drag another block type into the customizable field.- Text Block:
<div class="klaviyo-block klaviyo-text-block">
Within the text block, you can include any text/html/etc as the default. - Image Block:
<div class="klaviyo-block klaviyo-image-block">
Within the image block, you'll want to include an <img> tag that links to the default image.
- Text Block:
- Finally, remember to close the
<div>and<td>blocks.
Once you've added the tags, the template will still show up in your Email Templates tab.
The template will not appear in the drag-and-drop editor until you use it in a campaign or flow email. It will remain as custom code in the Template Library view.
When you use your template in a campaign or flow email, the Styles tab will not be present in the drag-and-drop editor. Set all of your email styles in the email’s CSS.