Stripo is a platform that allows you to build engaging, high-quality emails of any complexity in no time, with no coding skills.

In this article, we will learn how to create adorable email templates with Stripo.

Also, we have created an ACADEMY course where you can learn how to work in the Stripo platform and create high-quality emails in practice.

To take the course, you should have a Stripo account. Please follow this link to register for the course.

There are 4 ways to build your first email template with Stripo:

To use any of the aforementioned options, in the "Email Messages" tab, you need to click the "New message" button.

And choose the way that you find the most convenient for yourself:

This is the easiest and probably the most convenient way of building emails. In the "Prepared templates" tab, you will get inspired by the design of existing templates. You only need to choose the template you like, customize it to fit your brand design best, insert your URLs, and replace our images/texts with yours. That’s it. Your email is ready!

It works the best for email marketers that need to create many emails per day.

With BASIC, MEDIUM, PRO, and PRIME subscriptions, you have an opportunity to use our PREMIUM templates, which are designed in unique styles by our designers.
​

Besides, for more convenience, you can filter templates by type, season, feature, and industry or choose the newest templates.

Once you have decided on the template, you need to click on it, and a new window where you can edit, view, and test your templates will open.

In the "Basic Templates" tab, you will find:

In any of the templates, you can adjust, change, and remove content at your own discretion. You can also save structures, containers, or stripes as Modules to reuse them in your future email campaigns.

Stripo offers an open HTML code editor where professional coders can build a totally unique email. This option is also useful when you need to import a custom email template into Stripo and adapt it to the editor, making it editable.

This option suits the worldly-wise designers best.

Please follow this link to read instructions on how to adapt a custom HTML code to activate the drag-and-drop functionality.

"Pre-Built" modules are a collection of different blocks. You can combine them to create new emails for different purposes and use them repeatedly.

Our library consists of a considerable number of already prepared modules that our designers have thought to the smallest detail. These modules are elegant and attractive; some contain pre-configured smart or AMP elements.

You can use these advanced modules as a basis for similar elements of your emails by replacing their content with your own.

The collection is replenished every day and has more than 250 modules. All these modules are at your disposal. You can find them in the "Content" → "Modules" → "General Modules" tab.

To use any of them, just pull them into your email template, and click on the block you want to edit.

I offer to start from the Appearance menu because all the styles you set in the "Appearance" menu will apply to the entire email.

You set design styles for a certain element just once, and these design styles will apply to this element across the entire email no matter how many times you are gonna use it. And there will be no need to work on its design every time from scratch.

This will save you a lot of time when editing the entire email template, and you will not need to change it in parts by clicking on each element separately.

In the "Appearance" menu, you can get access to the following settings:

In this tab, you work on your email design styles:

Stripe is the email message area containing structures, containers, and basic blocks. Below, we will show you how to work with the stripes.

To add stripes, click the "+" icon at the bottom left corner of the stripe.

Every stripe might have its type: Header, Content, Footer, Info area. You can set it manually in the "Message area" settings.

Using different types of stripes can be helpful for advanced adjustments.

In the future, the stripe design styles will directly depend on their area.

You will be able to:

Sometimes we need to highlight certain words or entire sentences to emphasize the importance of information or just visually separate email sections.

This is when Headings help. To apply headings to a certain part of the text, we need to highlight the text and choose a necessary heading in the text formatting menu.

Then, in the Settings panel, you set the necessary font type, size, style, and color for the headings as well as line spacing.

Buttons in emails are always a call to action. They invite users to go to the website, place an order, follow on social media, leave a comment, vote for the best product, etc.

The button menu allows you to set some default parameters that will be applied to all buttons in the email, so you can set:

Responsive email design comes as no surprise today, as we all know that mobile-friendliness, aka mobile optimization, is no longer just nice to have; it’s a must.

To make your emails fully legible across any device, you can apply font sizes to headings, to different stripes, to buttons, etc., that differ from the desktop version of your email. You can also work on internal paddings inside containers and hide/disable certain elements on mobile devices.

To do so, you need:

All emails that you build with Stripo are responsive by default.

The option allows the image to adjust to the width of the mobile device's screen. Warning: Adaptivity only works on devices that support it.

However, you can disable the "Responsive image" design for some email elements.

While building an email template, you will be shown a mobile icon. This means that you can adjust the element for the mobile display by clicking on it.

For example, configure padding for the mobile view:

If you want to hide some elements on mobile devices, you don’t have to cope with HTML code anymore as now there is the "Hide on mobile" option in the Stripo editor.

