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 firstname.lastname@example.org
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.
- 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.
Hybrid Method Coding
You can learn more about hybrid coding (and more associated links) at this
How to make image backgrounds
This is a really useful tool for making image backgrounds that work in most email clients: backgrounds.cm
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: buttons.cm
Video tutorial -