Solutions

Constant Contact is a popular email service provider, and for good reason: It’s a powerful tool that can be used to automate and send your emails. And now, you can create stunning emails using the BEE editor and then export them to Constant Contact. Here’s your guide to how to integrate Constant Contact with your BEE account.https://www.youtube.com/watch?v=4xyuQrhzK88

Why Constant Contact?

Constant Contact is an email service provider that has several benefits for marketers. The platform makes it easy to send emails and track how they’re performing. And Constant Contact pricing is also affordable, with a basic plan starting at just $20 per month.The BEE email editor is another great tool for any business. Simple to use, BEE can help you create beautiful, personalized emails that are ready to go out to your list in a matter of minutes, helping you save time and win more conversions. Now, BEE has rolled out a Constant Contact connector so you can export your BEE emails into Constant Contact, and get the best of both worlds!Be aware that the Constant Contact connector is only available for BEE team and agency members — so if you have a free account with BEE, you’ll need to upgrade to take full advantage. Click here to start your free two-week trial (no credit card required). If your account is already good to go, let’s get into how to integrate Constant Contact with BEE.

How to Integrate Constant Contact: Method #1

There are two methods of connecting the Constant Contact service with BEE. Here’s method #1.

Step #1: Go to Settings

From your BEE dashboard, navigate to “Settings” and then click “Connectors.” Scroll through the list of options until you see Constant Contact. Click the purple “Connect” button next to the Constant Contact service.

Step #2: Log in to Constant Contact

When you click “Connect,” you’ll see a pop-up that asks you to connect your Constant Contact account. One of two things will happen next: You may see an additional pop-up that asks if you’ll allow the BEE Connector permission to read your account data (in which case, your Constant Contact account will connect automatically). If not, you’ll see a pop-up in which you have to manually type in your Constant Contact username and password. Either way, you’re in!

Pro tip: If you design emails for multiple clients, look into getting a BEE Pro Agency subscription. With this type of subscription, you can connect to multiple Constant Contact accounts and manage them separately, making it easy to switch between different accounts.

Method #2

There’s one more method you can use to jumpstart your Constant Contact export campaigns. Here’s how.

Step #1: Export message

If you’re working on an email inside the BEE editor, you’ll see a purple “Export message” button on the Message Details page when it’s done. Click that button and then choose “Export to another application” from the pop-up.

Step #2: Select a verified email

Choose Constant Contact from the list of options and, if you haven’t already logged in under Settings, follow the steps to log into your Constant Contact account. Next, choose one of the “Verified Emails” from your Constant Contact account. You can set that email as the “sender/reply email” for your campaign. (If you choose the wrong one, don’t worry — you can tweak this later from within Constant Contact.) And that’s it!

Wrap-Up: Constant Contact Integration

Now that your accounts are connected, you can create email templates within the BEE editor and then export those templates to Constant Contact, enjoying the benefits of both platforms as you send emails to your list. Sign up for a free trial of BEE Pro if you need it and start designing today!

Are you part of the more than 80,000 companies using Sendinblue email marketing worldwide? If so, we have good news: BEE recently rolled out a connector that will link your Sendinblue mailing list with BEE’s email templates. This Sendinblue tutorial will walk you through how to get the connector up and running. More good news: It should take you less than two minutes!https://www.youtube.com/watch?v=lGp2fk_6Edo

Why use Sendinblue with BEE?

Sendinblue is an email marketing automation software that has a lot of benefits for marketers. The platform’s workflow templates allow you to save time and build a strong email list; Sendinblue also offers smart scheduling tools and helps you analyze your email campaign statistics.Now you can connect Sendinblue with your BEE account just like you’d connect your Mailchimp or SendGrid accounts. This way, you can use BEE’s responsive email templates to create beautiful email newsletters, and then export those newsletters to Sendinblue to shoot them off from there.Here’s how to connect your Sendinblue and BEE Pro accounts:

Step-by-step guide: Connecting your accounts

You have two options for exporting templates to Sendinblue — either connect your accounts now so they’re ready to go the next time you design a BEE template, or wait and connect them when you're ready to send a template to your Sendinblue dashboard. To connect the two accounts before you begin designing, follow these steps:

Step #1: Create an API key in Sendinblue 

From your Sendinblue dashboard, click “SMTP & API” on the left-hand sidebar and your API keys will pop up. Copy the API v3 key.

Step #2: Connect

From inside your BEE Pro account, enter your settings and click on Connectors. You’ll see an option for Sendinblue. Click connect and paste your API key into the text box, and that’s it! You’ve connected your BEE account to Sendinblue.

Step-by-step guide: Exporting templates

If you have a single template you want to export to Sendinblue, here’s how:

Step #1: Export message

After you create a template, go to the message details page and click “Export message.” From the list of export options, select “Export to another application.”