With this option on, you literally forbid certain elements to display in the mobile version of your email.

We have finished with our general settings and applied common styles to our email template.

This will save you a lot of time when editing the entire email template, and you will not need to change it in parts by clicking on each element separately.

Move on!

There are three ways of doing it:

Here, you can just drag and drop the image you are about to use for your campaign or upload it from your computer by clicking the "arrow" and selecting the very image from your computer.

Please, be aware you can upload images in JPEG, GIF, and PNG formats with a maximum size of 3 Mb and image resolution of 4000 х 4000 px.

If you do not have the banner image saved to your computer, you are welcome to insert a link to this image on the web.

Paste the link to your image in the "External link" field.

If you are going to use this image just once, in the dropdown menu, choose the "Leave as external link" option (as shown in the example above) and click the tick.

If you are going to use this image for other email campaigns, click the "Project" tab above, insert the link, choose the "Download to the gallery" option, and click the tick.

When you upload images to the gallery, as shown in the example above, your images are stored in your personal gallery. You just need to switch to the "Email or Template" tab.

Images here are sorted by the dates, the most recent → the oldest ones.

If the list of images is too long, you may search by its name.

You need to click on the selected image to use one in your current email template, which will automatically appear in your email.

If you put an image into the folder "Project", you will see it available in all email messages and templates of that project. You can save an image here if you are going to use it in many email messages and templates of the current project:

Please find the "Common" and "Stock" tabs in the Image Gallery.
​

In the "Common" tab, you may find images for any event.

In the "Stock" tab, you search for a necessary image. Just type in your search query, and the system will you the images that meet it.

In the previous paragraph, we showed how to upload and store images.

Additionally, working with the "Image" block, you can:

The image rollover effect helps you entertain and engage customers. Moreover, it saves you precious space in emails, as you can hide product details behind its photo. You can also play games with recipients by making them "search" for the coupon, etc. There are many reasons why you need to add an image rollover effect to your emails.

To activate this effect, toggle the "Rollover effect" button and upload the second image — edit it if necessary.

Let's work on the images but with more features. In this case, the "Banner" block will help us.

It is said that the banner is the face of your newsletters. Hence, you need to work thoroughly on it.

The banner always grabs the users' attention. Most often, it delivers the main offer of the email.

Our email banner generator works as a mini-photoshop. When the banner is finished, it is like a picture, and when you’re editing the banner, it breaks down into layers and filters.
​

if you need to place any text over the banner image, click the "T" button on the settings panel above. Once it gets light, you need to left-click this image again;

Important to note: Once your banner image is added, you can make all the editing steps in any order you like. For instance, insert an additional image, add text, and only then apply fonts.

The magic begins when you finish working on your banner and click on any other email object. All the layers, aka elements, get together inside the block and make the banner. The banner will be mobile-optimized.

If you would like to add a video to your email to make it more interactive, the best way to do it is to use the "Video" tool in the Stripo editor.

The "Video" block allows you to create a beautiful thumbnail image for your video, which contains a link to the video itself and the video's title.

The panel Video block allows you to customize the thumbnail’s appearance: you can add your own thumbnail image, change the Play button, change the title, etc.

Most email clients don't support playing a video directly in an email.

However, there are a few email clients that let users enjoy watching videos in emails if we add an HTML5 player: so far, it’s Outlook 2011 and 2013 for Mac OS, and AppleMail on MacBook, iPhone 7, 8 and X.

In order to embed the HTML5 player, your video clip must be uploaded to your own server in the formats MP4 and WEBM.

Please follow this link to find detailed instructions on how to embed a video player right into an email.

Done, we have learned how we can work with images in the Stripo editor; let's discuss how to add text to the email template.

There is no email that goes without any text in it. With the texts, you inform users about any events, sales, etc.

We already know that it is better to start working on an email design in the "Appearance" tab. Please be advised that when you select a block separately, you will open two Settings panels simultaneously: The sidebar and the top text formatting menu.
​

In the sidebar, you can set the text color or background color for the entire block and alignment, line spacing, and additional indents.
​

In the text formatting menu, which is located at the top of the page, you can Improve your text using artificial intelligence AI, work on the AI text styles, and Fixed Height where you can apply the needed height of the block without using the Code Editor and set the alignment for it, Headings, Paste links, Increase/decrease Indent, Add merge-tags, Symbols, Emojis, Tables and Bullet lists.

