How to Create Banner with Stripo Email Template Designer within Minutes
Hard to imagine a modern promo newsletter without a banner. You have seen thousands of examples of good and bad ones.
Perhaps, you already know which kind of a banner you need.
But how do you create one? Usually, you need to find a proper picture, edit it in Photoshop, then export it to the Template Builder you use, and check if it has been exported properly. In case you need to change something, even a small letter or a coma in the message, you will need to go back to Photoshop and edit the banner again. Good thing if have immediate access to photoshop. Complicated, and causes lots of inconveniences.
Stripo allows creating banners from scratch. Also, it splits your image or a built banner into layers and allows editing, and optimizing each layer separately without leaving our builder. Saves you lots of time. Embedded photo editor, plenty of decorative fonts, rich color palette, and bank with thousands of available images — all these options are meant to facilitate your work.
Creating a banner, you should have an idea of what it should look like and what exactly you need.
We are going to review some most used types of banners and will show how to implement your ideas with Stripo.
Most used types of banners
List of the most frequently used types of banners:
➣ A single picture, and a text, CTA words or even button
➣ Use of two-three images for a banner
➣ Frames
➣ Transparent additional images
➣ Banners with products snippets, and value proposition.
Picture as a background for the main text
Take a look at this banner. Creating it won’t take long. Upload your picture or choose one from the bank. Add text. Stripo offers 50 standard and decorative fonts. Choose the one you like, combine them.
How to add text:
Right above the picture, on the tool panel, you will see “add text”. Click on it, place the text area wherever you want on the banner image. Choose font, size and text color.
Note! Don’t hesitate to use any decorative font you like for banners. They all will be recognized as a picture by the recipient’s email clients and will be displayed correctly.
This is another example of a simple, but the catchy banner, a perfect alternative to plain text confirmation message. The company above may use this banner from time to time for the same occasion.
Spending your time on creating a perfect banner is worth it. Create it once and use it often.
Banner with a few pictures in it
This type of a message can be divided into two sub-kinds:
a) the ones with a logo
b) the ones with a few different images
We are not talking about frames here. We will do it below.
Important! All the pictures except the main one will be uploaded to your editor as additional images.
The ones with Logo
If you want, place a logo on the banner. In order to place it or any other additional picture with the equal indents from at least three sides, you will need our “hover to Hovered Sticky Zone” option.
You just insert the additional image, and the system recommends you where to place the logo. Hold “ctrl” button, and place the picture where you want it to be. The “Hovered Sticky Zone” option will align it to the 3 sides. This way, your email looks neater.
The ones with a few different pictures
A colorful picture makes it difficult to find a proper font color for the text over the banner. Using an additional blank picture will be appropriate enough in this situation. In the following example, we covered half of the banner with an additional picture and wrote our ads over it.
Frames
Frames are used to either separate two images within a banner or to emphasize the text.
You can use our frame or use yours. Any photo editor offers many of them.
Adding your own frames, you can create more unique newsletters. Ask your designer, if you have one, to draw some special frames for you or you can choose ours, as some of them are presented in the “general” block.
Please, be acknowledged: uploading a picture, that has already been framed, in this case, you will not be able to make any changes to it within our or any other template builder.
Frames are also uploaded as additional images.
Please, take a look at these two banners: the first one without a frame, the second one with a black frame.
The first banner looks fresh, but you will hardly pay attention to the value proposition they offer, while the second one looks classy, with stress on the text. Poor chances you will not notice the offer.
Note! Make sure the body of the frame is transparent.
Transparent Additional Images
Any newsletter is a flight of imagination. You can add anything you wish. We also recommend adding seasonal pictures. That would make your message match the holiday spirit.
In this template, we decided to use a transparent snowflake.
Transparent pictures help you make slight changes to your newsletter without changing the total design.
Besides, it is a good way to display some of your products and add text/value proposition.
Please, take a look at the two examples below, and compare them:
Almost impossible to read the read the offer on example 1, as the text is placed right on the products the company is promoting.
Just a small detail on example 2, transparent layer, makes it easy to read the text. And as a bonus: you can still see the products the company is advertising.
Banners with products snippets, and value proposition
While most companies use banners to display only the proposition/the discount amount, you can place some of your products on it to exhibit them.
Yes, it will be a good idea to add the products’ snippets to the banner. You can decorate them if you please.
Note! All the images you upload should have a transparent background if you are going to use another background. Especially, when it comes to additional images.
We uploaded “Sale” stickers as additional pictures. In order to make the newsletter unique, we recommend using your own brand stickers. You may create once, and use them for a long time.
GIF animated banners
GIFs animated banners is a complex subject, and we have already discussed why we should use them in email newsletters. Soon, we will show how to create animated GIF banners with Stripo.
Proper Colors for Banners
You are welcome to use your company colors in the header, logo, and footer. In banners, you can try any colors you like. At first, you need to define what colors you are going to use. For this purpose, consult the universal Color Emotion Guide. Then, make sure they match your company colors. We recommend using Paletton to find the matching colors
Stripo offers a rich Color Palette
Let’s see what you can do with that.
Games of Colors
In the example, we just used an additional picture over the banner image, as a background for the text. It seems, that “2018” is transparent. But it is not. We applied font color similar to the additional image color, but the one which looks a bit lighter. This made the text look like it is transparent. By using our rich palette of various colors, you can yourselves create such interesting unique banners.
I absolutely love this banner. Seems like it is animated, and moving. Real waving banner. How did we obtain this result?
At first, we uploaded the image with the teapot. Then, we uploaded the black one as an additional image. And used just 2 similar font colors from our rich palette.
Test out your email
No matter what kind of pictures you are using, no matter what size of them you apply, we strongly recommend testing your email before sending it out.
Within our template builder, you can preview how your message will be displayed both on a desktop and mobile devices.
Tips on how to build a perfect banner:
➣Colors. Use only matching ones
➣ Size of the pictures… Keep the picture size within norms, where maximum width is 600px
➣ Compress the pictures
➣ Don’t overload your email. 1–3 pictures in a banner is right enough
➣ Include CTA words to raise the CTR rating
➣ Make the email correspond the theme/goal of the newsletter
If you have any questions, please feel free to contact us at any time.
Stripo Team and I sincerely wish you all the best.