Step #2: Connect

Choose Sendinblue from the list of connectors and follow the steps to connect. You’ll then be able to find the email on your Sendinblue dashboard.

Wrap-up: Send BEE emails with Sendinblue

If you don’t already have BEE Pro, get a free trial to use our drag-and-drop email design tools and customizable templates with your Sendinblue email marketing!

Email marketers, do you use Campaign Monitor to target audience segments and build customer journeys? You can now build Campaign Monitor custom templates with the BEE email editor. It's an amazing way to marry BEE's user-friendly design tools with the campaign management capabilities of Campaign Monitor. Read on to learn how to link your accounts and get the best of both worlds!https://www.youtube.com/watch?v=xn9l8CRUOQk

Why use Campaign Monitor and BEE together?

Campaign Monitor and BEE both have a lot of email marketing benefits. Campaign Monitor helps you optimize email campaigns by tracking email performance in real time, and it’s simple to automate your campaigns, too. When you pair Campaign Monitor with BEE’s drag-and-drop email editor, you can create beautiful emails in BEE and send them using Campaign Monitor’s email automation feature.Here’s a step-by-step guide to the simple process of connecting email marketing software Campaign Monitor with BEE Pro.

Step-by-step guide: Connecting Campaign Monitor with BEE

Connecting your accounts is quick and painless. Here’s how:

Step #1: Go to settings

From inside your BEE Pro account, click on “Settings” and then “Connectors.” You’ll see a list of several connector options with Campaign Monitor in the left column. Click the purple “Connect” button by Campaign Monitor’s name.

Step #2: Allow access

A window will pop up that prompts you to log in to your Campaign Monitor account. After you type in your email and password, you’ll be asked if you want to allow access; click “Allow” and your accounts will connect.

Exporting one template to Campaign Monitor

You also have the option to export a single template to your Campaign Monitor dashboard — here’s how.

Step #1: Create a template with the correct syntax

In order to send your BEE template to your Campaign Monitor account, your email template must have the <unsubscribe>Unsubscribe</unsubscribe> syntax. You can add this syntax in the BEE Pro editor by choosing a location where you want to have an unsubscribe link. Add a text block and click on “Merge Tags;” next, choose “Unsubscribe (Campaign Monitor)” from the list of options. (It’s important to make sure you add this syntax through “Insert Merge Tag” and not type it in yourself, or Campaign Monitor won’t accept the template.)

Step #2: Go to message details

After creating and saving an email template with the required syntax, go to the “Message Details” page and click the purple “Export Message” button. Choose the option to export to another application. Select Campaign Monitor from the available choices, and then log in and connect. That will export your BEE email template to your Campaign Monitor account.

Wrap-up: Campaign Monitor Custom Templates

If you have multiple customers or clients and they each have their own Campaign Monitor account, check out BEE’s Pro Agency account. This type of account supports multiple Campaign Monitor accounts and lets you have one for each brand. Happy designing!

Have you had your coffee today? Or, perhaps more importantly, have you sent out a marketing email today? In honor of International Coffee Day coming up on September 29th, we’re going to take an email from a coffee company and show you how to create your own email template in the BEE editor, making a top-notch brand email that your customers will want to read. Let’s get started!https://www.youtube.com/watch?v=buOlXJMgYC0

Coffee/food email inspiration: 

We loved this recent brand email from Peet’s Coffee, a popular coffee roaster and retailer based out of San Francisco. The email was advertising a sneak peek of the company’s upcoming holiday roasts:Subject line: 2 days left for 2 amazing coffees

The email has a high-quality photo and creates a sense of urgency by telling readers it’s their last chance to get free shipping. The template is simple, not cluttered, making it easy to understand the email and opt-in to the offer; the design of the email also evokes a holiday feel with tones of red and gold.Let’s jump into the BEE Pro editor and recreate this coffee email using a build-your-own email marketing template.

Tutorial: create your own email template in minutes

Step #1: Open a blank template

Go into BEE’s template library and select a blank template. With this email marketing template, you can build an email from the ground up to make sure it’s completely tailored for your brand. Grab a BEE Pro trial if you need it (two weeks free, no credit card needed) and you’re ready to start from scratch with this blank template.

Step #2: Add placeholders 

Next we’re going to drag-and-drop placeholders before we add the actual images and text. The first step here is to look under the “Rows” tab on the right, select “Empty” from the drop-down menu, and add seven total basic rows. Then we’re going to toggle back to the “Content” tab and add two image placeholders for the header and photo, three text placeholders to accommodate the three different fonts used in the body text, a CTA button, and one final text placeholder for the last line of text.

Step #3: Add photos and text