We all use links to explain an unclear word or if we want to convey more detail to our readers. In this article, you will learn how to do this with Stripo.

To add a link to text, highlight the necessary word/text and click the label "Chain" in the top Settings panel.

Then, select the link type (protocol) that fits best in the left settings menu and insert its data.

To add an indent to text, highlight the necessary word/text and click the label "Increase Indent" in the top Settings panel.

In addition, you can "Decrease Indent" in the text block by clicking the label at the top Settings panel.

The merge tag is a piece of code specific to an email service provider that allows you to insert unique user data from your mailing list into emails. For emails created in the Stripo editor, you can add personalization tags (Merge tags), which allow you to add the name/surname/address and other customers' personal data individually.

Click on the text block and select the desired Merge tag in the top settings panel;

In this section, the most popular email services tags like MailChimp, GetResponse, eSputnik, etc. are already added, so after you export an email to the system you use, merge tags are automatically replaced by the data stored in the database of the corresponding service.

Please refer to this article to find more information about merge tag configuration.

The button is a very important element that affects your CTOR (click-to-open rate). Without a button, customers can’t buy from you or get registered with you.

In this screenshot, the "button color" stands for the primary color, the highlighted button color stands for the color your users see when you move the mouse over it, and the text color stands for the font color.

You can activate the "Highlight hovered buttons" in the Appearance tab and edit the color in the Content tab (Button block);

Be sure to enable the "Support for Outlook" option if you know that some of the recipients use Outlook. This option ensures the most accurate display of your buttons in MS Outlook email clients by inserting a special VML-code element. When this option is activated, the email message size can be increased up to kilobyte for each added button.

The spacer doesn't boost conversions or anything else. It's just a decorative element that makes emails look orderly and enhances the content perception.

Quite often, emails have the "Follow us on social media" block in emails. These blocks normally have social media icons with links.

You can add them to your emails with the "Social" block:

The main purpose of a countdown Timer block is to create a sense of urgency and give the feeling that "time is running out".

In addition to this, it could be helpful to count down to when a particular discount or offer becomes available. It can generate curiosity and keep people interested and coming back. At the specified time and day, the timer will show zeros.

Please, find more ideas and inspirational examples in our blog post: How to add a countdown timer in your email.

Normally, the "Menu" block is used in the email header to quickly take users to a necessary page on your site. As a rule, menus also contain a company logo.

Users can be redirected to a website or another element inside the email when they click on a menu tab.

Sometimes it is impossible to create an email using the editor tools following your design ideas. In this case, you can add HTML code with your own solution.

The amp-carousel component creates a carousel for displaying multiple images. You can customize the carousel's appearance and behavior by modifying its properties.

Enter your email template and drag the "Carousel" block into it;

Result:

Result:

Result:

Result:

To do this, please activate the "Custom preview" control and choose which type of preview suits you:

Result:

The Accordion block allows you to open/hide some pieces of the content when being clicked on. This element enables saving space and does not distract the customer with the information they may not need.

Set the background color, outline width and color, section text color, and font size.

Important to note: now you are working on the accordion’s section design.

In other words, this is what customers see when the accordion is not expanded;

AMP-form is very useful for those who would like to receive feedback or any other useful information from their clients.

Important note:

Difference between "Text" and "Multi-line text":

If you choose the "Text" type - your recipient's response can only be written in one paragraph.

If you choose the "Multiple Text" type - your recipient's response can be written in multiple lines. So, when you press an "Enter" button on your keyboard, you will be moved to a new line.

To do this, you should:

To find more information about Merge-tags, please follow this link;

To design this form, you need to:

Result in the preview:

After you create the Feedback form, you should configure your server to handle the requests of recipients, more details on how to configure data service are in our article.

So we sorted out 3 AMP blocks with you. However, it's important to mention that not all possible email services and clients support AMP functionality.

Here is an official Google page https://amp.dev/support/faq/email-support/.

Here you can check which email support services send AMP emails and which email providers have AMP support content.

Currently, this is the list of ESPs that do support sending of AMP emails:

In order to export a finished AMP email, please click on the Export button in the Stripo editor, choose "AMP support", and you will be able to export the AMP email directly to your ESP.

If you see that your ESP is not listed but it supports AMP technology, then you should export the email as AMP HTML — this export method saves the scripts that are appropriate for the MIME type. Import this file into the ESP that supports Google AMP for emails.

We have examined the work of all basic blocks and built an email template.

However, it often happens that we can use the created email content directly in other emails as well.

