Import a Custom HTML Template with Drag and Drop Support

read

Overview

If you have existing HTML templates, you can convert sections of them to editable blocks that can be easily changed/added/removed within Klaviyo's Drag-and-Drop editor.

Note

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.

Add Drag and Drop Support to Your Template

Start by importing your custom HTML templates.

Once your templates are imported, you need to add tags to the HTML to make blocks editable.

1. 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.

2. 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.

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.

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.

Note

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.

Was this article helpful?
10 out of 42 found this helpful