Now the email structure is all ready and we’re prepared to create the email template. First, add some images by searching BEE’s library of free images or uploading your own. Next it’s time to add the text; type in what you want to say and adjust the font, color, and size accordingly.

Finally, you can edit the CTA button text by typing right onto the button. On the right, we can further customize the button by adding the URL it will link to, plus adjusting the color and alignment of the button if desired.

Step #4: Save rows

BEE recently came out with a new feature, Save Rows, that can help you save time and stay on-brand as you create your own email template. When you click on a section, you’ll see a “Save” icon; it’s the button to the left of the trash can. If you click that button, you can type in a name and save that row for later, like we did here with the Peet’s Coffee header.

Next time you’re ready to create an email, you can go to the “Rows” tab on the right sidebar and click on the drop-down list. All of your previous designs will be under “My saved rows.” Instead of starting from scratch every time, Save Rows makes it possible for you to create your own email template that’s consistently in line with your branding. Your header and your footer are two important sections you’ll want to save, because although the rest of your email will vary, those two parts will usually always be the same.

Step #5: You’re done!

And that’s it — we just recreated Peet’s Coffee's holiday roast email! When you’re done creating an email template, just click “Save” in the upper right-hand corner of the editor and add the email to your template library. You can also preview your email on desktop and mobile, send a test email, or export to Gmail.

Wrap-up: Create your own email template

Now that you’ve seen how it works, it’s time for you to create your own email template in BEE. Remember, you can get a free trial of BEE Pro if you need it — click here for the simple sign-up process. And with the new Save Rows feature, it’s easier than ever to consistently produce on-brand emails with BEE, dragging and dropping the same design elements every time. Happy designing!

Email geeks, have you heard how easy it is to use BEE and Mailchimp together—for free? Thanks to BEE's exciting partnership with Mailchimp, you can now use our free HTML email templates and editor to build a gorgeous email, then upload it to Mailchimp to send to your audience. And since BEE has plenty of ready-to-use responsive email templates for you to customize, the design process is super quick and simple. Read on to see how it's done!And click here to watch our video tutorial:

Step 1: Design your email in BEE Free

First things first: Go to beefree.io/templatesto scan through more than 200 professional HTML templatesto 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 templatesto event promotion templates. Or of course you can just scroll and browse.

Whichever template you select, remember these are custom email templates, and you can completely customize thembefore sending them in Mailchimp. Add your own text and images; change the fonts and font sizes; update the CTA button color and size, and more. Not in the mood for a template? You can also start from scratch!Today we chose a Giving Monday template to get us started—

At minimum, we'll plan to update the body text and link the buttons and images.

Remember to preview or test your email at any point using the Actions drop-down menu in the upper left. Once we're satisfied with our message, we can click the blue "Save" in the upper right corner. After saving, we're prompted to either download our email or edit and save it in BEE Pro. Today we'll stick with BEE Free and download it. (This downloaded zip file is exactly what we'll upload to Mailchimp!)

Psst: If you do want to try BEE Pro, you can start with a free trial to test out all the bells and whistles. BEE Pro lets you connect with Mailchimp directly, so you can "push" your email straight from the BEE editor to Mailchimp to send. It's another great easy option for email marketers and designers interested in Mailchimp email design.

Step 2: Upload your customized email to Mailchimp and send

With your beautiful email downloaded and at-the-ready, it's time to log into Mailchimp. Once you sign in, go ahead and create a new campaign.

Choose email (duh).

And then name your email campaign.

With your new campaign all set up, you can go ahead and customize your To, From, and Subject fields as usual. To upload your BEE email, click Design Email.

On the following screen, navigate from Layouts to Code your own. Under Code your own, you'll see options to paste in code, import from zip, or import from URL. Choose Import from zip.

In the pop-up screen, go ahead and find the zip file you downloaded from BEE (hint: your email is inside ;)

Once you click upload, voilá! You should see your BEE email appear.

After you save and close your email, you can preview, send a test email, then schedule or send just as you would any other Mailchimp email. It's that easy.Lots of folks searching for Mailchimp email templates choose to use BEE to design their campaign, then Mailchimp to send it. Why? Because BEE offers users a unique level of design flexibility. The tool allows designers to customize their layouts precisely (e.g., switch from a single-column design to a 4-column design), adjust the padding on images, and so on. Designers like the control they get with the BEE editor, and now they can design in BEE and send in Mailchimp, one of the most popular email marketing platforms around. If you give this method a try, let us know how it goes! And happy designing.

When it's your audience's last chance to snag a sale item, register for an event, get free shipping, or take advantage of a promotion, how do you get their attention? We culled our inbox to see how brands design final hours emails and found three common strategies:

1. Show readers what they're missing by showcasing your product
2. Grab attention and create urgency with animated GIFs
3. Drive home the point with a dynamic countdown timer

