Workshops

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 the Litmus email and show you how to implement modular design tactics to 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 template to 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 new module 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 move the 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 drag the 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 will format 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 nearly all 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 can edit the text to read “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 Properties panel to the right, let’s can change the text color to white, then adjust the button’s color.

Screen Shot 2015-10-07 at 11.21.45 AM

Finally, still in the Content Properties panel, let’s alter the 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 to make 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 Properties panel ,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!

Our Reader Score:

Total: 1 - Average: 5

Kelly Shetron