Email Builder for HTML Emails – New Drag and Drop Feature

Drag-and-Drop is our middle name here at Agile CRM. From our marketing automation workflow to our landing page builder, we’re dedicated to making your sales and marketing tools easy to use, so you can get back to business.

With that in mind, we’re especially excited to announce that a new drag-and-drop email builder is now live in the app!

Email marketing has always been a seamless process in Agile CRM. Previous versions of the email builder had some elements of drag-and-drop, and we used your feedback to help create the new version, which includes new templates, email design blocks and an even more streamlined process for previewing and testing emails before sending them out into the world. Let’s take a look at how to use the new email templates and create custom templates with design blocks.

To launch the email builder, go to Preferences > Email Templates from the main user drop-down menu.

All the email templates created or saved by you and your team (other users on your Agile CRM account) will be listed here. Just click on a template’s name to open it up in the email designer, or click on + New on the upper right to create or modify a new template.

You always have three options with email templates:

1) Select a Predefined Template

We have made a bunch of predefined templates available which can help to build your own template faster. They’re entirely free with your Agile CRM account and you can modify them however you’d like. Just choose the template and click Go. You will be navigated to the email builder, where you can modify the template.

2) Bring Your Own Template

You can bring your own existing template, too. Click on Bring your code and a popup will appear where you can paste your HTML code. Your template is copied and now all available for use in Agile CRM.

3) Create a New Template

You can create your own email templates too. To create a new email template from scratch, click Custom and use the drag-and-drop email designer to create a new template. You’ll be able to save the template for future use.

Getting Started with Email Design Blocks

On the lefthand side of the new builder, you’ll find a selection of drag-and-drop design blocks. To use these HTML blocks, just drag them into the middle section (email editor). Click on the block and you’ll see a popup that lets you set relevant properties such as font, height or padding.

These are the currently available design blocks:

1. Title Block: Adds a title and subtitle to the template.
2. Divider: Adds a line divider.
3. Text: Adds a text block.
4. Image: Adds an image to the template. Please make sure you add the image as per the specifications mentioned.
5. Button: Adds a button.
6. Image + Text: Adds an image with wrap text.
7. 2 Column Image + Text: Adds a 2 column image with text and button below the image.
8. 3 Column Image + Text: Adds a 3 column image with text and button below the image.
9. 2 Column Text: Adds 2 columns of text with a button below the text.
10. 3 Column Text: Adds 3 columns of text with a button below the text.
11. Social Links: Adds social media links such as Facebook, Twitter, Pinterest or LinkedIn.

Previewing and Testing Emails

Click on the Preview button to preview how the email will look on different devices such as mobile phones or tablets. Select smartphone, tablet or ipad to see how the template will look on that type of device.

Click on the Send Test button and an email will be sent to the logged-in user’s email id. This provides a way to view the designed email template in an email client like Yahoo or Gmail (based on the registered email id) to make sure everything looks the way it should.

Hint: Sometimes you’ll want to create a variety of modifications of the same original email template. If you’d like to save a copy of the email template, just click on Copy button and a copy of the existing email template will be created. Provide a unique name for the copy of the template and save it for future use.

Agile CRM is a complete sales and marketing email solution. Comments or suggestions? Leave a comment here on the blog or shoot us an email at care@agilecrm.com.