We love anything colorful in emails . One style we totally love (and see a lot) is color blocking, where about half of an email has a bold background color and the other half is white. It's a simple technique that goes a long way in inboxes. In this tutorial, we'll show you how to create your own color-blocked email in a few easy steps. We will also see how: Add multiple HTML background colors in an email Establish multiple columns Format text (color, size, line height, links, etc.) Fine-tune an email by adjusting spacing and padding Inspiration: Off-Screen Send Offscreen is a print magazine and weekly newsletter "with a thoughtful, human-centered approach to technology and the web." Its newsletter is called Offscreen Dispatch, and we've long admired its simple and distinct design.
Offscreen uses the same color blocking technique in every email, and the really nice effect makes the email look like it's a magazine page. The top part, where web designer Kai Brach writes a note to subscribers, is still pink. The rest of the email is still blank. Check it out: Color Blocking Email There's nothing particularly fancy here — no art or photography — but the dynamic layout, well-formatted text, and color-blocked design bring this email E-Commerce Photo Editing Service together. Step 1: Build the structure Open the BEE editor on MailUp and start with a basic blank one-column template. Before we start dragging structural elements, let's take a minute to review the off-screen distribution email and identify the layout components. Here is a tagged version: Marked version The email alternates between single-column and two-column structures, which is easy to put together in BEE.
Drag over the corresponding line formations in the Line menu on the right. We will need the first two options for this email: Line Here's what our email looks like with the line structures in place: color blocking Step 2: Organize content blocks with text/images Now that we've assembled the bones of our email, drag over content blocks that match the type of content (text and/or image) we want in each section. Then paste the text and drag the images. Here's a 1-2-3 on how to get your content located. Starting with the first line (the header), here's how: (1) Pull in a two-column structure: