Creating email templates

Email Templates

Email template serves as a starting point when you are composing a new email. Its a preformatted structure used to save creation time as well as provide a homogenous design for your email communications. Brick River platform allows for multiple types of template creation.

In this tutorial, we are going to understand the steps for creating templates from the email gallery. There are two ways to create templates.

  1. Using template gallery
  2. Using HTML

Using Template Gallery

Brick River has built and maintained a template gallery. Each of these templates has been tested in multiple email clients like Outlook, Gmail, and mobile for the best possible results. To create a template from the template gallery, perform the following steps:

Step 1- Use Template Gallery

  1. Click Email in the main window. The Email Center page is displayed.
  2. Click Templates. A page showing all your templates is displayed. 
  3. Click Create one from our gallery button in the top right corner. 

Step 2- Select a Template

  1. The template gallery shows different types of templates having different logos, banner images, and sidebars. Select your template and click Build Mine. 
  2. This will open up the template builder where you can customize the template.

Step 3- Navigate the template builder

The Template Builder shows a preview of the template on the right and configuration options on the left. The options at the top of the page are available for the current template. The options include:

  1. Save and Refresh: Saves the current template and reloads the preview with the current settings.
  2. Save and Exit: Saves the current template and exits from the template builder.
  3. More: Contains a list of additional actions:
    1. 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.
    2. 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.
    3. Get the HTML: Opens a text box containing the HTML code with all of the customizations.
    4. Archive: Archives of the current template.
    5. Delete: Deletes the current customized template. Be aware there is no undo once a template is deleted.

Step 4- Customize the template

You can make changes to the template using the options on the left side of the screen. 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. Each template has different options, but here are some options you will find in most templates:

  1. Template Name: Enter the name of your template. Avoid using special characters.
  2. Email Title: Enter the title of the template. Avoid using special characters. The title will fill in the HTML title property.
  3. Email Background Color: Enter the background color of 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
  4. Email Border Color: Enter the HEX value of the border around the email content area. If you don't want to see a border then make the border the same color as the main content area background.
  5. Header Image: Enter 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. Image links should include the full URL and begin with HTTP://. Do not include image tags in this field.
  6. 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.
  7. Main Content Background: Enter the color for the background of the main content area for the email. Note that using a dark background may produce unexpected results.
  8. Main Content Font Color: Enter the color of the font used in the email. Use the HEX value.
  9. Main Content Link Color: Enter the color of links in the email. Not all email clients will use this color (they like to use their own color). 
  10. H1, H2, H3 Color: Enter the color for the H1 and H2 tags. 
  11. Sidebar and Footer Content: The template may contain a footer, sidebar or another secondary content area. These areas can be plain text, images, including 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. Once you have finished customizing your template, click Save and Exit. 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.

Using HTML

If you are an HTML expert and understand how email clients work than you can create an email template using HTML. To create a template from scratch, perform the following steps:

  1. Click Email in the main window. The Email Center page is displayed.
  2. Click Templates. A page showing all your templates is displayed. 
  3. Click Add one from scratch button in the top right corner. 
  4. Enter the Template Name.
  5. Enter the Template Code. Each template must contain the following HTML:
    1. <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. 
    2. <b data-unsub="unsub">&nbsp;</b>
      This tag needs to be placed where the unsubscribe and CAN-SPAM information will be displayed. It must not be placed in a content editable area.
  6. Click Save. 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.