Adding custom HTML to a drag and drop email template

Vero’s Drag and Drop email editor is an easy to use WYSIWYG email template designer that can help you achieve a lot of layouts and styles. However, sometimes you need something custom that goes beyond what is possible with the supplied design controls. To help give you the flexibility to add non standard design elements to your template, Vero supports adding custom markup and styles using the HTML block.

How to add custom HTML to your template

To add custom HTML and CSS to your template, simply drag an HTML block into your template.

HTML blocks can be added to any Section block and will create a new containing section if dragged between existing sections.

Once dragged into your template, you can select the HTML block and add your own code into the code editor provided.

You can add any HTML and CSS styles into a HTML block, however please note that this is an advanced feature and does require knowledge of email templates design and best practices to ensure your designs look as intended on all platforms. See our note on compatibility below.

The changes you make to your HTML code will immediately display in the preview on the right.

Styling your custom HTML

Styling your HTML is possible using CSS styles, this can be done in two ways:

1. Adding a style tag above or below your content.

<style>
	h1 {
	  color: #ffffff;
  }
</style>

<h1>Hello World</h1>

2. Adding inline styles.

<h1 style=”color: #ffffff”>Hello world</h1>

Vero’s drag and drop email editor is designed to make sure that however a template is designed, it will appear as intended in all modern clients and devices.

To ensure that the compatibility of the overall template design is not easily impacted by custom HTML and CSS, any styles included will be scoped to the currently selected block.

This means any using selectors for elements such as p, h1, h2, div etc that would normally affect any instance of those elements on the page, will only affect those elements inside the current html block, and will not affect other elements in the template as a whole.

Email compatibility

Due to the flexible nature of HTML and CSS, when adding custom markup and styles using the new HTML block we cannot 100% guarantee that the template will look as intended in every email client and device.

We recommend testing your email on multiple devices and email clients using a service such as litmus or email on acid for the best results.

When adding custom HTML and CSS we also recommend referring to https://www.caniemail.com for more information about which elements and styles are compatible with the various email clients and devices.

Validation and code sanitization

When using the HTML block, you may notice that your code is reformatted after being entered. This is because it is being validated and sanitized to ensure that invalid HTML is removed and that all necessary ending tags are in place. This must be done to ensure the integrity of the template as a whole and to make sure all content outside the custom HTML block will render correctly. Please make sure all code added to the template is valid.

Liquid personalization inside an HTML block

The custom HTML block supports using Liquid syntax to include object variables to your template using double curly brackets, such as:

<table>
  <tr><td>{{ user.first_name }}</td></tr>
</table>

Due to how HTML is validated we recommend wrapping liquid logic tags such as if, unless, for in comments to ensure they are not removed for being invalid HTML. For example the following logic tags must be wrapped in comments because it is invalid to include content directly inside the <table> tag.

<table>
  <!-- {% for i in (1..5) %} -->
  <tr><td>{{i}}</td></tr>
  <!-- {% endfor %} -->
</table>