Today we'll walk through how to use these design techniques in a final hours email of your own.

Final Hours Email Inspiration: Ursa Major

We're drawing inspiration from Ursa Major, which recently sent this elegant last call email alerting readers about the final hours of its sale:Subject: Hours left to save 10%

Here are the design moves we love about this sale email:

• Single-column, modular design ideal for mobile
• An inverted pyramid structure with a single message and call-to-action
• No navigation menu or clutter at the top
• Straightforward, well-formatted live text
• Quick-to-spot blue CTA button

Let's build it!

Tutorial: Design your own final hours email in minutes

Step 1: Log into BEE and choose a blank template

BEE's blank template allows you to customize your last chance email starting with a clean slate. For a simple single column email like the one we're designing, it's the easiest one to start from. (And pssst, if you don’t use BEE yet, try a freeBEE Pro trial! You can use our email marketing templates or build an email of your own from scratch, then send away!)

Step 2: Build the email structure

Using the Content menu on the right, let's drag in each type of block we'll need in order: an image placeholder for the Ursa Major logo, an image placeholder for the hero image, a text box for the body text, and so on. The blank email template is already set up as a single column; now we just need our modules. Here's how it looks once we drop everything into place:

Step 3: Drop in your photos and text

Yep, it's as easy as it sounds. Simply drag your images into their respective placeholders, copy-and-paste (or type in) your text, and customize your button text right on the button itself. It's easy! Need images? Tap browse, then click Search free photos to browse BEE's extensive stock photo library.

Step 4: Format and finalize

Let's give this content a little TLC. First, we'll use the text menu to center-align our text, increase its size, and change the color to black. We can also use the Content menu on the right to adjust the line height.

Next, we'll customize the CTA button. Using the content menu, we'll set the border radius to 0, adjust the background color, and link it. We can use the text menu to switch to a serif font, too.

Lastly, we'll format our images. The star image at the bottom of our email is stretched out. To narrow the width, we can tap it, then use the content properties menu on the right to turn off auto width, then shrink its width using the slider.

Finally, we can tap on any content block and adjust its padding, making sure there's even spacing between elements throughout the email. Here's how our final email looks:

Looks pretty good, right?!Remember to link all images and your button! When you're finished, you can also:

• Preview how your email will look on desktop and mobile using the Actions menu
• Send a test email using the Actions menu
• Save your email and finalize later
• Export to Gmail, MailChimp, or Sendgrid
• Invite collaborators to review
• Turn your email design into an email marketing template for later use

Bonus: Add a countdown timer

Want to add a little urgency to your message with a countdown timer? It's easy! And countdown timers are great email marketing tools. Our favorite way to add a dynamic countdown timer to email is to use a free timer generator. Today we'll useSendtric; other easy-to-use countdown generators you might check out include:

• FreshRelevance
• PowerInbox
• MotionMail

Sendtric's interface makes generating a timer super simple. Go to sendtric.com and customize the fields on the landing page, including your deadline and the colors for your timer. This is how ours looks:

Tap generate, and you'll be presented with an HTML code you can copy and paste:

In BEE, drag and drop in an HTML block from the Content menu on the right. We'll place ours right under the hero image. Then, using the content properties menu, paste the HTML code into the entry field. Your timer will appear!

Excited to design your own final hours email? Sign-up for aBEE Pro free trial! You'll be able to create an email like this one in minutes. And if you want a head start on your design, check out our ready-to-use countdown email template andproduct promotion templates. Happy designing!

Want to use 2019's hottest color in your email? Here's how to make a Living Coral HTML background or button in just a few clicks using the BEE editor.Check out our living coral ready-to-use email template here.

It's a new year! For many brands, that means vying for customer attention while clearing out post-holiday inventory and setting the stage for the year ahead. Our inboxes are loaded with dazzling marketing campaigns and innovative designs. We took a closer look at post-holiday emails and chose one of our favorites for today's tutorial. We'll walk you through how to whip up a stellar winter email of your own, so you can promote, announce, or invite readers to your next big thing, all while staying in sync with the cool and cozy vibe of the season. Start 2019 off with a bang and follow along step-by-step in this video:

Winter email inspiration: Blue Apron

In this tutorial, we're going to show you how to build a winter email like this one we recently received from Blue Apron.Subject: Spice up your life! ????️

These are the design choices we love about Blue Apron's email:

• Single-column, modular design ideal for mobile
• Bold blue HTML background color
• No navigation menu or clutter at the top
• Large, skimmable headers in live text
• Bulletproof CTA buttons that are easy to spot

Here's a look at the mobile view, so you can see how nicely an email like this renders on a smaller screen:

Ready to build your own? It's easy!

Tutorial: Build a perfect winter email

Step 1: Log into BEE and choose a blank template

