How to Create a Great Email in a Drag-and-Drop Email Editor

Email marketing is a proven tool for building long-term relationships with subscribers and customers. It allows to reach people at the place most visit very often – their Inbox.

To get recipients looking forward to your emails, you need to deliver value through your messages first. People will open them not because you have fancy subject lines but because they expect to find there something for them. It doesn't mean though that design doesn't matter.

A good book deserves a good cover. A clear functional email is what makes your offers look appealing and professional, building you a reputation of a worth sender. And modern no-code HTML editors let marketers create such templates without coding knowledge. 

Below, I'll speak about how you can use our editor to create emails but the general principles are applicable to any drag-n-drop editor. 

Basic Functionality of a Drag-and-Drop Editor 

Create an HTML Template

A drag-n-drop email editor/builder is a module editor. You can build a template using reday-made blocks - image, text, CTA, social media icons, etc. - by simply dragging them to the template and editing.

In our system, the editor has a side panel with structure and block settings (1), sender info that unrolls upon clicking (2) and top panel with technical tools (3). When you edit images and texts, an image editor and text toolbar appear additionally.

If you're good at HTML code, you can work in a code editor. For convenience, it has earch, syntax highlighting and tags auto close. You can code an entire template or separate blocks only.

In our template library, we have 570+ ready HTML templates. You can choose any and optimize based on your corporate style and particular campaign tasks. You can also import a template from other sources. 

Optimize for Mobile

To make the layout look as intended on both desktop and mobile, you need to create a responsive email template. Responsiveness is a feauture that adjusts the email elements to the width of the gadget screen, making it look clean and professional. 

In our system, responsiveness is enabled by default and is applied to the entire template. You can disable it if needed (for example, when creating a table). In this case, make sure you test the display on all devices. 

Preview

When your template is ready, you can check whether it will look properly on desktop and mobile by clicking View message.

Test

To test the message before launch, click Test and enter your email address. Open your emails on different devices and in various clients to ensure it's displayed as intended everywhere. You can send tests to several addresses at a time.

Apply Extra Features

Apart from editing functionality, our editor has numerous additional features. They can help improve the marketing performance of your emails, making them personalized and customer-oriented.

• Multilanguage. Create emails in different language versions within one template. 
• Dynamic content. Using Vecolity code, add dynamic variables that will be substituted by the contact's personal info at the moment of the email launch.
• Gmail Promotions Annotations. Highlight your promotional emails in the Gmail Promotions tab, etc.  

For more technical details on email creation, see How to Create an Email.  

How to Create an Email Template

The topic is rather extensive and requires more than one article. I'll give quick tips on most common email elements and provide links to detailed instructions. You can also check the guide on content and design trends for inspiration and email examples.  

In general, your email consists of different elements depending on its purpose. Typically they include a header, banner, images, copy, call-to-action buttons and footer. Additionally, there may be videos, animation and all kinds of spacers. Let's see how to manage each of these elements.    

Header

A header usually consists of a preheder, menu, logo and view in browser link.

A preheader is the text that appears in the Inbox line after the subject line and on top of the email. It complements the subject and summarizes the content inside. The preheader shouldn't be long otherwise it may be distorted, especially when displayed on mobiles.

It's better to separate an Inbox preheader from the rest of the copy. This way, it doesn't look messy and is easier to scan and digest. The ideal height of the preheader block in the template is 50-65 pixels.

For full guidelines, see How to Create a Good Email Header [ + Best Header Design to Learn From].

Banner

A banner is a big image that comes first under the header. Its size can vary: the width is limited to the template size, and the length can be any. The most common use is 640x480 pixels.

You can create a banner straight in the editor without using extra graphic tools. Just upload the image or select one from the system library, click Edit and resize it, crop, add text or other elements, etc.

Copy

A copy is any piece of the text that helps navigate through the email. You can write long copies if you do have much to say. For regular promos though 3 to 5 sentences are enough. Just highlight the message of the email and avoid long speculations.

• Set the text block for 500-600 pixels high.
• Stick to about 75 characters in one line.
• Draw visual difference between different copy pieces with color and fonts. You can add custom fonts from Google Fonts or other sources. However note that not all email clients support custom fonts and can replace them with standard fonts.   
• Use short and clear words.
• Use white space between lines and paragraphs. 

CTA

A call to action is an element (button, symbol, link, image) that prompts the user to take a desired action - visit the site, continue shopping, read the article, register for the event, etc. A CTA block space isn't limited but it's better to use around 3 words. Which to choose depends on the copy purpose.

• Use short active verbs to clearly explain what the user needs to do: buy, subscribe, get, join, visit.
• Describe the benefits that the taken action will bring: learn, find more, improve, send smiles. 
• Use urgent words to speed up the decision-making process: now, today, last, limited.

For full guidelines, see How to Create a CTA for an Email.

Images

Images are a wide concept that covers different types of visuals you can embed in emails: 

• Photos;
• Product images;
• Logo;
• Icons;
• Animated illustrations;
• Drawings;
• Charts with statistics;
• Infographics, etc.

In our editor, you can add the image by inserting the link or downloading any image from the computer (PNG, JPG, GIF, no more than 2 MB). You can also use the system bank – the collection of free high-quality images with a convenient search by topics. You can save any image in your gallery and use in further campaigns.

Once you've selected a suitable image, edit it in the built-in editor. The picture can be cropped, resized, applied with text and filters, etc. 

You can use images to create a rollover. When a user hovers over an image with a rollover effect, it’s replaced with an alternative one. With this feature, you can display the product from different angles, emphasize its benefits, etc. Moreover, a rollover effect can be applied to banners and CTA as well.

Additionally, you can create an AMP carousel and accordion.

These features can help deliver more information about the product or service, both text and visual, saving the copy space or hiding the information a user may not need at the moment.

Note. To start sending AMP emails, you first need to register with Google as a dynamic sender.

For full guidelines, see How to Embed Images in an Email.

Video

Videos help make your emails more dynamic. They also substitute big volumes of text and can be really useful for onboarding emails with instructions. Instead of writing long paragraphs you can add one minute video and it will do the job.

The process of adding a video to your emails is rather easy:

• Drag a video block to your template, and add the link (1). The alt text and title would upload automatically (2).
• Select the color for the Play button (3).

This is it. The video has been inserted to the email. Note that it will open in a new tab and not in the email itself. 

Product Recommendations

Product recommendations is a block with cards that features recommended items. The typical grid is a 3-column row but you can opt for other grids. Note that in this case their layout on devices with a small screen can be distorted. 

Most email recommendations are bulk, but in our system, you can personalize them and tailor to each person. Select the necessary algorithm and it will fill the block with items picked based on the site browsing history.

For full guidelines, see How to Set Up Product Recommendations for Email. 

Footer

A footer is a block at the bottom of the email. It typically contains company contacts, social media icons, privacy policy link and unsubscribe link. 

• A footer structure should be clear and easy to navigate.
• All links, especially the unsubscribe link, should be visible and easy to spot. 
• They should lead to the corresponding pages.

For full guidelines, see How to Create an Email Footer. 

Emails are a great way to communicate with your customers. Well-designed templates make this communication pleasant for them and successful for you. A drag-and-drop editor enables to create all kinds of email campaigns easily without code knowledge.

Pick a template, edit it in your corporate style and add useful content. Before hitting the send button, send test messages and open them on different devices to check the layout. This is it. You're officially doing email marketing.