Use the Code content block to add HTML code directly into your email campaign. This block is useful if you want more control of your design than what our other content blocks provide.
In this article, you’ll learn how to add a Code content block to your email campaign.
Before You Start
Here are some things to know before you begin this process.
- This is an advanced feature and is recommended for users familiar with custom coding. Contact your developer, or hire a Mailchimp Expert if you need assistance.
- We recommend that you send test emails or use our Inbox Preview tool to get an idea of how your campaign will look in different email clients.
Insert the Code Block
To insert a Code content block, follow these steps.
- In the Content section of the Campaign Builder, click Edit Design.
- On the Design step, click and drag the Code block into your campaign layout.
- In the editing window, type or paste in your code.
- Click Save & Close.
Code Block Tips
Here are are some tips for how to use the Code content block.
- Don't use a word-processing program to create HTML content.
Programs like Microsoft Word or Publisher can add extra styling code, and distort your campaign. We recommend that you write the HTML code in a simple text editor and then paste the code into the Code block.
- Use embedded or inline CSS.
In most cases, external CSS files will not work in HTML email. You can add embedded or inline CSS to a Code block, preferably above the body section of your campaign layout. For the best results, we recommend you use inline CSS.
- Use media queries to ensure responsive design.
If you want your code to be mobile responsive, you’ll need to include media queries. A media query is a CSS component that allows your content to adapt to different devices. To learn more, check out the W3C Recommendation for Media Queries and the Litmus guide to How to Code a Responsive Email from Scratch.
- Use the Content Studio or absolute paths for images and files.
Use our Content Studio to host files and images for your campaign. Grab the file URL from the Content Studio and paste it into your code in the Code block. If you host your images on your own server, use absolute paths.