Video Overview of Email Template Design
When creating an email, you select a template to surround the contents of the email. Templates can have multiple content areas, each editable using the WYSIWYG editor in the email compose screen. In the email compose screen you can switch templates at any time. When switching templates only the main content of the email will be moved to the new template; content in any other area will be lost and the selected template's default content will be loaded into the email.
Creating Email Templates
You can create as many email templates as you need. There are two ways to create email templates:
- Create a template using the Template Gallery
- Add an email template from scratch (HTML)
Using the template gallery
Brick River has built and maintains the Template Gallery. Each of these templates has been tested in multiple email clients (including mobile) for the best possible result. You can navigate to the Template Gallery from the Email homepage > select Templates, > then click on Template gallery.
Browse and select a template to edit
Once in the Template Gallery, browse the templates noticing the placement of logos, banner images, sidebars and the overall width of the email. Select a template that is closest to the design you would like for your new template. Click the Build Mine button to create a new template and begin customizing the template in the template builder.
Navigating the template builder
The Template Builder loads with a preview of the template on the right and the configuration options on the left. At the top of the page are the options available for the current template. The options include:
- Save and Refresh - saves the current template and reloads the preview with the current settings
- Save and Exit - saves the current template and exits from the template builder.
- More - contains a list of additional actions:
- Copy - copies the current template with all of the customizations. This option allows you to copy a template you have customized with your images and colors for editing.
- Show email variables - email templates can include fields from a users profile that will be filled in when the email is composed. Drag and drop the email variables into the configuration options (not the preview!) to use any of the email variables.
- Get the HTML - opens a textbox containing the HTML with all of the customizations.
- Delete - delete the current customized template. Be aware there is no undo once a template is deleted.
Customizing a template
Using the customization options on the left side of the screen you can make changes to the template. Default content is added to each field as a starting point and as a guide for what can be added to the field. After changing any of the values, click the Save and Refresh button at the top to see how the template is changed. Each template has different options, but here are some options you will find in most templates:
- Template Name - name your template. This will be displayed in the template drop down of the compose screen. Avoiding using special characters.
- Email Title - If the template will be used for a newsletter, using the newsletter name is a good choice. You can use any title you want, but try avoiding special characters. The title will fill in the HTML title property.
- Email Background Color - the background color of the email. This is not the background color of the email content - it is the background color behind the email. Colors (for all color fields) should be entered using the RGB HEX value and include the preceding #. Here's a handy HEX color reference
- Email Border Color - The HEX value of the border around the email content area. Don't want to see a border? Just make the border the same color as the main content area background.
- Header Image - if the template you selected has an image at the top, change the url to point to your header image. Header images can be any height and can be full wide (each email template in the template gallery is named with the template width) or smaller. Linking to an image that is wider than the template could cause the template to break. Image links should include the full URL and begin with http://. Do not include image tags in this field.
- Header Link - add a link for your readers to connect to when they click on the header image. Links should include the full URL and should not include <a> tags.
- Main Content Background - background of the main content area for the email. Specify the color using the HEX value with the preceding #. We recommend you choose your background color carefully. Not all email clients will display the background color, so using a dark background may produce unexpected results.
- Main Content Font Color - color of the font used in the email. Use the HEX value.
- Main Content Link Color - color of links in the email. Not all email clients will use this color (they like to use their own color). Use the HEX value, add the #? Yes.
- H1, H2 Color - the style of the H1 and H2 tags are defined in the template. You can specify the colors using the HEX color, of course.
- Sidebar and Footer Content - the template may contain a footer, sidebar or other secondary content area. These areas can be plain text, images, include email variables, or can be HTML. We often add HTML as the default in these areas as a suggestion as to what the area can be used for, but this is just a suggestion, you can add any HTML or text you want.
When you are done customizing the template click Save and Exit. We recommend creating a new email with the new template and sending a test to yourself. If you missed anything or want to go back and edit the template go to the templates area and from the My Templates page click on the name of the template you want to update.
Adding a template from scratch
If you are an HTML guru and understand how email clients work (they are a lot pickier than web browsers!) than you can create an email template using HTML. Click on the Add one from scratch button, add your HTML and give your new template a name. There are a few things you need to know and include in your HTML template to work with our emailer:
- Before we go any further, you're an expert, right? If you are not, go to the template gallery and customize a template.
- Each template must contain the following HTML:
- <div id="bodyp" contenteditable="true" style="add your style here">GivenBody</div>
This is the main content area of the email. You can add any styles you want. Using GivenBody allows previews of the template to work with Ipsum text inserted.
- <b data-unsub="unsub"> </b>
This tag needs to be placed where the unsubscribe and CAN-SPAM information will be displayed. It must not be placed in a contenteditable area.
- You can have as many editable content areas as you want. Editable content areas are <div> tags with content editable attribute set to true. Each editable area must also have a unique id. You can only have one content area with the id bodyp. ( example: <div contenteditable="true" id="myid"> ) When templates are switched in the compose screen of the emailer only the contents of the bodyp div are moved to the newly selected template.
- Test your template - we can not stress this enough. Test it in different email clients, test it in multiple platforms (mobile, tablet, desktop), test it in a house, test it with a mouse.
Once you save your HTML template you can go back and edit it by clicking on the template's name on the My templates page.