Email Marketing Editor – General Settings

See how to use and navigate the email campaign editor to create or adjust the content of your first email campaign.

 

In this article, you'll learn:

• How to edit the ready-to-use email templates
• How to start creating an email from scratch
• Understand the template layout
• How to use the email editor
• Appearance section 
• Content Menu section
• How to use the editing area
• How to work with Text 
• How to add/remove hyperlinks to Text
• How to add images
• How to set background color & image
• How to build the email footer
• How to preview the email & how to send it

 

Edit ready-to-use email templates

 

This is the easiest and probably the most convenient way of building emails. You only need to choose the template you like, customize it so that it fits your brand design best, insert your URLs, and replace our images with yours. That’s it. Your email is ready!

 

Start from scratch

 

The option means that you will need to drag and drop structures into your template, then fill them in with content blocks or modules.

 

 

Understand the template layout

 

The structure of our mailing editor is based on the HTML table layout. The core elements of the email are stripes that may contain an unlimited number of structures. You can set the desired number and type of stripes here:

Containers can include an unlimited number of blocks when placed one above the other. However, you need different containers to place blocks to the right and left positions of each other. 

 

You can drag and drop blocks/structures/modules from the settings panel to the editor area.

 

You can select various email elements by clicking the left mouse button. By click, the menu, and settings available for the selected element will open in the settings panel.

 

With the drop-down menu, you can delete, move and copy email elements or save them as modules.

 

You can navigate between the email elements selecting the needed elements with the mouse. In this case, the selection priority belongs to the lowest level element.

 

For example, by clicking the block in the container placed in a structure that is, in turn, located in the stripe you will proceed to the block settings menu.

 

 

Use the email editor

 

By clicking on any email or template in your account, you will enter the edit mode. The entire editor in editing mode is divided into 2 parts: Appearance & Content. 

 

Appearance

 

This part contains almost all the functionality of the embedded settings for editing emails. In the Appearance menu, you can get access to the following settings:

 

General Settings

 

In General Settings, you can set up an Email width, which is 600px by default. You can set any size between 320 and 900px. 

 

Set up Default padding, which will be used by default for all new structures added to email from the Content tab or while adding new Stripes (rows).

 

You can pick the basic Font, its size and Font color for all next text blocks.

 

In addition, you can set Link color in the email (turn the Underline links on or off),  and default Line spacing for all text elements of the email. 

 

 

Headings

 

In this menu tab, you can set the default Font, its size, color, boldness and italics for the headers H1, H2, H3. To set some text as “Heading”, you need to highlight this text a pick the Heading type.

 

Stripes

 

To define Stripe (row) as a Header, Content, Footer, or Info Stripe you should click on it and set its value in the Settings Panel.  In these menu tabs, you can set up any setting that will be applied to each Stripe (row) respectively.

 

Here you can set Text size, Stripe background color and Content background color, Font color, Link color, pick the Stripe (row) Background image.

 

In this menu, you have the ability to turn on the Highlight hovered buttons, which are disabled by default when creating new emails. The Button menu allows you to set some parameters that will be used for all buttons in the email by default.

 

Here you can set Button color, Highlighted button color, font color, Text style and size, the thickness and italics parameters, and also set Border radius (the default setting is 30px).

 

 Support of Outlook button allows improving buttons displaying in Outlook, by inserting a special VML-code element. 

 

Moreover, in this section of the menu, you can set Borders and their colors. You can set them individually for each side or all sides at once.

 

You also have the ability to change the color of the button’s Border and turn on Highlighted border color.

 

In addition, in this menu, you can set the Internal padding for buttons, independently for each side.

Mobile Formatting

 

Here you can control how your email will look like on mobile devices. You can set Size of Header text, Size of the Content text, Size of Footer text, Size of Info area text, the Text size of the items for the «Menu» block, Text size for headers H1, H2, H3, set Horizontal alignment and Email Content Margin for them.

 

You can also set the text size for the buttons to be the full width of the mobile device. 

Content menu

 

In the Content menu, you can get added to your email Structures, Blocks, and Modules - the main elements of the email or template. 

 

To create such a "skeleton" of the template, you need to drag a Structure that needed numbers of Containers and then just fill them with content Blocks or Modules. 

 

Structures

 

You can pick a Structure, that contains 1, 2, 3 or 4 Containers from the sub-menu Structures.

 

Blocks

 

Currently, there are 8 basic Blocks, including HTML block that allows you to embed custom code and custom email elements.

 

 

For example, Image basic block:

 

This block can be used for adding images in PNG, JPG or GIF formats with maximum size of 3Mb. You can add a picture from your desktop by dragging it or paste a link to an external source. 

 

Modules 

 

The Modules menu contains previously saved Modules, that you can reuse and add into your email. You can also add your favorite Stripes, Structures, and Containers into menu Modules to be reused later. In addition to this, you can use our pre-made Modules by dragging them into your email.

 

 

AI Writing Support

 

You can enhance your writing with AI-powered suggestions to adjust your messages with different tones and styles. AI Writing Support is designed to help you deliver high-quality, well-composed text faster. With the power of AI, Writing Support AI can generate good-looking paragraphs. You can let AI write the email content for you, ask it to translate the message, change the tone, fix grammar and more!

 

 

Editing area

 

This area takes the major part of the screen in edit mode.

 

It’s the area for editing emails and templates. You can drag blocks/structures/modules into it from The Settings Panel. Here you can set the required number of Stripes and their type.

 

 Using the drop-down menus, you can delete, move, copy, or save any email elements as modules. 

 