If you don't have BEE yet, try a free BEE Pro trial. You can use our templates or build an email of your own from scratch, then send away!

Since this email has a simple, single-column design, customizing a blank template will be a cinch.

Step 2: Adjust the setting for the whole email

Before we start building the structure of the email, we can set the HTML background color and default typeface so that anything we build will be customized to our choices.Navigate to the Settings menu on the right. There, we'll choose a bright blue HTML background color for the content area and white for the background color (this will create a fixed width effect).Blue Apron's email uses two email-safe fonts: Arial for body text and Georgia for headers. We'll set Arial as our default, then switch to Georgia as needed once we're in design mode.

Step #3: Build the structure of the header and first module

To start, let's set up the layout for our email's header content and the first module.

In BEE, we'll pull in two empty rows—

Then we'll drop in our content placeholders. The first row will have the Blue Apron logo (image), followed by large header text and body text. The second row will need to hold an image, body text, and a button.

Step #4: Add and format images

Now let's add our images! We saved the photos from Blue Apron's email, then drag-and-dropped them into BEE. Here's how they look unformatted—

Let's adjust the image widths. Simply tap on the image you want to adjust. We'll start with the logo. Use the Content Properties menu on the right to uncheck the auto-width setting and move the slider down to about 20%.(Don't forget to also check Full width on mobile so the logo isn't tiny on a mobile screen.)

After adjusting the following image down to 90%, both images are now in correct proportion—

Step #5: Add and format plain text

Now we'll simply copy-and-paste (or type out) the content from Blue Apron's email. First, we'll format the "Dig into..." header. To achieve a similar look, we changed the font to Lucida Sans, increased the size to 38, chose a navy blue color, bolded the text and center-adjusted it, as shown—

The body text below it can then be formatted to be larger, white, and also center-adjusted—

We will also adjust the padding on either side of the text box so that the column of text is narrower than the full width of the email.

After formatting the rest of the text, here's how our email is shaping up—

Step #6: Format CTA button

Now let's make that bulletproof CTA button pop! Simply tap the button, then format using the menu in the right panel. There are three things we'll do:

1. Change the background color to dark blue
2. Achieve rounded edges by adjusting the border radius
3. Elongate the width of the button by upping the content padding to the right and left

And here's how our button looks—

Step #7: Duplicate your module for fast designing

Now that our first module is perfectly designed, we can employ a handy BEE shortcut. All we need to do is duplicate it, then update the image and text. We can repeat this process for the rest of the email, making it super easy to complete your design.

Step #8: Preview on desktop and mobile

Once you've finished designing the rest of your modules (or at any point!) you can preview your message using the Actions menu in the upper left. Select Preview, then toggle between desktop and mobile. Here's how ours looks—

Voilá!!Are you ready to build your own winter email? Sign-up for aBEE Pro free trialand check out our cozy new winter email marketing templates:

Use this template in Beefree!

Use this template in Beefree!

You'll get access to all of these features, along with free stock images and easy-to-use tools to make your email look perfect! And of course, if you're looking for more winter email design inspiration, we've got you covered!

Use this template in Beefree!

Use this template in Beefree!

Wise email geeks know the holiday season isn't just about promotions and deals. It's a time to show gratitude and appreciation. That's where holiday ecards come in. Whether the message is a "thank you," a simple season's greetings, an invitation, or something else, holiday ecards are a great opportunity to share a little merriment and cheer. Today we'll show you how to build one in just a few minutes, whether you start from scratch or use a template. Speaking of templates, be sure to scroll down for our gift to you :) Let's get started!

Tips for planning the best holiday ecard

In a previous post,Holiday e-Cards for Your Clients, we established four important things to consider before sending an ecard. Here's a quick refresher.Before you begin designing your holiday ecards this year, take into account:

• Your recipients. Will all your clients, vendors, and customers receive the same message? Consider customizing your email for different segments, or creating different holiday ecards for business sectors.
• Your reason for sending it. Some holiday emails have a call-to-action; others don’t. Some have a note from the CEO; others offer a last-minute promotion. Before you assemble your email, consider why you’re sending it and what your objective is. Your reason will determine the message and the design.
• Your brand identity. A holiday e-card can be one of the easiest emails you’ll send all year. But in order for the message to be effective, readers should feel that it's sincere and reflective of your brand. Use the holiday email as an opportunity to build trust and loyalty.
• Your timing. In the past, many customer-facing holiday ecards have landed in our inbox on December 24th or 25th. Because these emails don’t usually include a CTA, many brands focus on sending a timely message (assuming most recipients celebrate Christmas) vs. being strategic about when most readers would be online and shopping. According to GoDaddy, Christmas Day might have one of the lowest email open rates of the season (but this doesn’t mean your message won’t get read later—which, in this case, is perfectly fine). Once you determine the reason for sending the email, you can choose the right date to send it.

