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.
<div class="klaviyo-block klaviyo-text-block">
Within the text block, you can include any text/html/etc as the default.
<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
Once you've added the tags, the template will still show up in your Email Templates tab.