Yes, it's possible to add your own custom CSS styling to your visual Email Templates!

This is a great option if you want to take advantage of our visual template editor, but still would like the flexibility to make additional customizations with CSS. 

NOTE: You also have the option to create your email template using entirely HTML & CSS if you feel comfortable doing so, and forego the visual editor altogether. Here’s how!

Here’s how to add CSS to our visual template editor.

1. At the bottom of your Email Template, add an HTML block

2. Click ‘Edit’ to the right of your new HTML block

3. Replace the placeholder HTML with your CSS in between <style> tags, then click ‘Save’

As soon as you click ‘Save’, your template should update to show the styling changes instantly! 

NOTE: Since we’re adding CSS instead of HTML, nothing will show up in the HTML block itself when looking at your template preview. This is normal, but as a side effect, you may have to hover around the area where your HTML block was added in order to reveal the Edit button:

Code snippets to help you get started

Here are some code snippets that you might find helpful:

Increase spacing between paragraphs

p { margin-bottom: 10px; }

Add a margin around your email

.email { padding: 0 20px; }

Remove dotted border above footer

.email-body-footer { border-top: none !important; }

TIP: If your CSS changes aren’t showing, try increasing its priority by adding !important right before the semi-colon (like in the third example above).

The <style> tag

❗️Make sure your CSS code is enclosed in the correct tags within your HTML block! <style> should be at the beginning of your CSS code, and </style> should be at the end (note the slash in the closing tag).

Here’s an example of the CSS you could add to your HTML block in order to increase the spacing between paragraphs, as well as add a margin around your email:

<style>
p { margin-bottom: 10px !important; }
.email { padding: 0 20px; }
</style>

The <style> tag indicates that the code you are adding is CSS (rather than HTML), so all of your CSS code should go in between those tags within your HTML block.

The Visual Email Template Editor


Did this answer your question?