You can select any element by clicking on it. After selecting, you will see settings for this particular in The Settings Panel (see the list of available settings for various elements above).

 

Each Structure can contain from 1 to 4 containers.

 

Containers can contain an unlimited number of other elements when you place it one under another, but if you want to place an element on the right or left, you would need to use different containers.  

Work with text 

 

To add a text into your email:

• drop the 1-column structure into your HTML email template
• pull a “Text” block into it, or click the “text” button right in this structure

 

• enter your text and double click the very text
• set headings where necessary
• enter your text in the next line
• highlight it
• set alignments

 

• add links where necessary

 

Add links to the text

 

If you need to add links to text, but not only to Call-to-action buttons, you need to:

• highlight a necessary word/words
• in the setting panel on top, click the “Link” icon
• in the settings panel on the left/right, the system will ask you to paste your URL and once again will remind you what word the link is connected with

 

 

You may or may not underline links in emails — do as you like.

 

Add/remove hyperlinks

 

To add a link to text, highlight the necessary text and click the Link icon in the settings panel.

 

 

Then, in the settings panel select the link type (protocol) that fits best and insert its data.

 

To remove the text link, just click the text and then click the same link icon again.

Add images

Imagery is the basis of all emails. No matter how compelling your copy is, there definitely should be images as they appeal to emotions by showing our products at their best.

 

How to add an image in emails:

• pull a new structure with a necessary number of columns into your HTML email template
• in the settings panel, find the basic “Banner”/“Image” block and drop it into the template
• once you drop the content block in, click on it right in the email;
• in the settings panel, you will be asked to insert an image

 

There are four ways of doing it:

 

• Dropping/uploading image

Here, you can really just drag and drop the image you are about to use for your campaign or upload it from your computer by clicking the “arrow” and selecting the very image from your computer.

 

• Pasting external URL

If you do not have the banner image saved to your computer, you are welcome to insert links to this image on the web. In the “External link” field, paste the link to your image.

If you are going to use this image just once, in the dropdown menu, choose the “Leave as external link” option (as shown in the example above) and click the “Tick”.

 

If you are going to use this image for other email campaigns, then click the “Project” tab above, then insert the link and choose the “Download to the gallery” option, and click the “Tick”.

 

 

• Using images from the personal gallery

When you upload images or download them to the gallery as shown in the example above, your images are stored in your personal gallery. You just need to switch to the Email tab.

 

Images here are sorted by the dates, the most recent → the oldest ones. If the list of images is too long, you may search by its name. To use one in your current HTML email template, you need to click on the selected image and it will automatically appear in your email.

 

Using the bank of images

 

First of all,  all the images, available in our mailing editor, are totally free. Second of all, we offer over 100,000 images. Click the “stock” tab, then enter the name or the category of images you are searching for.

 

Once you’ve selected an image and clicked on it, it will immediately appear in the template you are working with. This way, you may check if it fits in your email. If you like what you see, then click the “use” button.

 

 

Editing images

 

In the previous paragraph, we showed how to upload images and store them. But how can you edit them inside the mailing editor?

• once you’ve uploaded the image, in the settings panel, to the right from the image snippet, click the “edit” button

 

• in a new pop-up window, your image will be opened with the Pixie editor
• here, you can apply filters, resize and crop images, draw over them, put any text over them, add stickers, frames, apply backgrounds
• when you’ve done with editing, click “save” in the Pixie editor — only then the changes you’ve made to the image will be applied

 

Background color and image

 

Backgrounds applied to individual containers/stripes (aka rows) help you drag recipients' attention to certain elements. Backgrounds applied to entire emails make your design look complete and unified.

 

How to set up a background color to a structure

•  click any element in this structure in the template; 
•  on the left in the settings panel, click the “to container” button; 
•  click the “to structure” button; 
•  in the “background color of structure” field, enter or select the color you like. 

 

 

Note: you can do it the same way to set the background color for the entire email.

 

 How to set a background image for the entire email: 

 

The background image will be shown on desktop devices only. It won’t be displayed on mobiles.

•  in the General settings tab, toggle the “Background image” button; 
•  add an image — in the “Adding Images” section, we described how to insert/add/upload images to templates with Stripo; 
•  set its position; 
•  click the “repeat” button if you want your image to be applied to entire email no matter how long it is. 

 

Some email clients, like Outlook, may not show the background image. Hence, we recommend also setting the background color, that is similar to the background image, to the entire email.

 

Build email footer

 

Email footer normally contains contact information, like your website address, the reason why you’ve reached out to recipients, links to your social media accounts hidden behind the social media icons, the unsubscribe link and name of the person who is responsible for the newsletter email. The latter is optional, yet all the elements that precede it, are mandatory. 

 

 

How to build email footer

 

This is a compound element of emails. To build one, you need to:

•  drag a structure with a necessary quantity of columns; 
•  enter copy into these columns/blocks; 
•  edit copy; 
•  insert the respective link to the unsubscribe option; 
•  add social media icons. 

 

Send the campaign

 

Before you decide to send the campaign out, always preview it to check how it'll look on your customers' devices.

 

How to preview your email

• In the bottom right corner, you'll find a menu bar
• Click 'Email preview' icon:

 

 

Bottom menu bar

• You will be taken to the preview screen where you can check and revise your email:

 

Send your campaign

 

Once you revised (and corrected is necessary) your email, you can move on to testing and sending it:

• Click 'Next step' on the top bar menu:

 

• You can send a test campaign to selected email addresses if you wish to see how the campaign will look before it is sent to the recipients 
• Click 'Send now' to send the emails to the recipient's list: