How to Create and Add Custom Templates

One of the best features of Fluttermail is the ability to create eye-catching e-mail templates, whether you want to use one of our ready-made options or if you're comfortable making your own custom template.



As shown, FlutterMail offers some templates to download on our website and you can also design and create email templates directly within our software.

However, you may decide to design your own HTML template using a different HTML editing program, or you may already have an HTML email template that a web designer created for you. You can easily use your own, pre-existing HTML templates within FlutterMail. To do this, first create a new template by going to the Campaigns tab and clicking “Email Templates” on the right. Once you are on the Templates page, click “Add.”



The next step will allow you to type in a name for the template, and choose which lists you would like the template to be available for.

The Template Name field can be anything you want. This is the name you will see when you are choosing which template you would like to use when composing a message, or any time you are referencing the template later on.

Beneath these options, you will see a large text box where you can begin composing your template. You will notice there are two tabs at the top of the text box, one saying “Visual Editor,” and the other saying “Code Editor.” Click the tab that says “Code Editor.”



This is the area in which you can enter in your own pre-existing HTML code. Be sure to first remove any “default” HTML code that is already present in the Code Editor view, and completely replace it with your own pre-existing HTML code.

After you copy and paste in your HTML code, you can easily click the Visual Editor tab again to see a preview of the template, and you will also be able to make quick changes to the template easily, using the pre-existing options that are included with the Visual Editor.

NOTE: When editing a template using the Visual Editor, some colors, font sizes, or other styles may not appear correctly. This is because the Visual Editor has its own CSS style sheet that it employs during the editing process, which may override some of the styles in your own HTML code. However, these changes are temporary, and only appear during the editing process. Previewing the message by sending a test message to yourself will show you how the message will actually appear when it is sent.

Once you have named the template, chosen the list options, and pasted in your HTML code and made any necessary modifications, you can click the button that says “Add” on the bottom of the page to save the template. You can easily make changes later on by returning to the main Templates page, and clicking the link that says “Edit” next to your template.
 

I’ve pasted my HTML code, but my images aren’t showing up

This is a common problem that occurs when the images in your template have not yet been uploaded to a server online, or the links to the images in your HTML code are “local” image links that cannot be found. It is an easy problem to fix.

After you paste your HTML code in to the Code Editor, click the Visual Editor tab again (if you have not already done so) so that you can see what your template looks like. You will likely see red X's, or broken image icons where each of your images are supposed to appear. Simply right-click one of your broken images, and choose the option that says Insert/Edit Image
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us