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.
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.
*** 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:
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).
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.
*** 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:
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.
- Header – These are written as either h1, h2, or h3. You can use these for your company name, article titles, etc.
- Paragraph – You can use this for your articles. You can use a combination of photos and text.
- Picture – This is a content type you use if you want users to use only a single image.
- Gallery – Use this type to display multiple images.
- Ecommerce – You can connect your ecommerce account to pull information about your products. Currently, only Shopify can be used.
- Video – Create a screen capture of your Youtube and Vimeo videos. The screencap will automatically be linked to the video.
- 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.
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.
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).
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.
For more information about any feature of ActiveCampaign’s email marketing software, please contact our support team. We’ll be happy to assist you.