How to Create an HTML Email in Less Than 2 Minutes

Want to send a beautifully formatted, dynamic email? One with background colors, photos, and bulletproof buttons? Then you’ll need to create an HTML email! And it doesn’t have to be hard. In fact, you can build one in less than 2 minutes with an HTML email template or from scratch using a drag-and-drop editor—no coding required. Today we’ll show you how. Keep reading!

First, what is an HTML email?

HTML emails can contain images, graphics, and colors that are formatted to look lovely in your inbox. Nearly all of the emails you receive from brands (i.e., the ones that aren’t from your mom) are HTML emails. HTML stands for hypertext markup language, and these emails are commonly considered the opposite of plain text emails because they have design elements we’re used to seeing in promotional emails and newsletters.

A great HTML email is:

• Fully responsive across devices (phone, iPad, laptop screen, etc.)
• Supported by major email clients and applications (Gmail, Apple Mail, Outlook, Yahoo!, etc.)
• Well designed and eye-catching (with art, borders, buttons, etc.)

Ready to build one in minutes? Read on for our quick and easy HTML email tutorial.

---

Create an HTML email in minutes

Want to build an HTML email? You have a few options. If you’re a coding pro, you can build one line by line. But you don’t have to code to create a stunning, sophisticated HTML email. You can use an email editor like BEE to customize an HTML template or build an HTML email from scratch using the drag-and-drop tool.

In other words, any email you build in BEE, whether it’s from a template or from scratch, will be an HTML email that’s mobile responsive, compatible with major email clients, and beautiful!

Here’s how!

Option 1: Start with a BEE HTML template

Go to beefree.io/templates to scan through more than 200 professional HTML templates to get started. You don’t need to register or log in to use the editor, and all the templates are free. (Check the “free” filter in the navigation bar). You can filter by industry, purpose/occasion, or search by tag to find the template that’s perfect for you—from newsletter templates to event promotion templates. Or of course you can just scroll and browse.

Whichever HTML template you select – whether simple or more ornate – you can completely customize it. Add your own text and images; change the fonts and font sizes; update the CTA button color and size, and more.

Here are some resources for customizing your template:

• Transform a BEE template into a perfectly on-brand customer email
• Choose the best template for your email in minutes
• How to use the BEE templates for Gmail add-on to create HTML templates right inside your Gmail account

Option 2: Build an HTML email from scratch in BEE

Want to start creating from scratch? We can do that too! Let’s say we want to build a stunning, simple HTML email like this one we recently received from the print company MOO—

It’s engaging, mysterious, and super fun to look at. Plus, the basic structure—opener text, CTA, image—is one that can be used for almost any kind of email. And check out the GIF!

We’ll start by going to beefree.io (or pro.beefree.io for the pro users) and selecting Start from Scratch.

Then with our lovely blank canvas, we can begin building. Let’s first drag in placeholders for our content. The main body of the email has a layout that flows from image (logo) to header text to CTA button to image (that great animated GIF). We’ll pull in those elements from the Content menu on the right, so our structure looks like this:

Next we’ll drop in our images and update the text—including on our CTA button.

We need a background color! Use an HTML color code matcher like this one to get just the right hue (it’s how we seamlessly arrange HTML background colors alongside images). Paste in your color code (or select the shade you want to use) in the Settings menu.

Lastly, we’ll adjust the font (choosing the email-friendly Trebuchet), adjust the padding around images a bit, link our CTA button and images, and that’s it! Our email is ready to roll.

Now that we’re ready to send, we can simply click the Save button in the upper right corner, then download the HTML email.

Your downloaded message will contain a zipped file with the HTML and images, which you can import to the email client of your choosing.

Here’s a look at the contents of the zip file—

And when we look at the email itself, here’s the HTML code behind what we built—

With BEE Pro, you can also save any email you create as a template that you can use time and again. That means BEE can basically be your go-to HTML email template builder, allowing you to save time and maintain design consistency across emails. And don’t forget our library of ready-made templates that can be customized with your brand visuals.Try a free BEE Pro trial and get designing right away!