Help articles


Creating a template on the new Email Designer

Creating a beautiful and engaging email has never been easier with ActiveCampaign’s email designer. We use the latest technologies and conventions to make designing and creating templates as easy as possible.  This is part of our ongoing effort to make email marketing easy.

This guide will teach you the basics of creating a template with our email designer.  We will first teach you the elements of each template. After that, we will walk you through the template creation process.

Key Terms

Style Regions

These would be the areas on your template where users can change style elements such as background color, font family, font color, and link color.

Style Regions

*** You would need to add data-style-region=”Header” to whatever region you want to define.  For example, if you want to define a style region for a whole table, you can add it within the opening table tag:

<table data-style-region=”Header”>


The name you sue for your Style Region will show up when someone uses your template when creating a campaign (as shown on the previous screenshot).

Editable Regions

These would be the areas on your template were content will be placed. You can think of these as empty containers. The general rule is to use the least amount of editable regions as possible.

Editable regions

*** There are two elements of an editable region.  Both are needed when defining an editable region

a.  Container = is an id of sorts

b.  Label = is used for mapping

 The HTML code for an editable region will look something like this:

<div container=”header” label=”My Header”>


Content Blocks

These go inside the editable regions. You actually do not add this to the code. You can add as many content blocks as you want within an editable region.  There are 7 content types that you can use. Each will be explained below.

Content Block


Content Types

  1. Header –  These are written as either h1, h2, or h3. You can use these for your company name, article titles, etc.
  2. Paragraph – You can use this for your articles. You can use a combination of photos and text.
  3. Picture – This is a content type you use if you want users to use only a single image.
  4. Gallery – Use this type to display multiple images.
  5. Ecommerce –  You can connect your ecommerce account to pull information about your products. Currently, only Shopify can be used.
  6. Video – Create a screen capture of your Youtube and Vimeo videos. The screencap will automatically be linked to the video.
  7. RSS – You can add an RSS feed URL to your emauil using this content type. The latest feed(s) will be pulled from the URL you provided.

Creating a Designer Template

1.  To start creating a Designer Template, go to Campaigns –> Email Templates and click the Add button on the bottom of the page. Choose the Designer Template type.

Designer Template Type

2.  Once you’ve chosen designer template, you will then get a pop-up/modal. You can then name your template and select a layout to start with.
Name and Layout
3.  For this example, we’ve chosen the first layout with a single image and a paragraph below.  The image below is a preview of the layout you’ve chosen.
Edit Designer
The image below shows you the HTML code for that layout.
Edit Designer
One thing to note about the HTML code is that you won’t see the code for the actual content.  Basically, HTML coding is only needed to create the structure of the message. This makes creating templates much easier to do.
Things to note when coding:
a.  Your template would need to have at least one style region
b.  Try to have as little style regions as possible
c.  Keep Editable regions at a minimum
d.  You should only really add editable regions if you have to (Ex.  if your regions have different widths)
4.  Adding an editable region. To add an editable region, you need to add it within <td></td> tags. You would need to create the structure first and then add the editable region within the tags.
Here, we added another set of <tr> and <td> tags within the inner table then placed our cursor between the <td> tag. We then hit the “Add Editable Region” button. You would be asked to provide a label name to your region (The label name would also become the container name but you can manually change it).
Editable Region
Your layout would now look like this.
Editable Region
You’ll notice that a new Editable region has been added right below were our original region was. You can add as many editable regions as you want but keeping it to a minimum would make the templates easier for users to use.
5.  Adding Content Blocks. You can then add Content blocks by hovering over the Editable Region and clicking the + sign.  You can then choose the content type you want to add.
On the image below, we added a gallery content type to our Editable Region.  We can now drag our images to the image holders on this content type.
Image Gallery

Creating Themes for your Templates (Applying Styles)

In addition to creating the actual structure of the template, you are also able to create different themes for your templates. Themes allow you to provide different color schemes for your templates.  “Theme-ing” on the Template editor is easy, using CSS.

1.  To add a theme, click on the style options button.

Style Options

 2.  Each content has a default class.  When theme-ing, you can use these classes. You can find the class by clicking on the content. Below, we clicked within the first paragraph.  The class will be displayed on the bottom of the browser.


 2.  To use the class on your theme, you can click on copy or insert. If you click insert, the class will be added at the end of your CSS (in your theme box).

Classes on Themes

3.  You can now apply any styles you want to that class.  Here we applied CSS to our paragraph.


4.  You can also use CSS on the HTML code. You do this if you need to apply styles that you need “globally.”  You can also add media query code on the HTML code. Please note that we add a lot of media query on your templates.  However, you can add extra code to fine tune your template.

Below, we have both a CSS that we need globally and media query that we added on the head part of the HTML code.

CSS Head

More questions?

For more information about any feature of ActiveCampaign’s email marketing software, please contact our support team. We’ll be happy to assist you.