Design Structure
~ 6 min read
rate it
06 November 2017

The Usage of Stripes for Optimal Design of The Letter

Stripo / Blog / The Usage of Stripes for Optimal Design of The Letter

What are the stripes and why they are needed?

One of the most important goals of Stripo is to speed up the process of creating a rewriting. For this we have implemented a library of blocks, which saves you from the need to re-create the same elements from email to email.

For example, you can save each element of a footer or a header separately, and when you quickly create an email, quickly compose the same element from them. But there is a simpler way — just to save to the library a stripe that stores in itself the finished element entirely.

Stripes are the area of an email template that stores structures, containers, and basic blocks. Below we will consider how to work with stripes and what application they can find in terms of design.

The Usage of Stripes for Optimal Design of The Letter

How to work with the stripes?

Let’s consider how the stripes work on an example of a template from our library.

When you open the template, you can immediately see that the stripes define the logic of the email, breaking it into completed sections. While storing these structural elements in the library, when creating the next email it will be enough to add a saved stripe to the email and substitute the actual data.

Four fields are available for editing:

  • Stripe background color;
  • The background color of the content;
  • The background image;
  • Hide on mobile devices.

At first glance, it seems that the available settings are too small. But this is exactly the case when «less is more» and the available settings allow you to completely change the appearance of the email. How exactly, see below.


How can I use the stripes?

What are the stripes and why we need them already figured out, and now we need to understand how they will help us in creating a unique and attractive email.

Customization of the general background

Surely you faced with the fact that in each editor you can set the background of the email, which will be displayed in most mailers. But at the moment when you need to focus on a specific block or make a part of the background, for example, black, and the second white usually problems start and that’s when we first climbed into the code. In Stripo, this problem is solved by two clicks:

  1. Click on the stripe;
  2. Choose a color.

For the example below, the task was to highlight the block with the promocode and focus on it. It was decided to make this block part of the background, which allowed it to be organically written and not spoil the appearance of the email.


It can not be said that the use of blue only on the background of the container looks very bad, but going beyond the standard 600 pixels is another step towards bringing the appearance of the email closer to the style of the site.

Another version of the customization of the background appears when the corporate style uses patterns of different colors and they need to be combined with each other.

One of the solutions is to prepare the picture in advance, put it on the background and hope that your recipients will open the email exactly the way you want and nothing else. However, it does not happen, and it’s almost impossible to guess with the prepared picture. The problem is solved by manipulation in the code or we can simply create stripes with the blocks we need and set a background image for them.

In this case, you get rid of the need to prepare a picture in advance and guess how the subscriber will see the email. Now the desired background will be displayed equally well for any resolution.


Expanding the banner

There are times when a beautiful selling banner was drawn for the site and statistics show that it is clicked most often. There is a natural desire to make a mailing with this proposal and naturally, I want to use this picture. But the trouble is that the banner was drawn for the site and for email it is very wide. If such a banner is simply inserted into the email, then most likely the text will become unreadable and all the beauty comes to naught.

You can save the situation if you cut the picture correctly. We leave in 600 pixels all the most important and logically completed, and the remaining parts of the banner are inserted as a background in the strip. As a result, you get a banner that will be displayed on mobile devices logically intelligible, and on the desktop readers of the newsletter will see a full banner, as on your website.


And sometimes we just want to make the background become a continuation of the banner and carry only aesthetic pleasure, without the information component. On the example below, the banner background is a gradient. This could create discomfort when viewing a message if you just put a white or red color on the background. But with the help of stripes, you can put on the background the same gradient and the email looks like a single whole and each element only complements each other.


It is important to remember

Remember several important points that you need to consider when working with stripes to use them as efficiently as possible.

  • The bars are displayed in the same way as the normal solid background. From this it follows that they will be visible only on screens whose width exceeds 600 pixels;
  • Adding custom styles is important to remember that the stripe is the parent element for all containers, structures and basic blocks that are stored in it, so some styles may be inherited, which can negatively affect the appearance of the email and its adaptability;
  • The «Background color of content» setting that you specify in the stripe does not overlap the background color that you specify in the structure. To change the color of the structure from the stripe, you need to set a transparent background in the container settings;
  • When adapting a third-party template, you need to follow the step-by-step instructions to eventually get a responsive and fully editable template, ready for export to your ESP.

Matt David Harvey 2 years ago

Can we get rid of the space between the structure of the email and the end sides of the email at all? I want my email content to be to the left of the email I send out, not in the centre.

Hanna Kuznietsova commented to Matt David Harvey 2 years ago

Hello, Matt. Thank you for your question. Yes, you can do it in a few steps: 1. Left-click the text in your template. Above the template, in the settings panel, choose a necessary alignment (left, in our case). 2. Make sure you are working with a structure, not container 3. On the side panel, remove all the "Left" paddings. 4. There's a slight chance you might need to set the alignment again. Hope this helps.

You might be interested in

previous next
5 days ago · 15 min read
15 Best Ideas for St Valentine’s Email Newsletters

Searching for fresh St Valentine’s Day newsletter ideas to win new customers? Search no more! See how the world’s top brands nail the holiday campaigns.  Get inspired by the ideas listed below and implement them in our holiday email templates in no time. Designing romantic newsletters with Stripo is a piece of cake Use this template Valentine’s Day email marketing ideas Don’t focus on design only. These ideas implemented by famous brands will spice up your St Valentine's email campaigns. 1. Cut prices...

Design Marketing Templates
Email Design trends cover image
28 December 2021 · 11 min read
Email Marketing Trends for 2022

Technologies are constantly changing and developing. Yet, email remains one of the most powerful marketing channels so far. However, to keep up with the times and keep customers engaged, you need to know what’s happening in the world of email and what approaches are trending this year. We’ve divided all the trends into two groups: email marketing trends; email design trends. Email marketing trends 2022 Sticking to the trends below will help you run successful campaigns. 1. Personalization in emails...

Design Marketing Templates
Be always wide awake in recent email marketing news, guides, articles and how-to’s