Use HTML with the Email Designer

```mediawiki Navigation: Main_Page > Email > Design > Use HTML with the Email Designer

Use HTML with the Email Designer

With ActiveCampaign’s Email Designer, you can easily use HTML in your email design. This functionality provides the flexibility to create campaigns that align with your business objectives while also allowing for straightforward troubleshooting. In this article, we will cover how to access and utilize the HTML features within the Email Designer, the steps involved in creating custom email designs, as well as best practices and troubleshooting tips.

Introduction

The ability to utilize HTML in your email campaigns is crucial for those looking to customize and refine their email communications. The Email Designer, launched in 2022, allows users to incorporate HTML code effectively. This capability matters because it enables marketers to create visually appealing and functionally robust emails that can capture the attention of recipients.

It is important to note that this feature requires familiarity with HTML and CSS. As with any custom coding, the complexities of HTML may require a certain level of expertise. Additionally, the ActiveCampaign Customer Experience (CX) Team is unable to assist with the creation or troubleshooting of custom code within the Email Designer. For users interested in the Classic Designer’s HTML options, please refer to the article on Classic Designer: Use the HTML content block with campaigns.

How to Access This Feature

To access HTML functionalities within the Email Designer, simply follow the steps below:

1. Log into your ActiveCampaign account and navigate to the Email Designer. 2. From the Email Designer interface, you will find various options for adding content, including the capability to use HTML.

Step-by-Step Instructions

There are two primary approaches to add HTML to your emails: using the HTML content block and accessing the HTML code option. Here’s how to do each:

Use the HTML Content Block

1. From the Email Designer, click the Blocks dropdown on the right menu. 2. Scroll down until you find the HTML block option. 3. Drag the HTML content block into your email design area. This block will now be visible in the Email Designer window. 4. Click on the HTML block to activate the code editor. 5. Insert your custom HTML directly into the code editor. 6. To exit the code editor, simply click anywhere on the block outside of the HTML editor.

Access the HTML Code Option

1. From the Email Designer, click the Code button situated at the top of the right pane. 2. The code panel will appear at the bottom of the Designer, displaying the HTML and CSS for the selected content block. If no content block is selected, the entire email code will be shown. 3. To edit the HTML code, click on the relevant section you want to modify and make your changes. 4. To return to the regular view, click the Code button again.

Create a New Template with the Email Designer and Custom Code

1. Navigate to the Campaigns page and select Campaign Templates. 2. Click on the Create a Template button. 3. Select the Email Designer option and then hit Continue. 4. On the following page, click on the Start from Scratch option. 5. The Email Designer will open. Click on the Code button. 6. The code editor will open at the bottom of the page displaying HTML and CSS:

   * Add or modify HTML directly in the code editor.
   * To include custom CSS, click the CSS button on the right to expand the CSS box and add your styling.

7. Once done, click the Code button to preview your modifications, or use the drag-and-drop options as needed to enhance your email design.

Configuration Options and Settings

Using HTML within the Email Designer comes with specific configurations and limitations. Here are key points to consider:

• The Template:HTML content block is a distinct feature; HTML added here does not apply to other blocks.
• You must avoid incorporating unsupported tags within your HTML code, including:

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

These elements may cause rendering issues in various email clients, including Gmail and Yahoo.

Best Practices and Tips

To maximize the effectiveness of HTML in your email designs, consider the following best practices:

• Always preview your email before sending it out to ensure correct rendering across different email clients and devices.
• Test your emails with various HTML snippets to understand what works best for your audience.
• Keep your HTML and CSS clean and well-structured; avoid inline styles that could complicate your code.
• Utilize responsive design techniques to ensure your emails look good on both desktop and mobile devices.
• Regularly review and maintain your custom code to avoid deprecated elements or practices.

Common Use Cases with Examples

Using HTML with the Email Designer can open up numerous possibilities for your email campaigns. Here are a few common scenarios:

• **Branding Consistency:** Create emails that reflect your brand’s unique style by customizing elements like fonts, colors, and layouts through HTML and CSS.
• **Interactive Features:** Include attention-grabbing visuals and styles that can prompt user engagement, while adhering to HTML limitations.
• **Promotional Campaigns:** Develop stunning promotional emails that catch the eye with beautifully styled buttons and formatted text.

Troubleshooting Section

If you encounter issues where text or buttons do not render correctly, utilize the following troubleshooting tips:

• Click the Code button to directly view and edit the email code.
• Ensure your HTML does not include unsupported tags as mentioned earlier.
• Review your CSS rules to see if any might conflict with email client behaviors.
• Test your email by sending it to yourself before sending it to a larger list to catch any potential issues.

FAQ Section

Q1: Do I need advanced coding skills to use HTML in the Email Designer?

• • A:** Yes, you must be comfortable with HTML and CSS to effectively utilize custom code in Email Design.

Q2: Can I get help with my custom HTML code from ActiveCampaign?

• • A:** The Customer Experience Team cannot assist with creating or troubleshooting custom code.

Q3: What tags should I avoid in my HTML email code?

• • A:** Please avoid using tags such as <button>, <form>, <input>, <select>, <textarea>, <iframe>, <script>, and <video> as they are not supported.

Q4: Can I preview my changes while in the code editor?

• • A:** Yes, you can click the Code button to toggle back to the standard view and see your design.

Q5: Are there any limitations to the HTML block in the Email Designer?

• • A:** The HTML added in the HTML content block does not apply globally across other content blocks in the Designer.

Q6: What should I do if my email doesn’t look right in Gmail?

• • A:** Use the Code button to troubleshoot your HTML and CSS, ensuring there are no unsupported tags.

Q7: Can I create reusable templates with the Email Designer?

• • A:** Yes, you can create templates using the Email Designer with custom code tailored to your needs.

By utilizing the HTML features available in ActiveCampaign's Email Designer, you can create highly customized email campaigns that resonate with your audience, drive engagement, and achieve your marketing goals. ```