Workshops

Tutorial: How to design an email footer

Tutorial: How to design an email footer

Readers naturally scroll to the bottom of an email—to the footer—when they’re in search of more information, like where to find your brand on social media, how to update email preferences, how to contact your company, and more. Emails that follow design best practices and are like a teaser (clear and brief) will be low on text and focused on a single call to action, making the footer the best location for fine print and additional details. Maximize this space by building a footer that’s informative, well organized, clutter-free, and mobile optimized. In today’s workshop, we’ll show you how.

Inspiration for our email footer design

In our Best Practices for Email Footer Design post, we reviewed all the information you can and should (and sometimes must) include in your footer, along with best practices for formatting. One of the footers we highlighted, from DC Shoes, is a great example of strong organization and a dynamic layout.

Screen Shot 2016-01-21 at 5.40.18 PM

Using headers, HTML background colors, and a clean back-and-white color scheme is a great approach to optimizing space while improving readbility. The three-column layout is also mobile responsive, so text is easy to read and buttons and links are easy to tap on a small screen.

IMG_3491

In this post, we’ll show you step by step how to create a footer like this using the BEE editor. Let’s get started!

Tutorial: How to design your email footer

Here’s our video recap:

Step 1: Set up the 3-column structure

To recreate the structure of the footer in BEE, we’ll use a 3-column layout, followed by a one-column structure for the fine print (*Place an order of $29… etc.). As always, we’ll navigate to the Structure menu and drag-and-drop our selections into the body of the email to get started.

Screen Shot 2016-01-31 at 7.22.10 PM

After dropping in our two structures, the layout of our email looks like this:

Screen Shot 2016-01-31 at 7.23.52 PM

Step 2: Arrange content blocks

Each of the columns has the same basic structure: text, divider, text, then button/icons.

dc shoes markup

From the Content menu, we’ll pull in each of these items to recreate the layout.

First, text:

Screen Shot 2016-01-31 at 7.34.58 PM

Then a divider:

Screen Shot 2016-01-31 at 7.35.35 PM

Then text:

Screen Shot 2016-01-31 at 7.36.12 PM

And then the button:

Screen Shot 2016-01-31 at 7.37.04 PM

Here’s our first section populated with content placeholders:

Screen Shot 2016-01-31 at 7.37.32 PM

After we pull in the remaining items, the footer is prepped to customize and looks like this:

Screen Shot 2016-01-31 at 7.40.50 PMNote the center section has social sharing icons instead of a button. Check out our post on how to customize social media icons for a quick walk-through of how to select and format the look of these buttons in BEE.

Step 3: Customize and format text and CTA buttons

In each section, we’ll customize the text. Before formatting, the footer looks like this:

Screen Shot 2016-01-31 at 8.02.01 PM

First, we’ll bold and center each header, and update the font color to black. The font type and size looks good as-is.

Screen Shot 2016-01-31 at 8.04.37 PM

Then we’ll center the second lines of text and decrease the font size.

Screen Shot 2016-01-31 at 8.06.36 PM

The CTA buttons also need to be customized. For each one, we’ll…

  • Change the color to black
  • Extend to the right width (we chose 85%)
  • Decrease border radius to 0 (for squared off corners)

Each of these changes is easily made in the Content Properties menu on the right:

Screen Shot 2016-01-31 at 8.12.28 PM

For an in-depth tutorial on CTA button formatting, check out our post How to design bulletproof buttons in email. Our customized buttons now look like this:

Screen Shot 2016-01-31 at 8.15.45 PM

Step 4: Update the background color

To start creating the clear division of content from the DC footer, we need to update the row background color to gray, while the content background remains white. We can simply activate the row by clicking to the right or left of our content and updating the Row background in the Structure menu.

Screen Shot 2016-01-31 at 8.20.21 PM

In the second row of content, where the fine print is listed, we will also make the Content background the same color as the row background.

Screen Shot 2016-01-31 at 8.22.25 PM

We’re getting close! If you’re wondering how we can create divisions between each section, the answer is by adjusting the borders. Keep reading to see how.

Step 5: Adjust borders and padding

To create space between each section of content, we need to activate the row and check out the Structure menu on the right. Under Column Properties, there’s a menu for each column to be customized.

Screen Shot 2016-01-31 at 8.28.48 PM

Select Column 2. Turn on More options in the Border menu. Now we can adjust the border around the center column on the top, bottom, left, and right. To create a gray border on either side, we can add one on the left and right.

Screen Shot 2016-01-31 at 8.35.23 PM

Voilá!

Screen Shot 2016-01-31 at 8.36.38 PM

The final step we’ll take is to adjust the padding of the content within each section. For instance, each header should be closer to the divider beneath it to more closely mimic DC Shoes’s format. We can select a header one by one and decrease the padding beneath it in the Spacing menu.

Screen Shot 2016-01-31 at 8.38.39 PM

Then we can format the dividers themselves. Once its selected, the Content Properties menu allows us to adjust the thickness, color, and width of each one. In this case, we’ll make each one thicker and the same width as the CTA buttons (85%) so they’re aligned. We’ll also change the color to match the background.

Screen Shot 2016-01-31 at 8.42.18 PM

Here’s our footer!

Screen Shot 2016-01-31 at 8.43.13 PM

It’s pretty amazing how closely it matches the original. To preview how it will look on a phone, we can select Preview from the Actions menu in the upper left corner.

Screen Shot 2016-01-31 at 8.49.54 PM

Design a great footer and go Pro!

The DC Shoes footer is a great example of how smart design can make a lot of content easy to scan, especially on a smaller screen. With effective use of borders and a basic color scheme, the footer is elegant and well organized. If you’re not already using BEE, sign-up for a BEE Pro free trial and have access to additional templates and design features.

Our Reader Score:

Total: 0 - Average: 0

Kelly Shetron