Beefree blog

Tutorial: How To Apply Modular Design In Email

Beefree team
Beefree team
Oct 10, 2015
Tutorial: How To Apply Modular Design In Email
Tutorial: How To Apply Modular Design In Email

Modular email design is becoming a very popular trend for email marketers and designs alike. One of the biggest benefits of applying modular design tactics is that you can improve your email production process and speed up the way you build an email, a template, a campaign, and even how you work within your team.A recent product launch email from Litmus caught our eye where we can really see how to structure content (such as images, text, call-to-action buttons) through a modular layout. Let's have some fun and recreate theLitmus email and show you howto implement modular design tacticsto quickly build our email message. Be sure to follow along this workshop by opening the BEE drag-n-drop email editor in a new browser tab.Here's the email from Litmus that we're going to build in the BEE editor:

litmus

Getting started

Let's open the BEE editor and pick a basic one-column email templateto match the layout of the Litmus email:

screenshot-beefree.io 2015-10-07 10-39-09

We're going to start off with this basic email template (think of it as our canvas) and customize it quite a bit by dragging and dropping structures and content blocks, including images and text blocks. This is where we can really see the efficient use of modular design in email. Let's go over this in more detail.

Modular email design in action

The Litmus email that we're looking at today is a perfect example of modular design (see also Tip #5: Use a modular, single-column email layout. Works great for mobile!).Notice that the Litmus email has 4 identical modules (i.e. sections) below the blue heading, with each module showing a new Litmus feature (such as "Instant email previews").

ScreenShot1393

