How to create your own template

There are 4 ways to create an email-template in SendPulse email-service:

Use an existing template
Design a template using the built-in HTML-editor (requires expertise in HTML)
Create a new template with the built-in drag-and-drop editor ("layout template editor")
Import the template from a file, using a web link or by inserting a ready-made HTML code

With SendPulse you can easily create emails with the help of the drag-and-drop editor.

Its main advantages are:

You can add the necessary block or element just by dragging and dropping it
You can easily edit each element (change color, style, size and so on)
You don’t need special knowledge to work with the editor

Go to the tab Email templates-Add a template

The service has several options for creating email messages.

In this example, we will be using the drag-and-drop editor.

Select the template base structure

Visualise an email that you want to send to your recipients and pick a template layout.

In this example, we will talk about the "News" template layout.

Open the drag-and-drop layout editor.

In the editor, the left-hand side panel contains elements that can be added to the template and the middle part represents the initial template that you will edit by adding and changing elements.

We recommend working your way from larger parts of the template to smaller ones — first add blocks and elements to the email body, then add and edit smaller elements that will be on the top of all layers.
This way you will create a structure of the email template and then you will be able to add elements from the left-hand side panel (text, button, image and so on).

It is better to create a separate structure block for each element of the template.

Design for the email generally, is set up in the right-hand side panel called "Email body" — here you can edit the general Email background and contour, the color of all links, font and its size and color, line height, email width etc.

The editor has 6 groups of elements:

Text element
Picture
Button
Separator
Video
Social networks

1. Text element

Choose the “Text” block and drag it to the template.

As a result, you will see text in the block and options for its editing on the right panel.

All changes of the text blocks are made in the editor and you will see how the template changes in real time.

These are parameters that can be adjusted in the editor:

font and its color
line height
background color
inner padding
block height
contour

Besides that, the visual editor allows adding hyperlinks, bullet- or numbered list, inserting variables, anchors and so on.

*Note that adjustment of the inner padding in the template element will cause automatic changes in the email body.

Pre-set variables are available in the drop-down menu of the "Variables" block.

If you need to use variables available for a specific mailing list, then edit the template while creating a new email campaign using the Email-Create a campaign menu.
This way you will link a specific mailing list with its own variables to the template.

Insert Variables using the text editor (use the "Variables” tab on the dropdown list)

Important! If you need to add text using the copy-paste method, copy it from a simple text file (.txt).

Otherwise, original text formats can be copied with the text itself and that, most likely, will affect your template layout.

Copy the text from the original file, paste it into a simple text file and then copy the text from the text file and only then paste it into your template.
This way you will only transfer the clean text without the source styles or formatting and you will be able to adjust those parameters in the built-in editor: set the paragraph style, font, and its size, bold or italics, adjust text color, add lists and padding.

Click the downward arrow to the right of the variables button to open the drop-down menu. This menu offers more options for editing the textual block:

Let's change the font size and style, add a background color for the block, contour and inner padding:

Like any block of the template, this one can be copied

deleted

or moved to a different spot of the template.

*This is how you can save a template block:

Click on the block and hit Save this block

Name the block and click Save

Saved blocks are stored in Add new section-Saved elements menu of the template editor

"Preheader" structure

Preheader is text subscribers see right after the email subject

Pick this element in the template builder using Add new section-Examples menu, drag and drop it into the template and place at the top of the email you are building

Usually, the preheader consists of 2 elements in 2 columns:

preheader itself
web version of the email — web version link can be added in the "Variables" menu, as you click on the preheader in the template.

Click on the preheader with the left mouse button to start editing the element.

Footer element

Footer is located in the very bottom of the email. Usually, it contains company contact details and sometimes subscription details.

Add the footer into the template, change its text and set up the parameters of this element.

You can choose whether it will be solid or will be split into 2 columns.
Like with other elements, you can edit the footer text and set up its background color.

Pay attention at the {{ec_es_email_sender_company}} variable in the footer — company name will be taken from your SendPulse account settings.
Edit this value in Account settings-Company information-Company

Unsubscribe link

Each email sent via SendPulse email service must include an unsubscribe link — if the user doesn't add it, the service will do that automatically.

Here is how you can add your own unsubscribe link.

“Click here to leave the mailing list" element is located in the Variables drop-down menu.
You can insert an unsubscribe link into any block of the template.

Important! If you want to use your own unsubscribe link, set it up in Email-Service settings-Unsubscribe pages menu

Read this article to find out more details on how to customize unsubscription.

You can edit such features of this block:

color (of the block and of the text)
font (style, size)
text positioning (right-, left- and central alignment)
inner padding
lines height

2. Images

Picture element

Drag and drop a picture element into your template

There are 2 ways to add an image to the template:

upload from the computer
select an image you had used in the service earlier

After you have added a picture element into the template, click "Upload from disc" button in the center of the image block.
In the right-hand side panel you will see the images you had previously used in the service.
At the same time, you will be able to pick an image from your local files using the "Upload" button.

Previously uploaded images are stored in the Image manager: you can find it in Email-Email templates menu

Upload an image and it will appear in the template.

You can change such parameters of the image:

1. Alternative text

Sometimes email apps don't display images inside the incoming emails. When there is no alternative text for the image, the recipient will see the file name, which most often will puzzle the reader and will cause suspicion of antispam filters.

This is why it is strongly recommended using the alternative text option in your templates.

2. Image width

Each image added into the template is displayed in 100% size, but you can reduce it down to 10%

3. Alignment

4. Inner padding

5. Background color

6. Contour

7. Add a link

Use this option to add a hyperlink, an anchor, a phone number or an email address link to the image

Anchors are used to move the reader to a specific spot of the text in the email after they click on the anchored link. Place the cursor on the spot in the textual part of the email you need to anchor.

*Be sure to expand the textual menu so that the anchor button is visible, click on the anchor button — a small anchor image will appear there

Now name the anchor (using Latin characters) to identify it on the next step

Then get back to the image and add the anchor link: Add a link-Anchor

Pick the anchor in the drop-down menu

If you link a phone number this way, the recipient will click on the image and their default telephone app will start to make a call to the linked phone number.

If you link an email address, don't forget to add the email subject — when the recipient clicks on such an image, their default email application will start

And the email subject will auto-populate accordingly

Important! Always insert a complete link address starting with http:// or https://

Mind that alterations of the image sizes will affect the whole block and the template — that is why it is recommended to resize images BEFORE inserting them into the template.

3. Button

Drag and drop a button.

The button block consists of a button and its text.

First add a link the button click will lead to, then add the text your recipients will see on the button. You can edit style, width, height, color of the button, align it, round the corners and adjust the positioning of the text on the button. The button can open a link, start a phonecall, or send an email (don't miss the email subject box)

Users can set the background color and change the inner padding of the button.

4. Separator

Use this element to visually separate blocks of the email template.

There are 2 modes of the separator: spacer and divider.

If you go with the Spacer, you will be able to set its color and thus template blocks will be separated by a color block:

If you want to have blocks separated by a line, go with the Divider and pick the line style in the drop-down menu

5. Video block

Drag&drop a video block and add a youtube link in such a format: https://youtu.be/GcaZtTDT65w

A preview will appear in the template — recipients will be forwarded to the video as they click on this preview

You can adjust the location of the preview and its size, set the background color and inner padding.

6. Social media block

Users can pick styles of the social media icons, add or delete them, add links to the buttons and so on. You can insert only icons or only the text or both