Tutorial: How to design an email footer

Step 1: Set up the 3-column structure

To recreate the structure of the footer in BEE, we'll usea 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 emailto get started.

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

Step 2: Arrange content blocks

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

From the Content menu, we'll pull in each of these items to recreate the layout.First, text:

Then a divider:

Then text:

And then the button:

Here's our first section populated with content placeholders:

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

Note 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:

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

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

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:

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:

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.

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.

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 tobe customized.

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.

Voilá!

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.

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.

Here's our footer!

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.