This means that we only need to create one module in the BEE editor instead of four, and then clone it a few times. This is a huge improvement in our productivity! Let's see how to do this.We first need to find the specs of the module, which are, in order:

  • Heading text: font color #514E4C, size 18px, weight bold, line-height of 24px, padding 20px 0px 10px
  • Text: font color #7F8C8D, size 16px, line-height of 24px,
  • Image: width 500px
  • Background color of module: light grey (#f8f9fc)

Let's drag-n-drop two text blocks and one image block into our module and apply the various specs. This is done under the Content tab on the top-right menu. Here's the finished module:

ScreenShot1394

What is truly exciting is that we can duplicate this module three times by clicking on the square icon (to the right of the trashcan icon). We've just build our 4 sections in record time, thanks to modular design!

ScreenShot1396

Now that we have created these modules, we can insert the text, and upload the images. For example, here's the first completed section:

Screen Shot 2015-10-08 at 5.07.07 PM

Editing the remaining modules is just as simple; we've essentially cut our workflow 4-fold! In addition to the modular layout, the Litmus email has two noteworthy design elements:

  • A header design using only HTML colors
  • A bulletproof call to action button

Let's look at how to design each one in the BEE editor!

How to design your header with an HTML color

Notice that Litmus opted for a simple HTML color as the full-width background for its email header design. Read our Tip #2: Use a vibrant background color. Flat design is in! section.Now let's go over how to build the email header design from the Litmus email, taking advantage of the flexible background color settings in the BEE email editor. Here's our video tutorial:

Before customizing the background color of the header, we first need to add a newmodule to the message. As you can see below, the Litmus email header contains:

  • The Litmus logo: 64 x 62px
  • Heading text: font size 48px, bold, Arial
  • Sub-heading text: font size 20px, and light grey color (#dddddd)
  • CTA button: green (#62be7f)
  • 100%-width blue background (#363795)
Screen Shot 2015-10-01 at 7.40.11 AM

Let's get to work and build this email header design!We need to start with an image (i.e. the Litmus logo) followed by the text, then the CTA button.Using the single-column template we had selected, we'll simply movethe header text structure(click and hold the 4-directional arrow icon on the blue tab to the left) and drag it below the image:

screenshot-beefree.io 2015-10-07 10-51-29

With the beginning of our structure now in place, let's go ahead and dragthe white Litmus logo into the image placeholder (we right-clicked and saved the image straight from their email). You can drag and drop images directly from your desktop into the image block.

Screen Shot 2015-10-07 at 11.04.49 AM

We can now focus on the text. As a font, we chose Arial - which matches the Litmus email the closest - so we won't change it. But we willformat the text by:

  • Centering it
  • Changing the color to white
  • Increasing the font size (We chose 36px for the main header and 20px for the sub-header text)
Screen Shot 2015-10-07 at 11.12.17 AM

How to design and customize a CTA button

Our header content is nearlyall in place. Lastly, we need to add the email's first call-to-action: the green "Play video" button. Navigating to the Content tab on the right, we'll grab the Button icon and simply drag it in place below our header text.

Screen Shot 2015-10-07 at 11.17.46 AM

Let's customize the button to match the design used by Litmus. We'll need to:

  • Update the text (adjust the size, color, and style)
  • Change the background color
  • Change the shape
  • Link it

By double clicking on the button, we caneditthe text toread "Play video." We'll increase the font size to 18px and make the typeface bold—we can keep the default Arial font again.Next, using the Content Propertiespanelto the right, let's can change the textcolor to white, then adjust the button's color.

Screen Shot 2015-10-07 at 11.21.45 AM

Finally, still in the Content Propertiespanel, let'salterthe shape of the button to match Litmus's by:

  1. increasing the border radius (we went up to 30)
  2. adjusting the button width (to 35%), which makes the button rounder and a bit longer.
Screen Shot 2015-10-07 at 2.58.30 PM

The last step is tomake this button functional! In this case we want it to link to the Litmus video, just as it does in the original email. We'll copy the Litmus link, then navigate to the Action section of the Content Propertiespanel ,and simply paste the link into the link file field. Now our button works!

Workshop Recap

Let's recap what we covered in this workshop:

  • We saw how to apply modular design in our email layout and how that speeds up our work
  • We used a nice background color for a flat, full-width design for our email header: cool designs don't always require fancy graphics!
  • We recreated an engaging call-to-action button by leveraging colors, padding, and rounded corners

All of this was inspired from the clever email design tactics from a product launch email campaign by Litmus.

Design your next modular email design and go Pro!

Design your next modular design-inspired email campaign in our easy-to-use, drag-n-drop BEE editor. No HTML knowledge is required, and your email will be mobile responsive. Sign-up for a BEE Pro free trial!

Related posts

Why Pardot Users Choose Beefree for Better Email Design

Pardot’s email builder slowing you down? Learn why teams across industries turn to Beefree to create stunning, compliant emails—then export to Pardot with one click.
Beefree team
Apr 23, 2025

Send Error-Free Emails with Confidence Using Beefree

Learn about the Beefree features that can help you and your team catch mistakes, streamline collaboration, and send with confidence every time.
Beefree team
Apr 15, 2025

Using Beefree with Marketo Engage 101

Learn how integrating Beefree with Marketo Engage can help you build high-converting, on-brand email campaigns— faster.
Luca Penati
Apr 4, 2025

Why Pardot Users Choose Beefree for Better Email Design

Pardot’s email builder slowing you down? Learn why teams across industries turn to Beefree to create stunning, compliant emails—then export to Pardot with one click.
Beefree team
Beefree team
23 Apr
2025

If you’re using Salesforce Account Engagement (formerly Pardot), you’ve likely hit a wall with its native email editor. Whether you’re a nonprofit, a growing SaaS company, or an enterprise with multiple brands, the common complaint is the same:

"Pardot is just way too restrictive for our needs."

"The collaboration part just isn’t happening smoothly. It is too hard to involve writers and designers effectively."

 "It isn’t like we were doing anything overly creative—it just doesn’t give us the flexibility we needed."

Let’s face it: as powerful as Pardot is on the automation side, its design capabilities often fall short. And Salesforce doesn’t seem in a rush to improve them. If you’ve been trying to get more from your marketing emails—faster, better, more on-brand—it’s time to consider a better way.

Beefree isn’t a replacement. It’s the perfect addition to your workflow

The good news is that you don’t have to abandon Pardot. It is excellent at what it’s built for—automation, CRM integration, lead scoring, and financial compliance. 

But when it comes to design and collaboration, the limitations start to pile up. Whether it’s because of its clunky editor, lack of customization, or the time spent fixing buttons and web fonts (insert eye roll). 

Pairing Beefree with Pardot doesn’t just improve how your emails look, it transforms how your team works. This pair is especially perfect for: 

  • Healthcare & Financial Services: where compliance and approvals are non-negotiable.
  • SaaS, Consumer Brands, and Professional Services: where keeping brand consistency across touchpoints is critical.
  • Higher Ed, Manufacturing, Real Estate: where teams juggle multiple departments, audiences, and localizations.
  • Nonprofits: where lean teams need to move fast 

Teams from all walks of life all come to Beefree looking for the same thing: a fast and flexible email design solution that seamlessly integrates with their tech stack (without slowing their team down).

(source)

From chaos to control: Why teams choose Beefree

Now that you know what Beefree is, it’s time to talk about how it can help. 

When email production feels scattered (we’re talking files everywhere, last-minute edits, branding inconsistencies), it’s not just frustrating, it’s risky. It opens the door to real mistakes: off-brand messaging, broken layouts, missed approvals, or worse, emails that get flagged for non-compliance.   

1. Keeps your team organized with Workspaces

Instead of one cluttered space where everyone shares the same templates and folders, Workspaces allows you to manage email assets across brands, departments, and regions in unique environments. 

  • Create separation without silos: Marketing ops can manage everything in one platform, while individual teams work independently within their own workspace. It’s the best of both worlds.
  • Prevent cross-team mixups: With workspace-specific templates and permissions, there’s no risk of someone accidentally launching a healthcare email from the real estate workspace.

2. Allows you to move faster without sacrificing brand integrity

Beefree empowers teams to scale production while keeping every email perfectly on-brand.

  • Style Kits: Automatically apply your brand’s fonts, colors, and design settings to every email in a workspace
  • Saved Rows: Save your most-used content blocks (like hero sections, testimonials, or product features) and reuse them across campaigns.
  • Synced Rows: Make a global update, like changing your holiday promo footer or legal disclaimer, and Beefree automatically applies it to every email using that row. 

3. Helps you catch mistakes before they go live

Beefree helps your team build error-resistant emails with features designed to catch issues before they go live. 

  • Smart check: Beefree’s Smart Check automatically checks your designs and alerts you of any red flags, such as missing links, heavy images, and large HTML files, so you can fix them before they cost you. 
  • Built-in approval flows: Ensure the right eyes are on every email. No more chasing approvals in Slack or email threads.

Learn more about sending error-free emails with Beefree: https://beefree.io/blog/error-free-emails-beefree

4. One click export from Beefree to Pardot

With Beefree’s native Pardot integration, your team can export emails with confidence. What you see in Beefree is exactly what your audience gets in Pardot. No weird spacing. No layout issues. No surprises.

Real results: How USC Marshall scaled campaign production with Beefree

In 2020, Dwayne Rice, Senior Associate Director of CRM Management at USC Marshall, was juggling comms for 11 graduate programs. Each had its own drip campaigns, deadlines, and unique audiences.

“I needed an efficient process to crank out emails,” he said.“But Pardot’s editor was slowing us down.”

By switching to Beefree, Dwayne’s team was able to build reusable templates and modular elements—cutting production time and removing the need for third-party vendors.

“Beefree has enabled us to create content efficiently enough to bring multiple processes in-house and discontinue relationships with several vendors, saving time and money.”— Dwayne Rice, USC Marshall

Read the full case study

Stop letting Pardot’s email builder hold you back

From higher ed to healthcare, SaaS to nonprofits—teams across industries are making the switch to Beefree not to replace Pardot, but to complete it. With Beefree you can:

  • Design polished, responsive emails in minutes
  • Collaborate seamlessly with writers, designers, and stakeholders
  • Export to Pardot with full confidence

Start building better emails for Pardot today — Try Beefree for free

Or if you're a non-profit, apply for a $1,000 annual credit!

(source)

Frequently asked questions about using Beefree with Pardot

1. How does Beefree integrate with Pardot?

Beefree serves as an external email design tool that integrates seamlessly with Pardot. Users can design emails in Beefree and export them directly to Pardot as new templates or update existing ones. This integration streamlines the email creation process by allowing for more flexible and visually appealing designs than Pardot's native editor.

2. Does Beefree provide analytics for email performance?

Beefree focuses primarily on email design and does not offer built-in analytics. However, once emails are exported to Pardot, users can leverage Pardot's robust analytics and reporting tools to track performance metrics such as open rates, click-through rates, and conversion rates.

3. How does Beefree enhance email design capabilities for Pardot users?

Beefree offers a no-code, drag-and-drop email builder that allows users to create visually appealing emails without HTML knowledge. It integrates seamlessly with Pardot, enabling users to export their designs directly into the platform, thereby overcoming Pardot's design limitations .​

4. What collaboration features does Beefree offer compared to Pardot?

Beefree offers robust collaboration features that surpass those in Pardot, including:

  • real-time design-specific comments
  • role-based permissions
  • approval workflows

all available directly within the email design environment. These tools make it easier for teams to co-create and review content without switching platforms. In contrast, Pardot’s collaboration tools are more limited and typically rely on Salesforce’s broader ecosystem for team coordination.

5. Does Beefree support features like AI copywriting or mobile optimization?

​Yes, Beefree supports both AI-driven copywriting and mobile optimization features. Its AI Writing Assistant enables users to:

  • generate email and landing page content or revise existing copy
  • create alt text for images
  • translate content to different languages

Additionally, Beefree's Mobile Design Mode allows for editing of mobile-specific styles, such as:

  • text alignment
  • padding
  • font size
  • and more

to ensure responsive and user-friendly designs across devices.

6. Can Beefree help maintain brand consistency better than Pardot?

Yes, Beefree helps maintain brand consistency more effectively than Pardot through its Brand Style Guidelines feature, which lets teams lock in brand colors, fonts, and content blocks across all email designs.

Users can also create reusable templates and design systems that ensure uniformity, even across multiple teams or clients. While Pardot offers some branding controls, it lacks the same level of built-in visual governance and flexibility found in Beefree’s design-focused environment.

Send Error-Free Emails with Confidence Using Beefree

Learn about the Beefree features that can help you and your team catch mistakes, streamline collaboration, and send with confidence every time.
Beefree team
Beefree team
15 Apr
2025

We’ve all been there: You craft the perfect email, hit “send”, and just as you settle into the satisfaction of a job well done, someone slacks you: “Hey, something doesn’t look right with that campaign.” 

If this sounds familiar, you should know that you’re not alone: According to the 2025 Really Good Email Survey “90% of email marketers say they have a history of noticing mistakes in their emails after they’ve hit the send button.

This becomes especially common when your team constantly juggles multiple campaigns or makes edits until the last minute. Sadly, even the smallest mistakes don’t just slip through the cracks; they cost you.

Luckily for us all, mistakes can be avoided. And no, not by lighting a Pre-Send Protection Candles™ and hoping for the best. But rather by equipping your team with the right tools that work with your team – not slow them down. Let’s talk about it!

Building your team’s safety net for mistake-free emails with Beefree 

When everyone involved in the email creation process is aligned and supported by smart systems, executing mistake-free emails becomes second nature. Instead of scrambling to do damage control, you’ll want to set up the tools and processes that help your team focus on what they do best: creating emails that connect, convert, and confidently represent the brand.

In this article, we’ll discuss how you can use Beefree to: 

  • Reduce human errors 
  • Implement systems of checks and balances 
  • Establish guardrails & frameworks for on-brand email design

1. Catch mistakes before they happen with Smart Check

Missing links that lead nowhere? Forgotten subject lines? HTML emails that get clipped in Gmail? It’s easy to make little mistakes that derail your campaign’s performance. 

Learn more about Smart Check → 

Beefree’s Smart Check automatically checks your designs and alerts you of any red flags so you can fix them before they cost you opens, clicks, or conversions. Think of Smart Check as your built-in QA partner who will catch:

  • Missing links
  • Heavy images that could slow down email load times
  • Missing subjects & preheaders that impact engagement
  • Missing alt text on images that hurt your email’s accessibility
  • Large HTML files that might affect deliverability (or get clipped in Gmail)

2. Keep every email on-brand with built-in guardrails 

Most of us don’t nail the perfect campaign on the first try. Great emails are a team effort. However, when multiple teams are involved in the email creation process, branding can quickly go off the rails. 

A misused font, clashing colors, or buttons that are too small to click don’t just make emails look disjointed—they can damage your brand’s credibility.

With Beefree’s Advanced Style Kit, you can set clear, predefined guidelines for fonts, colors, spacing, and more—so every design starts on the right foot. Once configured, all new emails automatically inherit your brand styles, reducing the need for constant oversight and minimizing errors.

Advanced user permissions let you lock down specific design elements, giving you full control over what can (and can’t) be edited. That means anyone on your team—regardless of design expertise—can confidently create emails that look and feel like your brand.

3. Empower your team to create with confidence with reusable content

When your team isn’t bogged down by the cumbersome process of creating content from scratch (or fear of going off-brand), they can move faster—and with far more confidence.

With Saved and Synced Rows, you can provide your team with pre-approved content blocks—like headers, footers, and other commonly used design elements—that they can use in their designs without creating them from scratch. That ensures design consistency, eliminates redundant work, and makes email creation a lot faster.

Learn more about Saved Rows → 

4. Ensure your team is aligned with centralized reviews and approvals:

Creating the perfect email often takes a team of designers, copywriters, marketers, and other team members working together. But when multiple people are involved, endless back-and-forth and feedback scattered across multiple conversations and channels can slow things down, lead to miscommunication, and ultimately cause mistakes. 

With Beefree’s built-in commenting, your team can collaborate and share feedback where the work is actually happening—right inside the builder. And if you’d like to involve external reviewers into the review process, you can do that as well. 

Learn more about commenting → 

Plus, with Beefree’s built-in Approval flow, you can ensure your designs are reviewed and approved by the right stakeholders. Stay aligned with real-time notifications on design changes, lock edits on approved content, and get a clear view of project status for smoother team collaboration and high-quality results.

Learn more about Approvals →

5. Need an additional pair of eyes? Use the power of AI to support your team

Take some weight off your team's shoulders and use AI to support them in the final stretch. Whether it’s catching typos, flagging inconsistencies, or suggesting optimization, AI can be a saving grace when deadlines are creeping in.

For those times when you can’t remember the difference between “there, their, and they’re,  Beefree’s  AI Writing Assistant is there to help. This eager-to-learn helper can  review your copy for grammatical errors, tone of voice, and even share suggestions for making it just a bit more compelling. Our AI Writing Assistant can also seamlessly translate content or automatically generate ALT text for images to enhance the accessibility of your emails. 

Learn more about AI-powered content creation in Beefree →

The tangible cost of email mistakes

Mistakes don’t just impact performance; they slowly erode credibility. What starts as a small oversight can be a massive inconvenience for your readers, sending them straight to the unsubscribe button. As for your team, mistakes chip away at their confidence. Instead of brainstorming for the next campaign, they’re scrambling trying to figure out how to do damage control.   

When done right, email is a powerful tool for connecting with your audience. But a single mistake can unravel that connection and undermine trust.

  • A missing or broken links can interrupt your subscribers’ journey to conversion, negatively impacting campaign performance.
  • A missing subject lines means your emails won't stand out in the inbox, hurting your open rate
  • An awkward typo might signal a lack of attention to detail
  • An off-brand design can make your brand look disorganized
  • An email that gets clipped in Gmail because it’s too big means some subscribers might never see the full email content.

Design error-free emails and send with confidence with Beefree 

Beefree helps teams of all sizes create polished, on-brand emails—without the risk of costly errors. With built-in safeguards, streamlined approval flows, and collaboration tools that keep everyone aligned, Beefree acts as your team’s system of checks and balances. From first draft to final sign-off, you’ll have everything you need to send with confidence, build trust, and get results.

Try Beefree's Business for free for 15 days and get access to all of Beefree’s tools that help you catch mistakes, streamline collaboration, and send with confidence every time. Or schedule a call with one of our experts to discover everything Beefree can support your team.

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
Beelo here 👋 Got questions?
1