Use Code Content Blocks in the New Builder

Use Code blocks to add custom HTML directly into your email. 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 use Code content blocks in the new email builder.

Before you start

Here are some things to know before you begin this process.

• This article tells you how to use Code content blocks for the new builder. For more information on Code content blocks in the classic builder, check out Use Code Content Blocks in the Classic Builder.
• 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 preview and test your email to see how your campaign will look on desktop and mobile.
• The Heading and Paragraph content blocks also have a code editor. To learn more, check out Use Heading Content Blocks in the New Builder and Use Paragraph Content Blocks in the New Builder.

Use Code content blocks to your email

To use a Code content block, follow these steps.

1. Click a Code block, or click and drag a Code block into your layout from the side panel.
2. In the Code menu, type or paste in your code.
   

Code block tips

Here are some tips for how to use the Code block.

• Don't use JavaScript.
  Because most email clients block JavaScript to protect against viruses, we automatically remove all detectable JavaScript from your code.
• Don't use a word-processing program to create HTML content.
  Programs like Microsoft Word or Publisher can add extra styling code that distorts 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 won’t work in HTML email. You can add embedded or inline CSS to a Code block, preferably above the body section of your 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 on 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.

Supported HTML elements and attributes

We’ll automatically clean up any elements that aren’t supported in the code editor.

Enable dynamic content

You can turn any content block into dynamic content that displays different content to recipients based on conditions you set. This helps target different types of contacts at the same time with a single email.

To learn more about dynamic content and how to enable it in your content block, check out About Dynamic Content.