Modules are universal elements of an email template (containers, structures, stripes) that help reduce the time it takes to create an email. And Stripo platform allows you to create your own modules.

Modules allow you to save stripes, structures, and containers to modify (if needed) and reuse them over and over.

Please take a look at this page to find more information about the module's configuration.

If you would like to summarise the provided information in your email, a subject line and hidden preheader will help you.

This is the perfect way to expand the subject line of an email, explain the essence of an email, or announce a sale.

To set it for your email, switch to the "Settings" menu on the upper panel and insert the desired text in the "Subject/Title" and "Hidden Preheader" fields.

UTM tags (aka UTM codes or UTM parameters) help you measure the impact of each particular traffic source or marketing channel and see which advertising campaigns bring you less revenue.

If you want to quickly respond to any change in the website traffic and reallocate your advertising budget, UTM tags are a must-have.
​

UTM codes are bits of text you can add to a link that tell Google Analytics (as well as other analytics tools) a little bit more information about each link. Here’s a sample of what one looks like:

Following this link, you can learn more about adding UTM parameters via Google Analytics.

With Stripo, you set them easily. So to do this, you need to:

If you want to add your own UTM tags using other analytics tools, you have the ability to add custom UTM tags.

To do that, enable the "Custom UTM tags" control, which is also available in the "Settings" menu. Then give a name and paste a specific UTM tag/value.

Please be advised that all the added UTM tags will be applied to all links you’ve used in your email.
​
If you want to add the UTM tag to a specific link (not to all links in the email), manually add the UTM tag directly to the desired link.

Google provided marketers with a great tool for promotional campaigns in the Gmail app. Emails that get to the Top Deals (Top Picks) section of the Promotions tab can be brought to life by adding annotations.

Before opening an email, a client will see a highlighted discount code, a company logo, and other eye-catching elements of the annotation.

Note: Annotations for the Top Deals section are only available in the Gmail app of some mobile devices.

Stipo has a built-in tool that allows annotating emails for the Promotions tab with just a few clicks.

Each annotation can contain up to 5 elements. Let's see how we can add these elements to the annotation.

First, click on the Settings icon at the top right corner to open the template’s settings, then turn on the control responsible for Google Promotional Annotations:

Now we can see toggle buttons for 5 annotation elements. By using them, we can add the following elements to the annotation:

All these elements will make an email more noticeable and interesting to a customer.

It is important to note that the displaying of annotations should work only if the following conditions are met:

For more details and recommendations on Gmail promo annotations, please, read our blog post and Google's guide.

Stripo allows translating emails into all major languages (over 100). Communicate with your customers worldwide in the languages they speak. You do not need to manually re-create an email and translate the text in it; Stripo will do everything for you.

By clicking on the "Localization" button, you will be available to choose the Main language of the email and click on the "Chechmark".

After applying the main language, you can select additional languages; also, click on the "Chechmark" button.

Click on the "Translate" button then:

At the bottom of the page, you will see a pop-up window with the text that the email is being translated and then - that the translation was successful. After that, you will be able to open any translation by clicking on the "Open" buttons. The template will be updated, and you will see a different language version of the email.

Also, the translations are not perfect at this stage, so it is better to check them because the usual Google translator is used.

If you want to find more info about translation functionality, please follow this link.

To open a preview, click the "Preview" button.

The Preview mode – allows you to switch to preview mode in which you can see how the email will look on desktop (on the left side of the screen) and mobile (on the right side of the screen) devices.

You can find two types of preview - AMPHTML and HTML.

Test Button – allows you to use 2 types of tests:

Please keep in mind that for users of the "free" tariff plan, it is possible to send test emails only to the mailbox that is set in the profile.

This service shows how your emails will be displayed in various systems.

You can find out more information about this kind of test by following this link.

Export button – shows a list of all available exports from Stripo and allows you to export an email for future sending.

Stripo is currently integrated with over 80 ESPs (the number is constantly growing). In order to export your email template from Stripo to an ESP of your choice, you need to synchronize your accounts once, and then the email will be pushed directly to your ESP.

Our help center has a list of articles where you can find information on synchronizing your Stripo account with your ESP account.

After your email has been exported to your ESP, you will need to sign in there to send out this email to your contact base.

If your ESP is not on the list yet, you can always export/download it as an HTML file or archive, and then manually import/upload it to your marketing automation system.

Thank you for taking the time to read our articles. We hope you will find this information helpful.

​If you have any additional questions, please email us at support@stripo.email.

We would be glad to talk with you.