Coding with the custom HTML block

To use the new Custom HTML block, you'll need to:

  •  Enable Conversio Pro before the content block is available in your list of available content blocks.
  • Ensure you're on a customer-based price plan. Need to switch to it? Click on the support icon at the bottom of the browser window or email

Coding for emails isn't like coding a webpage. Every email client may come with its own set of issues & requirements, and web-based email clients can look different between browsers too. Do not proceed to use this block unless you're confident with email code!

Our Customer Success team cannot assist you with coding for your custom HTML content block.

We code all our content blocks using the "hybrid method" which requires fewer media queries. We recommend you do the same, but this is optional.

The Block - What you should know

CSS input area

  • Our CSS input support media queries. 
  • It adds the CSS into the internal stylesheet (i.e. in the head).
  • It also adds inserts the CSS into the body (to support some mobile email apps).
  • It doesn't inline your styles, you'll need to do this yourself.
  • The styles you add will only apply to the current block. To prevent the email breaking, we apply a parent class in front of each style.

HTML block

  • You can only insert HTML into this area.
  • The width of the email is 680px, this cannot be changed, but you can make the width of your block smaller.
  • We use gutters of 40px each side and 30px below each block (i.e. padding: 0 40px 30px), and use to reduce the gutters to 20px on mobile devices.

Coding Tips

Hybrid Method Coding

You can learn more about hybrid coding (and more associated links) at this github  repository. You'll find examples in there for images and one, two and three column items.

How to make image backgrounds

This is a really useful tool for making image backgrounds that work in most email clients:

Make fully clickable email buttons

Making a button using a padded anchor tag doesn't play nicely in Outlook (desktop). Use this handy tool to make one that looks and works great:

Video tutorial -

Still need help? Contact Us Contact Us