
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:

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

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").

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:

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!

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

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)

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:

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.

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)

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!