Expires In

14 : 14 : 14 : 14

Copy Discount Code


timer ~ 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 https://prnt.sc/qk0s4o 3. On the side panel, remove all the "Left" paddings. https://prnt.sc/qk0tax 4. There's a slight chance you might need to set the alignment again. Hope this helps.

You might be interested in

previous next
06 June · 15 min read
10 Best Email Template Builders for 2022

Do all email template builders seem alike? You are now confused about which one to choose for your email campaigns, aren’t you? No wonder, as there are so many of them.  We will survey the most popular builders to find their distinguishing features to help you find the best HTML email builder for your current needs. I will try to create one template in all these editors with the same media files to see if the builders differ. The best...

Design Marketing Templates
24 May · 18 min read
Best Fonts for Email: Usage Tips and Tricks

One of the most striking concerns in the email production process is choosing the right font. Weight, height, width, color, shape, spacing… Does everything matter? Yes, it does, but also one of the most crucial things is to choose legible typography. In this post, we're going to show you how to choose the best professional font for email. Design beautiful emails with Stripo by using prebuilt templates Browse   HTML email fonts: General rules to follow There are three ground...

Design Marketing
Greatest Examples of GIF animations in Emails_Cover Image
27 October 2021 · 10 min read
16 Great Examples of Animated GIFs in Emails

GIFs in emails will be of great use if you want to showcase your product, draw users’ attention to certain elements, or just slightly decorate your text. In this article, we have provided some of the best email gif animation examples. Examples of animated GIFs in emails Here’s a compilation of the best examples with GIFs in emails. Each GIF fulfills its mission. 1. Adidas (Source: Email from Adidas) Adidas used email animations to show what color options they had....

Design Marketing
08 April 2021 · 17 min read
14 Best Email Signature Design Examples

Good email signatures help us build our business and make a lasting impression on potential clients. Since email signature is the last thing people see in emails, we should make them creative and memorable. Let's examine useful tips and real-life examples of email signatures from famous companies and their appropriate use in personal emails and newsletters. Please be advised that all types of businesses require different professional email signatures with detailed contact information, job title, and much more. Use this...

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