Newsletter: Save & Upload a Template

Overview

This section allows you to create and style your own themes and templates. Alternatively, if you have any HTML theme, you can upload the theme/template into your themes library for use with your newsletters or you can create a new theme/template with the visual editor or the Drag & Drop Builder in Newsletters > Themes/Templates.

• This is a full HTML theme and should contain at least [newsletters_main_content] somewhere.
• You may use PHP code inside themes and any of the shortcodes/variables.
• Upload your images, stylesheets and other elements via FTP or the media uploader in WordPress. You need to ensure that all links, images and other references use full, absolute URLs.

 

Important Checklist for Newsletter Templates

There are a few things we recommend when using your own newsletter template:

1. Turn On Auto Inline Styles

Turn on “Auto Inline Styles” setting under Newsletters > Configuration > General > Sending Settings (in Advanced settings mode) to ensure that all CSS in the head of the newsletter template is applied to elements inline as style attributes. This will ensure cross-client compatibility.

2. Preserve Media Queries

If your newsletter template is responsive and contains @media queries for various devices, you can preserve the media queries in the head section and prevent them from being applied as inline styles as well with the use of a style tag and data-premailer="ignore" attribute on it.

Here is an example of how to do it:

 

How to Create & Save a Newsletter Template

When you first create a template, give it a title that represents a short description of it by filling the “Enter template title here” field. The name should be no more than 150 characters. Examples of names can be ‘Misty Blue’, ‘Dark Red’, ‘Monthly Newsletter’, ‘Weekly Newsletter’, etc.

Themes need to be in HTML and there are three ways to add the code to the theme. You can choose to 1. Upload an HTML File, use the 2. Visual Editor – HTML Code, or use the 3. Drag & Drop Builder. The Visual Editor and the Drag & Drop Builder both convert your visual content to HTML on their own.

 

1. Upload an HTML File

Some settings are permanent and are retained after saving while others are once-off, meaning their function is to run once to accomplish what they are intended to accomplish. The once-off options require re-importing an HTML file to re-run them.

 

1. Choose HTML File

Uploading an HTML file works in exactly the same way as you would upload a picture or any other file in the WordPress editor. Click the Browse button, select the file from your computer and press ‘Open/Ok’ in the selection window. The file will be automatically uploaded for you.

2. Include WordPress Theme Stylesheet

Selecting this option will include your WordPress theme’s stylesheet in the HTML of your template, ensuring consistency in your template’s appearance.

3. Shortcode Link Color

Control the color of the links generated by shortcodes.

4. Image Prepend URL

Prepend the SRC attribute of IMG tags with a URL. If your template has relative image paths in the source, this image prepend URL setting is very useful to automatically add an absolute URL to the source attribute of all images. E.g., src="images/myimage.jpg" and you fill in a prepend URL of https://example.com/, it will become src="https://example.com/images/myimage.jpg"

5. Inline Styles

Set this setting to “Yes” to automatically convert all CSS rules into inline, style attributes in the HTML elements.

The purpose of inline styles is cross-client compatibility. Some email/webmail clients do not support style tags and requires inline CSS to display the email properly.

 

When you are done, click the Save Template button to save any changes or updates.

 

2. Visual Editor – HTML Code

By choosing the this option, you can create a template in the visual editor or by adding HTML code by clicking the source button:

Visual Editor:

HTML source code:

When you are done, click the Save Template button to save any changes or updates.

 

3. Drag & Drop Builder

You can also create and edit any theme/template with the Drag & Drop Builder. You can even upload an HTML file, as seen above, and then edit it in the builder. To read its documentation, please view the Drag & Drop Builder help page.

When you are done, click the Save Template button to save any changes or updates.