Inspiring holiday ecard designs

Check out a sampling of holiday ecards and their respective approaches to messaging and design—

Uniqlo

Subject: To you + yours

This email came in on Christmas day 2017 and includes a secondary call to action. Here's the animation from the image above:

Coyuchi

Subject: Happy holidays from the Coyuchis

Like Uniqlo's email, this one from Coyuchi begins with a simple holiday message and continues with a few CTAs and offers.

Patagonia

Subject: Happy Holidays

No CTA in this holiday ecard from Patagonia – just footer content if you do choose to shop.

Tutorial: Design your own holiday ecard

Ready to design your own email? Here's how to do it in just a few minutes!

Step 1: Set up your email structure

In BEE Pro (access a free trial), we'll start with a blank template. Drawing inspiration from Patagonia, let's set the email up to include the following:

• A simple logo header (image)
• A holiday stock photo (image)
• Header copy (text)
• Body copy (text)

One we drag in the corresponding content blocks, our email structure looks like this:

Step 2: Add your content

We'll drag in our logo to the first content block and type out our content in the following text blocks. For our hero image, we'll use BEE's stock image library to choose something fitting.How to access free stock photos:

• Click Browse
• Click Search free photos
• Type in your search term (e.g., "holiday") and browse

• Click Import when you've found an image you like
• Click Insert to add the photo to your email

Here's how our email is shaping up, before we format the images and text—

Step 3: Format images

First, let's adjust our images. The logo looks like it could use some padding. Let's tap it, then use the content properties menu to add padding to the bottom edge, so there's a buffer between the logo and hero image.

We'll also link the image to the BEE website.

For the tree image, we don't need to add padding, but we can also link it and determine how it will show up on mobile. For instance, we can opt for it to be full width on mobile:

From the Actions menu in the upper left, we can preview how our email will look on desktop and mobile to make sure our design decisions are coming along okay.

So far, so good!

Step 4: Format text

Simply select your text box, then use the pop-up menu to change the font, size, color, treatment, and so on. For our header, we're going with a large 38px font and choosing a serif, Courier New.

Our body text will be Helvetica, a sans serif, and size 18px. We selected a dark blue color for both, which is easy to read against a white background (remember contrast!).

In just a few minutes, we have a beautiful holiday ecard.

Ever spot a simple, stunning photo-less email in your inbox? For many brands—especially those that focus heavily on product images or illustrations—a no-image email is a nice change of pace. Readers can tell right away it's different, and that novelty can catch eyes (and earn clicks!) So if you don't have any photos or art in your email, what is in it? Text, of course! We're talking beautiful, typographic email design. With live text. Give your plain text a little formatting love, and your email will stand out from the rest. It's easy!

Inspiration: Beautiful, font-forward emails

Check out the inspiration for today's typographic email design tutorial. Each of these emails relies almost entirely on creative copy and text formatting to shine.House Industries

Belletrist

Stumptown

Glossier

Youth to the People

Today's tutorial: build a beautiful typographic email

To create an eye-catching, text-based email, here's our secret: All you need is live text + HTML background colors. No Photoshop, no design assets, no images. Just great copy, styled smartly.Let's get started with a single-column blank template in BEE Pro.

#1: Narrow your width

Since we're building an email comprised only of text, narrowing the width of the message body is an important step to making it easier to read. (Picture the way narrow newspaper columns make the content more legible.) A narrow width also helps the text stretch from edge to edge in the body of the email (like in a fixed-width message).To adjust your content area width in the BEE editor, navigate to the Settings menu on the right side. Drag the slider down to 500px (or as low as 480px).

#2: Choose a great serif or san serif—or both!

In the examples above, most emails stick with a single, large typeface. Glossier and Youth to the People stick with sans serifs, while Stumptown and Belletrist use serifs.Here’s a reminder of the difference between serifs and sans serifs—the red image shows where the little "serifs" are:

Image from w3schools.com

Quick font refresher: Email safe fonts vs. web fonts. vs. custom fontsEmail safe fonts (AKA "live text" or web safe fonts) like Arial, Helvetica, Georgia, Times New Roman, Courier, and similar default fonts render on any computer or device. Choosing these fonts for emails is a design best practice because they’re so reliable.Web fonts are designed specifically for the web and are somewhat less reliable than live text options, but they’re still found on many – if not most – devices. These are fonts like Open Sans, Roboto, Lato and others. Many popular web fonts are Google Fonts.Of course, there are fonts out there other than these web safe or web font categories. And many brands have custom fonts—typefaces that have been modified or designed specifically for a brand. More often than not they’re simply added as an image in email.Pro tip: You can customize the fonts you have access to in the BEE editor, adding additional web fonts and even custom ones (but be sure to have fall-backs!). Here's how.

