Beefree blog

Tutorial: How to Create a Color Blocking Email

Beefree team
Beefree team
May 22, 2018
Tutorial: How to Create a Color Blocking Email
Tutorial: How to Create a Color Blocking Email

We recently celebrated all things color in email. One style we totally love (and see a lot) is color blocking, where about half an email has a bold background color and the other half is white. This is a simple technique that goes a long way in inboxes. In this tutorial, we’ll show you how to build a color blocking email of your own in a few easy steps. We’ll also explore how to:

  • Add multiple HTML background colors within an email
  • Establish multiple columns
  • Format text (color, size, line height, links etc.)
  • Polish an email by fine-tuning spacing and padding

Inspiration: Offscreen Dispatch

Offscreen is a print magazine and a weekly newsletter “with a thoughtful, human-centred take on technology and the web.” Its newsletter is called Offscreen Dispatch, and we’ve long admired its simple, distinct design. Offscreen uses the same color blocking technique in every email, and the really pretty effect makes the email look like it’s a page in a magazine. The top portion—where web designer Kai Brach writes a note to subscribers—is always pink. The rest of the email is always white. Check it out:

Offscreen dispatch color blocking email

There’s nothing particularly fancy here—no art or photography—but the dynamic layout, well-formatted text, and color blocked design brings this email together.The design is easy to pull off, too, and requires no coding in the BEE editor. Let’s dive in! Open the BEE editor and follow the steps below.

Step 1: Build the structure

