Use the Custom HTML campaign builder

With ActiveCampaign, you can create a campaign that uses custom HTML code. This option is best for those who want more control over their email design and are comfortable with using HTML.

In this article, you’ll learn how to access the HTML builder and receive guidance on design best practices.

Take note

Our Customer Experience team is not able to help you troubleshoot custom HTML code

Create a custom HTML campaign

1. Go to Campaigns and click “Create a Campaign.”
2. On the Campaign Type page:
   • Supply a name for your campaign
   • Select your campaign type
   • Click the “Next” button
3. On the Campaign Summary page, supply your campaign details. Note you can skip this step and start creating your design. However, you will need to supply campaign details before sending your email.
4. Click the down arrow next to the “Create with email designer” button. Select “HTML builder.”
5. Select a template (if applicable) or click the “Start from Scratch” button.
6. The HTML builder will open. Add your custom HTML to the builder on the left. As you add code, you’ll see it render in the preview screen on the right pane.
7. To insert personalized content, conditional content, an image, an RSS feed, or content from a URL, click the “Insert” option then select the item you want to add. Next, follow the prompts to add that item.
8. To switch to the Visual Editor, click the visual editor icon.
   
   
   
   
9. Click the Setting (gear) icon to update your subject line, add/update preheader text, update your “From” and “Reply to” information, and test your email.
10. Click the "Next" button. You will be redirected back to the Campaign Summary page.
11. Once everything looks good, you can click “Send now” to send the campaign, click the “Schedule” button to send at a later date and time, or click “Save and Exit” to come back to the campaign later.

HTML Design Guidance

Below is general guidance for using the HTML builder. As a reminder, our Customer Experience team is not able to help you troubleshoot or build any code for your email.

Layout

• 650px or less design width
  The general rule for email size is to keep it 650px or less in width. This allows the email to display correctly in most email clients and configurations.
• Simple layouts are best
  With email design, simple is best. If you try to do a complicated design, you will encounter a lot of testing and debugging with email client issues. If you want to complete a more advanced design, be ready to use a lot of tables and set a reasonable amount of time aside for testing.
• Use basic HTML tables 
  You will need to use standard HTML tables to create the overall layout. CSS floating and layout techniques will not render correctly across all the email clients.
• Be careful with table cell padding
  Outlook will apply the padding from any cell in a row to all the cells in the row. This could result in some visual changes that you do not want. It would be best if you tried to apply the same padding for all cells in a row or place an inner div or table (that has padding) within the cell you would like to have padding. (More Info)
• Avoid using colspans="" in your tables
  Some email clients do not fully support colspans and others may have display issues for the other cells.

CSS

• Do not use external stylesheets
  They will only work in a few email clients, and you should include all of your CSS using inline CSS within your HTML. 
• Do not use CSS classes - always use inline CSS 
  Many email clients do not support CSS classes. Instead of declaring CSS classes, you should use inline CSS. An example would be <div style="color:#cccccc;">content</div> instead of <div class="cssclassa">content</div> 
• Don't use CSS shortcuts
  CSS allows you to set properties in groups normally. Such as style=" font: 12px, Arial" Instead of grouping such attributes, you should set each part individually. Such as style="font-size:12px; font-family:Arial" 
• Avoid using CSS float or position options
  Some email clients will disregard both the float and position CSS options. Try to use tables instead.

Images and video

• Use absolute image source URLs 
  Instead of including an image such as(<img src= "img.gif">) you must include the absolute URL to the file such as (<img src= "http://site.com/img.gif">) 
• Always use alt tags (<img src="http://site.com/img.gif" alt="Company ABC">) 
  Most email clients disable images by default. Unless you have alt tags, your subscribers will only see a blank box. With an alt tag, your subscribers will see the text you put in the tag. 
• Do Not Embed Videos or Flash
  Embedding videos directly or flash into your email is not a good idea. Many email clients will not support such code, and many spam & virus detection programs will flag your email as spam/malicious. Instead of embedding your video or flash into your email, take a screenshot of what the video of the flash player looks like and embed that. You can have the video or flash open in their browser when they click on it. 
• Animated GIFs are not fully supported
  Ask yourself whether you need an animation in your email. While most email clients support animated GIFs, Outlook 2007 does not. Email clients that do not support animated GIFs will likely show the first frame of your animation sequence. 
• Be careful with spliced images
  If you have a larger image spliced and placed into your HTML using table cells or img tags right next to each other, you will need to test thoroughly. Some email clients may add extra space between your images and cause your email to look bad.
• Avoid using images to help with your layout
  Some people use 1 or 2 pixel images to help align items within their layout. Some email clients or filters will think it is a potential read or open tracking image and penalize the email.
• Test your email with images disabled
  Since most email clients show emails with images disabled by default, you must check to see how your email looks with images disabled.
• Watch your file sizes
  As with traditional web design, you want to be aware of image file sizes for your email. Please try to keep them low to make sure they will download quickly for your subscribers.

Background

• Background images are not fully supported
  If you use a background image, remember that some email clients will not show them. If you still wish to use a background image, use the HTML background options instead of using CSS to declare a background.
• Full body background colors 
  Many email clients (such as Gmail) do not show a background color that you set for the main body (<body> tag). If you are setting a background color in the body tag, you should also have a wrapping div with a background color that surrounds your content. This way, even if the body background color is not supported, you will have something similar.

Miscellaneous

• Do not put anything above the opening <body> tag
  Anything you put above the body tag will likely be stripped and unused.
• Do not include javascript
  It is likely stripped in most email clients, and spam filters may detect it as malicious code.
• Avoid Microsoft Office
  The HTML generated will almost guarantee issues. Additionally, when you copy and paste from Office, you will be pasting in their formatting and likely have design issues.