How to Design A Full-Bleed Vs Limited-Width Email Layout Design

How do you achieve a full-bleed email layout design? How about if I want to instead limit the width of my layout for a more boxed appearance? These are two questions we get asked a ton from users of the BEE editor.
In today’s workshop,¬†we’ll be showing you how easy it is to change the layout of your email design with a simple adjustment to the background and content color settings, but first let’s take a look at a few examples. Our inbox is full of emails with both types of designs!

Full-bleed versus Limited-width layout explained

A full-bleed layout of your email has an edge-to-edge appearance and it extends to the full width of your screen, typically more noticeable on desktop and tablets. A full-bleed layout is sometimes also referred as full-width or edge-to-edge.

On the other hand, a limited-width layout has your content boxed in within your email message. Intuitively, we sometimes call this a boxed layout, since the width of your email remains fixed in and doesn’t stretch out.

Here are a few examples of these two different layout designs from our templates available on BEE Pro. Notice that the American Pie and Fantastic Journey templates have a full-bleed layout design while the others, such as Pure Morning have a limited-width layout design.

BEE Pro templates

Our inbox is full of emails with both the full-bleed layout as well as the limited-width one! Here are a few more examples of real email campaigns from brands.

Full-bleed email layout examples

Check out these three recent examples of full-width email designs from Aperture, Holstee, and LitHub. Feel free to click on each image to zoom into the full email.

Aperture

Holstee

LitHub

Limited-width email layout examples

By comparison, boxed emails use¬†two contrasting colors, one color behind the content and one around the content. As we’ll see, light gray is a popular choice for background color. The boxed look narrows readers’ eyes on the column of content, potentially improving focus and legibility.

Here are three examples with emails from Crate & Barrel, Maple, and Moo. Again, feel free to click on the images to zoom in to see the full email.

Crate & Barrel

Maple

MOO

Which email layout is better?

So, which layout¬†is better? That’s a trick question. Both can be effective, and the best way to find out if your audience responds more or less to a particular style is to run A/B tests on your email design. Whichever method you choose, your design¬†should always be mobile responsive. And, if you’re already using the BEE editor, all emails you create will automatically be responsive to mobile devices.

Keep reading to learn how to quickly and easily change your email design layout!


Today’s workshop

In today’s workshop, we’re going to recreate a recent email from Litmus, shown below. This email currently has an edge-to-edge full-bleed design. Let’s walk through how to create this look with the BEE editor by using HTML background colors.

If you’re not already using the BEE editor, feel free to sign-up to a 15-day BEE Pro free trial and follow along!

As an overview, here’s our video tutorial:

 

How to create a full-bleed email design

In the BEE editor, we started with a simple single-column design. The header and body are comprised of live text, and we also added the logo, hero image, and the bulletproof button.

Here’s how the email looks before we include any background colors:

To create the full-bleed header from Litmus’s original email, we simply need to edit the row and content background color settings.

First, we’ll simply click on the row¬†we want to edit so that it’s highlighted with a blue border as such:

Now, in the Structure menu to the right, we can edit the row background color and content background color.

The row background color is the color of the content structure from edge to edge, while the content background color is the background color behind the center column of email content. For the full-bleed look, we need only to select the row background color of our choice and leave the content background set to transparent.

After updating the header font color to white, here’s how our email looks with the new row background color:

In BEE, whenever you want to create a full-bleed design, choose the row background color(s) of your choice, then set the content background color to transparent.

The row background color can also be changed from one part of your email to the next. In this email, for instance, we could select the second row of content and choose a new color, like pale gray:

In BEE, you have a lot of flexibility when it comes to customizing color.

Bonus tip: In the Body menu on the right, you can also adjust your content area width as well as the background color for the entire email at any point as you design.

How to create a boxed email design

Changing our email from a full-bleed layout to a boxed one is simple. First, select the header row once again. Go back to the Structure menu on the right, and this time, change the content background from transparent to white.

Here’s our updated email, before we make any other adjustments:

To complete the boxed look, we need to update the header font color…

…then update the background color in the second row to match the first:

One last trick: if we want to position the white Litmus logo against the dark gray background, we can create a new content row for just the logo, making the row background dark.

Just drag in a new row across the top:

Then add the logo as an image and update the background. The new look adds to the box-effect on the body of the content.

Design your next email design layout and go Pro!

So, what do you think? Do you prefer one layout to the other? The good news is that switching one layout to the other couldn’t be easier in the BEE editor! Try this out and sign-up to a BEE Pro free trial, which includes a number of professionally designed templates.

Design Beautiful Emails in the BEE Editor

Give it a try! Design stunning, fully responsive emails in our easy-to-use, drag-n-drop BEE editor. No HTML or CSS coding knowledge required. What more? It's free and online!

Take me to the BEE email editor