Use HTML with the Email Designer

With ActiveCampaign’s Email Designer, you can easily use HTML in your email design. Doing so gives you the flexibility to create a campaign that best suits your business objectives and allows for easy troubleshooting. 

Take note

• This article refers to the Email Designer launched in 2022. If you want to learn how to use the HTML options for the Classic Designer, please see Classic Designer: Use the HTML content block with campaigns
• You must be comfortable with HTML and CSS to use this option
• Our CX Team cannot help you create or troubleshoot any code you create in the Email Designer
• Iframes are not supported in email campaigns

Use the HTML content block

One way to add HTML to your campaign is with the HTML content block. With this option, you are only adding HTML code to the content block. It does not apply to the rest of the content blocks in the Email Designer. 

1. From the Email Designer, click the "Blocks" dropdown on the right menu.
2. Scroll down to the HTML block option.
3. Drag the HTML content block to your email design. The HTML block will show in the Email Designer window.
4. Click the HTML block to bring up the code editor.
5. Add your custom HTML into the code editor.
6. To exit the code editor, click any block in the Email Designer. 

Access the HTML code option

For greater control over the Email Designer, you can edit your email’s HTML with the code button.

1. From the Email Designer, click the “Code” button. This is located at the top of the right pane.
   
2. The code panel will load at the bottom of the Designer. Here you can view the code for your email. Note that the code editor will display HTML and CSS for any content block you click. If you do not select a content block, the editor will display code for the entire email.
3. To adjust the code, click the area you want to update and add or edit the code.
4. To exit the code view, click the code button again

Create a new template with the Email Designer and custom code

You can create a template in the Email Designer that uses custom code.

1. From the Campaigns page, click “Campaign Templates.”
2. Click the “Create a Template” button.
3. Choose the “Email Designer” option, then click “Continue.”
4. On the next page, click the “Start from Scratch” option.
5. The Email Designer will load. Click the “Code” button.
   
6. The code editor will open at the bottom of the page and display HTML and CSS:
   • Add or edit the HTML in the code editor 
     
   • To add custom CSS, click “CSS” on the right to expand the box, then add your CSS. 
     
7. When finished, click the “Code” button to view your work. You can also use the drag-and-drop options to complete your email (if needed). 

Troubleshoot your design

If any text or buttons aren’t rendering correctly, you can view the email code and adjust it by clicking the “Code” button. Having easy access to the code helps you troubleshoot issues and customize the email’s style.

Please make sure your HTML code does not include the following tags, as they are not supported in email clients (such as Gmail, Yahoo, and more):

• <button>
• <form>
• <input>
• <select>
• <textarea>
• <iframe>
• <script>
• <video>