Let's begin by drawing inspiration from Stumptown and choosing a serif font, like Georgia. In the Settings menu, you can set your default email font.

And not every text block we drag and drop into our email will be set to Georgia.

#3: Go BIG

One thing all these great font-forward emails have in common? The text is LARGE. That's an intentional design move. Here's how to recreate it. Simply use your drop down menu to choose an ultra-big size. Test out a few to see which feels right. (You can preview your email on mobile, too.)

#4: Think contrast

Now, let's have fun with color. Not only do our inspiration emails use a large typeface, but they also use great bold colors. That's part of the appeal—and the fun!The trick is to choose a great font color that contrasts against the background so it's easy to read. For Stumptown, both blue and red contrast well against the white background. We'll use the Custom color option in the type menu to get the right shade.

Note we're also centering our text. Since it's just one word in a column, centering is okay (for other long blocks of text that need to be read, stick with left-alignment).Now let's duplicate our row, making the next one blue.

We can duplicate each row multiple times, then drag them so they're arranged by alternating colors. It's coming together!

#5: Minimize padding

To achieve tighter spacing between each row, we need to decrease the padding on each row and content block.Use the Row Properties menu to reduce padding on the row....

...then Content Properties > Block Options to decrease padding on the content block itself, making sure all padding is set to zero.

Now our message is much more condensed.

Important bonus tip: Have fun!

