Import a Custom HTML Template with Drag and Drop Support

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.

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.

Was this article helpful?
1 out of 4 found this helpful