Open up the BEE editor on our website (https://beefree.io/) or from your BEE Pro account and start with a basic blank one-column template.Before we start dragging in structure elements, let’s take a minute to examine the Offscreen Dispatch email and identify the layout components. Here’s a marked-up version:

Offscreen Dispatch color blocking email

The email alternates between one-column and two-column structures, which is easy to assemble in BEE.Drag over the corresponding row formations from the Row menu on the right. We’ll need the top two options for this email:

color blocking email

Here’s how our email looks with the row structures in place:

color blocking email

Step 2: Arrange content blocks with text/images

Now that we’ve got the bones of our email assembled, drag over content blocks that correspond with the content type—text and/or image—we want in each section. Then, paste the text and drag in the images.Here’s a 1-2-3 on how to get your content situated. Starting with the first row—the header—here’s how:(1) Pull in a two-column structure:

color blocking email

(2) Add text blocks on the left; an image content block on the right:

color blocking email

(3) Drop in your text and image:

color blocking email

Let’s go through each row to arrange the content.Here’s our email with the remaining content blocks in place:

color blocking email

Now, we’ll finish adding text:

color blocking email

Voilà! Next, let’s format.

Step 3: Format the background colors

Now for the fun part. Watch how easy it is to create the color blocking effect.First, to match the exact shade of pale pink from Offscreen Dispatch’s email, we used HTML-Color-Codes.info to ID the color from the image in the header.

color blocking email

HTML Color Codes identifies the hex code as #F5BBA2. To make the first row the right color, we will:

  1. Select the row
  2. Navigate to Row Background Color in the menu on the right
  3. Paste in the color code (or select manually)
color blocking email

Seamless edge-to-edge color! Now let’s complete the pink color block. We’ll simply select the following row and do the same thing again.

color blocking email

Now, our email is color blocked. Yes, it’s that easy.

Step 4: Format the text

Let’s finalize this email design with some formatting touches. We’ll begin with text.

Choose a default font for the email

Instead of going through each individual content block to choose your email’s font, navigate to the Settings menu on the right and select the font you’d like to use for the entire email.

color blocking email

After that, you can change the header font or select the sections you’d like.

Adjust font sizes

Tap any text block and use the drop-down menu to fine-tune the font size.

color blocking email

Customize text colors

Use that same menu to choose the colors you prefer. Again, use the same matched color code to get the precise shade that’s needed.

color blocking email

Format the link style

Don’t forget links! In the same Settings menu where you chose the default body font, you can also format the link style. In this case, we’ll choose black.

color blocking email

As you add links to your email, make sure the “Underline Link” box is checked. (It’s even an email accessibility best practice!)

color blocking email

Line height

Make sure your body text has room to breathe. For any content blockthat you edit, adjust the text's line height.

color blocking email

Tip: duplicate row

If you spent a lot of time formatting text in a particular row, you can simply duplicate it, instead of manually making the same adjustments in another row.Tap the row you want to copy. Then, click the double-box image all the way on the right.

color blocking email

Your row will be copied! Then, simply drag it and grab the directional icon on the left, to place the new row in the email.

color blocking email

Step 5: Adjust the padding

Last step! And it’s an important one. Before you finish the email, take a close look at the spacing between your content blocks. If there are still too many gaps—or not enough breathing room anywhere else—it’s very easy to make adjustments.For example, there’s still a gap between “Offscreen” and “Dispatch” in the header of our email draft. To tighten it up, tap on either content block, scroll down to Block Options in the menu on the right, and make sure “More options” is turned on under Padding. Then, you can decrease (or increase) the padding on any side in any piece of content.

color blocking email

Pretty neat right? Make sure to check out our tutorial on all things padding and spacing.

Step 6: Preview the finished color blocking email!

Ok—one last,last step. As you design any email, preview it along the way to make sure you like how it appears on both desktop and mobile. Here’s a peek at how ours is shaping up:

color blocking email

Have you used these techniques in the BEE editor? Let us know!

Getting Started with Beefree: A Guide to Streamlined Email and Landing Page Creation

Whether you're designing a newsletter, promoting an event, or driving a marketing campaign, ensuring that your emails and landing pages are visually appealing, engaging, and efficient to produce is no small task. That’s where Beefree comes in.
Beefree team
Feb 26, 2025

8 Common Email Spam Triggers That Can Damage Your Sender Reputation

Whether you’re employing a lifecycle email marketing strategy or simply confirming an order, we’ve outlined the basics of how spam prevention works, why it matters, and how to avoid running afoul of some commonly used triggers.
Beefree team
Feb 14, 2025

Email strategies you’ve likely heard of but haven’t implemented yet

While email marketing has come a long way and is changing faster than ever, there’s only so much you can do within 600x1,500 pixels. However, there are no limits to where your creativity can take you. 
Kruti Shah
Feb 5, 2025

Getting Started with Beefree: A Guide to Streamlined Email and Landing Page Creation

Whether you're designing a newsletter, promoting an event, or driving a marketing campaign, ensuring that your emails and landing pages are visually appealing, engaging, and efficient to produce is no small task. That’s where Beefree comes in.
Beefree team
Beefree team
26 Feb
2025

Creating professional emails and landing pages can be challenging for businesses of all sizes. Whether you're designing a newsletter, promoting an event, or driving a marketing campaign, ensuring that your emails and landing pages are visually appealing, engaging, and efficient to produce is no small task. That’s where Beefree comes in.

Beefree is a robust tool for designing emails and landing pages with ease, offering templates, automation features, and seamless integrations. Regardless of your industry or goal, Beefree empowers you to craft high-quality communication and marketing materials quickly and effectively. By providing an intuitive and user-friendly experience, it helps businesses transform their creative ideas into polished campaigns without requiring extensive technical expertise.

source

Why use Beefree for professional email campaigns?

Before we jump into the nitty-gritty of using Beefree, let's quickly go over why this tool is worth your time. There are a lot of email marketing tools out there, but Beefree stands out from the crowd for a reason. Let’s break down the unique benefits that make it an invaluable asset for anyone serious about email marketing:

Design made easy:

According to HubSpot, well-designed emails can drive open rates as high as 30%. Maybe you’re following up with leads from a recent webinar or you want to reach potential clients after a product launch. But you're finding yourself stuck because crafting professional emails and landing pages that capture attention is no easy feat.

With Beefree’s intuitive design tools and a library of over 1,700 templates tailored for various industries and purposes, you can achieve professional results without the guesswork. The wide variety of pre-designed options ensures that you can find a solution that aligns perfectly consistent with your brand.

source

Time-saving features:

Speed is key, especially if you’re running time-sensitive campaigns. Beefree simplifies the design process with reusable content blocks, real-time collaboration tools, and the ability to transform emails into landing pages with a single click. These features enable you to produce high-quality materials in less time, allowing you to focus on strategy and content rather than struggling with technicalities.

According to a Beefree report, 82% of users report faster email creation. The ability to save and sync reusable content blocks means you can replicate what’s working without reinventing the wheel each time. Once you find a winning format, you can use it again and again with minor tweaks to fit the audience or campaign.

Maybe you’re following up with leads from a recent webinar or you want to reach potential clients after a product launch. With Beefree’s templates, you can get those messages out quickly and make sure your brand stays top-of-mind for your audience.
Using email cadence software like QuickMail ensures that outreach campaigns maintain a structured and effective flow, preventing overwhelming inboxes while keeping engagement high.

source

Increased engagement:

A significant 64% of Beefree users report an 11% or more increase in click-through rates after using the platform. By enhancing the visual appeal and personalization of your emails, Beefree helps you achieve better engagement with your audience. The ability to test and iterate your designs ensures continuous improvement in performance.

source

Getting started with Beefree templates

Alright, now that you know why Beefree is so powerful, let’s talk about how you can get started with their massive library of templates. This section will walk you through choosing and customizing a template that works for you.

1. Choose your template

The first thing you want to do is pick a template. Beefree’s catalog has templates for just about every sector—whether you're in retail, healthcare, SaaS, you name it. With a variety of options, you can find something that suits your goals perfectly, whether for a simple newsletter or detailed marketing report templates. Say you're promoting a webinar—just pick a template that’s built to highlight your CTAs, and you're off to the races.

The best part? You’re not starting from scratch. You save hours by picking a pre-designed template, and then it’s just a matter of customizing it to fit your brand. Beefree's templates are super flexible—add or remove elements, change colors, switch up the fonts, rearrange layouts—make each email uniquely yours without the hassle. This flexibility is especially beneficial for maintaining a low code architecture in website design.

2. Personalize

Consistency is key to building trust, and when your emails have a cohesive look, it helps recipients recognize your brand. It is also important to follow a brand style guide for your email campaigns so that the audiences can associate elements like your logo, colors, and fonts easily with your brand.

When using a template, customization is key to making your emails and landing pages feel unique and relevant. With Beefree’s drag-and-drop editor, you can easily tweak templates to align with your branding. Adjust colors, fonts, and layouts, or add personalized content such as recipient names and company details. The flexibility ensures that your final output is as distinctive as your brand’s voice.

Plus, with so many people opening emails or landing pages on mobile devices, Beefree’s mobile design builder guarantees that they look great no matter what device they’re on. When your emails look good, people trust your brand more, and that makes them more likely to click through and take action.

Personalization isn’t just a nice touch; it’s essential for engagement. According to Campaign Monitor, personalized subject lines can increase open rates by 26%. By tailoring your designs to speak directly to your audience, you can create a more impactful experience. Furthermore, the platform’s collaborative features allow team members to provide input and make edits in real-time, enhancing efficiency and creativity.

1. Export

So, you’ve picked and customized your template—now it’s time to send those emails.

One of the coolest things about Beefree is that it plays nice with just about every major email platform out there—Mailchimp, HubSpot, Outlook, Quickmail—you name it. This means you can create a killer email in Beefree, connect it to your favorite email platform, and schedule it all from one place. For more advanced needs, many businesses choose a CRM with email integration, to seamlessly combine customer management and automated outreach.

Start designing for free

Beefree simplifies the process of creating visually appealing, professional emails and landing pages, saving you time and boosting engagement. Whether you’re looking to streamline your workflow or enhance your marketing efforts, Beefree offers the tools and flexibility to meet your needs.

The best part? You’ll save time and see increased engagement, connecting with your audience in a meaningful way. In a world where everyone’s fighting for inbox space, Beefree helps you stay ahead of the game by simplifying the process while delivering professional results. So, why wait? Dive into Beefree today and see how it can transform your email campaigns.

8 Common Email Spam Triggers That Can Damage Your Sender Reputation

Whether you’re employing a lifecycle email marketing strategy or simply confirming an order, we’ve outlined the basics of how spam prevention works, why it matters, and how to avoid running afoul of some commonly used triggers.
Beefree team
Beefree team
14 Feb
2025

In 2024, roughly 361.6 billion emails were sent per day. Whether you're using email for business or to keep in contact with your long distance cousin (do people still do this?), it’s easy to picture just how clogged someone's email can get. That's where modern day Email Service Providers (ESPs) come to save the day with trigger-based spam filtration tools.

For user these spam filters help ensure a smooth email experience, free of spammy and fishy emails. However, as email marketers, these filters lead us to be overly cautious out of fear that our emails are not accidentally filtered out.

Whether you’re employing a lifecycle email marketing strategy or simply confirming an order, we’ve outlined the basics of how spam prevention works, why it matters, and how to avoid running afoul of some commonly used triggers.

Why you need to avoid email spam triggers

Whether you’re an ESG reporting software or a travel company email spam triggers can email marketing performance and in turn hurt your business. For one, there’s the obvious reason that if your emails get sent to the spam folder, they probably won’t be seen. That's time and effort wasted.

Beyond that, being sent to the spam folder too many times delegitimizes your email marketing, which damages what’s known as your sender reputation. When just starting out, this reputation is effectively neutral. But if it gets too low, it could damage your marketing performance and even result in being blocklisted.

How email spam filtering works

As mentioned above, spam filters are implemented as a form of quality assurance and protection for end-users. Here's how ESPs determine content to be spam:

  • Sender reputation analysis: ESPs check sender reputation based on authentication, user complaints, bounce rates and sending patterns. They’ll also check the reputations of your IP address and web domain.

  • Content analysis: Content filtering uses triggers like keywords, formatting and error detection to distinguish spam from legitimate email marketing.

  • Blacklists: Along with sender reputation metrics, ESPs also cross-reference email senders against any of several blacklist databases. Being on even one of these means you’ll struggle to climb out of the spam folder at all.

8 common email spam triggers and how to avoid them

Now let's get to the good stuff. Prevention is generally the best strategy when it comes to avoiding email spam triggers. Here are seven factors commonly used by ESPs to filter spam emails, and the simplest solutions for dealing with them.

1. Lack of authentication

Missing authentication is one of the first red flags an ESP will pick up on. Authentication shows you’ve taken certain steps to establish legitimacy. It’s also used to prevent fraudsters from impersonating your brand online. There are three commonly used forms of email authentication:

  • Sender Policy Framework (SPF): This means publishing a list of mail servers and IPs with permission to send messages using your domain. This is one reason it’s important to conduct email marketing through a branded business email, rather than a personal account.

  • Domain Keys Identified Mail (DKIM): A cryptographic signature which shows a message’s original content has not been altered during sending. Think of it like the tamper-proof seal on a bottle of milk.

  • Domain-based Message Authentication, Reporting and Conformance (DMARC): A way for you to establish how you want receiving platforms to handle authentication failures related to your domain.

2. Shady linking practices

Link placement and presentation play an important role in email marketing. Aside from engaging recipients and securing click-throughs, using links appropriately helps avoid your emails looking like spam.

Questionable linking practices include:

  • Links to domains with poor reputations
  • Excessive numbers of in-email links
  • Compressed, modified or obscured links, particularly when generic link shorteners are used

Only link to your own authenticated domain. Also, use an unlimited bandwidth VPS to help ensure your website access speed is always stable and fast. This will give visitors the assurance that your site is legitimate.

Don’t forget to make the purpose of any in-email link absolutely clear.  

3. Content

Although the reason for an email landing in a spam folder is often related to authentication, reputation, or poor formatting, content can at times be the culprit. Here are elements that you should look at if you suspect that your content is why your emails are not reaching their recipients:

  • Typos
  • Irrelevant content that doesn’t foster positive engagement
  • Poorly translated text
  • Partner content with poor reputation
  • Possibly offensive content
  • URLs or images with poor reputation

Another thing to note is language detection filters. Various words, phrases and tone choices have strong associations with scam emails. This includes certain buzzwords, vague or exaggerated claims, or excessive sales jargon. However, this is only really an issue when you already have a bad reputation.

Nevertheless, let’s say you’re beginning to build your reputation back up and are conducting Black Friday email marketing. While it’s important to use engaging language and strong CTAs, you should avoid terms like:

  • Limited time only
  • 100% free
  • Make money from home
  • Avoid bankruptcy
  • You have won

4. Bounce rates

A ‘bounce’ is when an email doesn’t arrive in the recipient’s inbox. This could be due to it being sent to a fake email address, an out-of-date email that is no longer in use, a full inbox, etc.

When a sender frequently experiences high bounce rates for their emails, this damages their reputation with ESPs.

But how do you improve bounce rates and, therefore, your reputation? The best way is to have good segmentation practices to ensure the right content goes out to the right people. You should also keep your list clean by regularly evaluating it and removing hard-bounce email addresses as well as inactive subscribers.

Moreover, ensure you send relevant messages that your audience actually wants to receive. Of course, always be mindful of the rest of the triggers on this list to make sure you’re protecting your sender reputation.

5. Misleading email subjects

Even if you’re not trying to do anything malicious, misleading subject lines can trigger email spam filters. For example, an email might claim to promote educational B2B content about internal audit controls. Then, instead, link the user to a landing page to sell them a product.

Always set clear topic sentences as email subject lines. Try to summarize the content and intent of the email. If you’re sending a welcome email for customer retention or promoting, say, a product or sale, make it obvious before the recipient clicks on it.

6. Poorly written and formatted emails

Poor formatting and low-quality writing are other important email spam triggers. Common writing triggers include:

  • Overly vague language lacking personal detail
  • Typos and spelling errors
  • Being too brief

A marketing email can trigger spam filters if it lacks formatting of any kind, or if there are inconsistencies. It’s also suspicious when marketing emails lack branded color schemes, imagery or the correct logo design.
Avoiding these email triggers is simply a matter of emphasizing professional communication standards in email marketing.

7. Poor engagement

Low engagement manifests itself through a lack of interaction with your emails from the recipients—low open rates, click-through rates, and conversion rates, as well as low subscriber count are all indications. 

Consistently low engagement will likely result in your emails being filtered into spam. To combat this, you should strive to deliver good and captivating content tailored to your audience. More specifically, you can:

  • Use segmentation to personalize your emails and craft the most compelling content for each segment.
  • Put together attractive subject lines
  • Make use of solid and clear CTAs

8. Getting blacklisted

Improving your sender reputation, also means you don’t run the risk of being blacklisted. Blacklists are a useful prevention tool, but if you end up on one of these lists, your email marketing is more or less guaranteed to end up in spam folders.

Aim for prevention with email security and compliance training, and don’t send unsolicited marketing emails. You can also use a blacklist checking tool to make sure your sender emails haven’t been compromised.

Maintaining your sender reputation is essential

Email spam triggers aren’t all bad, they ensure that your well crafted messages aren’t drowned out and that users are able to easily see the emails they’re interested in. 

To reap these benefits, you need to keep an eye on these triggers and protect your sender reputation. Don’t worry, though. It’s easy to deliver marketing copy that avoids email spam triggers once you know what they’re looking for.

Stay informed on all email trends

From the latest creative design strategies that inspire your next campaign to industry best practices and tech advancements, our newsletter is the go-to for all things creation.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
By clicking Subscribe you're agreeing with our Privacy Policy