These emails are super fun to make, because you can essentially try different font and color combinations until you land on something you love. So play around a bit! You can mix-and-match fonts, like in House Industries' email, along with colors, like in Youth to the People's email. Just keep in mind your brand guidelines so that your email looks like it came from you. (Don't go too wild!)Watch our quick video for tips on how to have fun with colors and fonts. And happy designing!

Trick or treat! Halloween is just around the corner, and we're celebrating with a workshop that will walk through how to build a stunning responsive Halloween email of your own. We chose a mobile-responsive email that follows many of our design best practices. Use these tips to build a Halloween email—or another upcoming campaign. These best practices are on fire no matter what kind of email you're building. Let's dig in!

Email Inspiration from Nest

Subject:Say Hello to monster savings from Nest

Here's what we love about this email:

• Clean, single-column, modular design
• Easy-to-read live text with large, skimmable headers
• Bulletproof CTA button with A+ green color that pops
• HTML background that seamlessly matches the image alongside it
• Boxed limited width body with light gray background

Today's Tutorial: Build a Responsive Halloween Email

To get started, let's log into BEE Pro (try it for free!).We'll begin with a blank template so we can create this simple one-column structure from scratch.

Trick #1: Build by module

We can think of this email as being made up of two modules.

We'll recreate that same structure in BEE by dragging in two empty rows.

Now we'll drag in the content placeholders that belong in each module. The first module needs to hold an image of the nest logo, then a text box with the opening lines, a CTA button, and then an image container for the GIF. Here's how it looks:

Trick #2: Make an exact match of the colors in your image

Before we drag in the content, let's set up our background colors. Since the nest logo and header text is white, it will be easier to format once the background color is in place.We use HTML Color Codes to upload images and find out the colors they contain. When we upload the Nest email, we can click on the color of the first module and get its code.

Back in BEE, let's input the code. We'll click to select the first module row, then make our update in the Row Properties menu on the righthand side. We'll want to update the Content Background color.

To give the email a "boxed" effect, we'll then update the Row Background color to gray, as Nest has done.

Now, here's how our structure looks:

And once we've added images, here's how module #1 looks:

It's coming along!

Trick #3: Use shortcuts for formatting text

There are a few ways to make formatting text easy. First of all, we can navigate to the Settings menu and select a font that we want to use throughout the whole email (so we don't need to make updates one by one in each module).

Next, we can update one text box, then copy it so all subsequent boxes maintain the same formatting. For example, after we change the color, size, and center adjustment of the header, we can duplicate the content box by clicking the shortcut box in the lower right:

Voilá!

Now it's a little faster to update the second box (we don't have to update the color and center adjustment, only the size).

Almost there!

Trick #4: Perfect your CTA button

In BEE, updating your bulletproof CTA button is easy. Just give it a click and start updating! First, we can click right on the button to update the text. Then, using the left side panel, we're going to make a few updates:

1. Change the background color
2. Sharpen the border radius so the edges are more square
3. Add a bit of padding on the right and left to "stretch out" the button

Lastly, we'll link the CTA button to the appropriate landing page. And now module #1 is complete!

Trick #5: Don't forget finishing touches: image sizing, padding, and mobile preview

To make module two, we'll use the same shortcut from trick #3: we'll copy text boxes for quick and easy formatting. That way we'll know our header sizes and body text sizes are the same throughout the email. We simply need to update the language and colors.

When we drag in our last image, it auto displays too large.

Here's how to fix it. Click the image. Deselect "Autowidth" in the right side menu. Then drag the width percentage down until the photo size appears as desired.

That's more like it:

What else? Be sure to link it! Check that other buttons, text, and images are linked. Fine tune spacing andpadding throughout the email. Do one last spell check.And—last but not least—be sure to preview the message on mobile via the Actions menu in the upper left. Here's our preview:

Looks pretty good, doesn't it? We love this fun and playful email from Nest. It follows design best practices and is easy to build in BEE.Are you ready to build your own? Sign-up for aBEE Pro free trialand get access to all of these features, along with tons of free stock images and easy-to-use tools to make your email look perfect! Let us know if you have any questions about this tutorial, and happy Halloween!

If you’ve ever wanted to send a beautiful email straight from your Gmail account, you’re in luck. Beefree Templates for Gmail is the perfect tool to expand your email communications. This add-on allows you to send professionally designed emails directly from your Gmail account.Designing professional emails doesn’t have to be stressful. Follow a few short steps to quickly install the add-on. This gives you access to a library of ready-to-customize templates, allowing you to design your Gmail email campaign right in your inbox.Plus, certain Beefree Templates for Gmail are free with no registration required. We’ll show you how to get started—watch the video below and follow along with our step-by-step tutorial.

How do I run a Gmail Campaign? 

If you’re in a hurry to send a professionally-designed email straight from Gmail, the add-on lets you quickly choose and customize a stunning email to send to your Gmail contacts.Use the add-on to send:

• Event invitations/announcements
• Thank you notes
• Products and services promotion
• Personal messages
• Resumes and curriculum vitae
• News and blogs/newsletters

Using Beefree Templates for Gmail marketing is easy. Follow these two steps and you’ll be ready to go in a few minutes.

Installing the add-on for your Gmail email campaign

Step 1: Install Beefree Templates for Gmail 

Install Beefree Templates for Gmail from the Google Workspace Marketplace using this link.Or, in your Gmail window, click on the “+” on the right panel to install a new add-on, then search for email templates and select “Beefree Templates for Gmail.”Once the page is open, click install in the upper right corner of your browser.

To permit the installation of the add-on, you’ll go through a few steps. Note: If you’re using Google Workspace Marketplace within your company, ask your Admin to authorize it first.

Once you continue, choose your account.

Then confirm that access to this add-on is allowed.

After clicking Allow, a window will pop up confirming installation.

Close the window by tapping Done, then open Gmail to access the Beefree templates.

Step 2: Access, customize, and send templates in your Gmail account

When you log into your Gmail account, you’ll get a notification confirming that Beefree Templates for Gmail has been installed.

If the Beefree logo does not appear in the Gmail add-ons column on the right side, try reloading Gmail or emptying the browser’s cache and then reloading. If you tap the Beefree icon from your main inbox view, you’ll be prompted to instead open an email first.

This add-on only displays a template in the main inbox view here when you’ve composed a new message and accessed a template from that new message. Open an email in your inbox, then tap the icon again.

You may be prompted to authorize access from within your account. Simply tap Authorize Access and follow the prompts to proceed.

Then scroll through a large menu of Beefree templates, right in Gmail.

As soon as you click on a template of your choosing, it will open up in a new draft for you to customize.

Once your email template is open:

• Customize your copy (headers and body text)
• Update CTA button text and links
• Remove and replace images
• Change the subject line

Edit your template to fit your needs and then send it as you would any other email message. And that’s it, your Google email campaign workflow is simplified and the add-on is set up in two easy steps.

Set up a Gmail Email Campaign as a Beefree user

If you currently design in Beefree, the add-on allows you to import your designs from Beefree directly to your Gmail account. Follow along with these easy steps:

1. After you finish designing in Beefree, hit Save and then Exit the template to get to the message details page.
2. On this page, you are able to Copy the URL for your design.
3. Next, head back to your Gmail account and click on the add-on icon.
4. Scroll until you see the Import a Beefree message option. Click-in and Paste your URL.
5. Your design will show up in your email just as you designed it in Beefree.

A final note from Beefree 

The add-on version of Beefree always displays the desktop version of an email.

In Beefree Pro, all messages you design are automatically mobile responsive. However, please note that because the Gmail composer strips parts of the code, all messages that you edit and send with Gmail will always display the desktop version regardless of where they’re opened.In other words, if a message is sent with Gmail using a Beefree designed template and is opened on a mobile device, it will render like it does on a desktop device.This is nothing to stress over, the templates that you will find in Beefree Templates for Gmail are specifically designed with structures that adapt well to all devices.To access more complex email designs that contain multiple columns or more extensive design features sign up for Beefree's free plan!