Stripo is a platform that allows you to build engaging, high-quality emails of any complexity in no time, with no coding skills.
The platform offers:
extensive collection of 1400+ fully responsive email templates for any purpose and any business;
tools for building emails with interactive and dynamic content, aka AMP emails, with little to no programming skills;
automation of email production due to the Content Modules, the Smart Elements option for product cards, and Real-time content that allows you to edit/change data in email even after it’s been sent;
testing tools to check out how your emails render across 90+ combinations of email clients and devices — see emails with the eyes of your recipients;
a number of export options, as Stripo is integrated with over 75 ESPs and CRMs, including Mailchimp, eSputnik, and HubSpot;
professional support at all levels of your experience
high-level support at all stages of your acquaintance and work with the platform.
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.
Let's look at the editor tools a little closer:
You will enter the edit mode by clicking on any email message or template in your account. The entire editor in editing mode is divided into 3 parts:
The Settings Area;
Working space: is a Preview area at the same time;
The Top toolbar.
1. The Settings Area
It contains almost all the functionality of the embedded settings for editing email templates.
By switching to the mobile version, the same settings will be applied to the mobile version as well:
The Settings panel is divided into 3 parts:
Message settings – allows you:
to set a "subject/title" of the email (65 characters recommended), which will be displayed on the recipient's device before the email is opened and as a heading after opening;
to set a "hidden Preheader" (no longer than 100 characters), which will be displayed after the subject line to summarise the provided information in your email;
to add an "empty space" after the hidden preheader, which will help to avoid the effect of "capturing" the text from the email and placing it in the preheader;
Result after sending:
to highlight your email using "Annotate email for Gmail";
to add and configure "UTM parameters" in the email to track the performance of each link inside the email campaign. You can learn more about UTM tags in our separate article here.
To speed up email production and set one holistic style for the entire email, you need to work on the design styles in the "General Styles" tab.
All styles you set in the "General Styles" tab will apply to the entire email. How does it work? 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 going to use it. And there will be no need to work on its design from scratch every time.
The "General styles" tab contains the listed settings for:
1. General settings:
In General Settings, you can set up setting for the whole email:
set the General Background color of the whole email template as well as the Background image;
The General background color is the background color applied to the entire email message area. The background color will cover the entire message area if the email is opened on a desktop device. While on mobile devices, it is hidden.
The Background image is the image that will be applied to the email message over its background. To do this, you need to pick an image of the correct size and specify its position in the settings panel in the editor.
Click the "Background Image Repeat" control to apply your image to the entire email message regardless of length.
modify the Message Content width, which is 600px by default. Today, this is the most standard size among all email clients. Also, you can set any size between 320 and 900px;
adjust the Message alignment;
enable the Underline links control, which helps you enable or disable links underlining for the entire email template;
manage Responsive design activation:
Enabling this option may help to improve mobile displaying. However, notice that results may vary on different devices.
If this control is disabled, then the mobile version of your email message will look like the desktop one.
activate the Right to Left Text Direction:
This option allows you to write texts from right to left. Meant for those who write emails in Arabic, Urdu, and other languages that use the RTL script. Enable this option to make your texts, including numbers and punctuation, readable to people worldwide.
set a default Custom list styles for the bullet list; you will find more information about bullet customization here.
set up Default Structure padding, which will be used by default for all new structures added to email from the Content tab placed on the left side of your working space or while adding new Stripes (rows);
set up margins around Message.
Stripe is the email message area containing structures, rows, 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, or 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 Stripes tab, you can set up the following:
the font family, line height, and letter spacing for all types of stripes at once;
The chosen font family will be applied to all "Text" blocks in the email template except for Headings.
Line height is the distance between the text lines in text blocks. You use them to give your email a more formal or informal style — this is totally at your discretion.
Letter spacing is an optically consistent adjustment to the space between letters to change the visual density of a line of text.
set the stripe and content background color as well as the background image, font size, font color, link color, hover link color, and enable the Paragraph Bottom Space for all stripes of the same type.
Select the desired type of stripe and customize its appearance:
Highlighting the stripe and its content with color is especially useful when you want to draw users’ attention to a certain email element;
The Background image option is another way to help you customize the background. It is required when according to the corporate, there should be images in the background or backgrounds with a logo.
Please note: Some email clients, like Outlook, may not display a background image. Therefore, we recommend that you set a background color for the entire email as a fallback. The color should be close to the color of the background image.
Setting individual font sizes for each stripe is especially necessary for the "Footer" stripe, where small fonts are preferred.
More information about stripes configuration you will find in our separate article here.
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 piece of text, we need to highlight the latter and choose a necessary heading in the text formatting menu.
Then, in the "General Styles" tab, you can set the necessary font family, letter spacing and enable the Paragraph Bottom Space for all types of headings at once.
Also, you can apply the separate settings for different headings by choosing a necessary heading.
Apply font size, line height, and text style, as well as the font color.
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.
In the editor, you work on their design so they don’t go unnoticed :)
The button menu allows you to set some default parameters that will be applied to all buttons in the email template, so you can set the following:
font family, font size and color, as well as text style;
the full button border, or do it separately for each side with an option to customize the border color;
adjust the button to the container width;
padding inside the button.
"Support of Outlook" control allows improving buttons displaying in Outlook by inserting a special VML-code element.
Furthermore, you are able to activate the "Hover button styles" to make your buttons more attractive and animated.
The button color stands for the primary color, highlighted button color stands for the color your users see when you move the mouse over it, and the text color also will be changed with the highlighted font color.
Overview Of The Structures & Modules and Blocks menu:
There is also a set of Blocks in a Column panel nested on the left side.
Blocks contain the basics to create some email elements: image, text, button, spacer, social networks, menu, HTML, banner, video, timer, and three AMP-powered elements.
To use any of the blocks, you need to drag and drop it into your template and then edit.
More detailed information about Blocks can be found here.
On the same left side, you can see the "structures & modules" selection menu.
How to work with Structures?
The stripe is on top of the hierarchy of email elements, this means it must contain child elements. A structure is one of them, and it is always present in every stripe by default.
You can pick up a Structure with the required number of containers which you will fill in with blocks later.
Each structure can include up to 9 containers in a row.
Just like other email elements, structures can be saved as modules, moved, copied, and deleted with the help of the corresponding drop-down menu that appears by mouse hover.
To read more about structures, please follow this instruction.
How to work with Modules?
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.
How to save a custom module?
To save a module, hover over the desired element and press the "Save as module" button;
Give the module a name on the settings panel;
Enter a description (optional). The description will later help you understand what content this module contains;
Select a category for easy search;
Enter tags. The "Tags" field allows you to group the saved modules by tags. You can add one or several tags. Then, choosing the modules you will see that your modules are grouped by tags;
Having done that, your module is available in the "Structures & Modules" → "My modules" tab. Even more, the module will also be available from other email messages and templates in your project. For further use, just drag and drop it to email.
What are the "Template" and "Pre-Built" module folders?
In addition to the modules you crafted yourself, you can also use our pre-designed ones from the "Template modules" and "Pre-Built" nearby tabs. All of them have a short essential description below and help you create similar elements layout faster.
"Template modules" contain various email elements created by our designers in their unique style. They are available only in the existing email crafted with a basic or pre-designed Stripo template.
They have ready-made styles of a particular template or their variations for replacement.
"Pre-Built" modules are available from any email. 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 of them contain pre-configured smart elements 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 "Pre-Built" tab.
To optimize modules search, use filters by type and search field.
You can find more information about how to share modules and activate the synchronization option here.
2. Working space: is a Preview area at the same time:
The preview area takes the major part of the screen in edit mode.
At this moment, you can finally edit and check both desktop and mobile versions directly in the editor.
3. The Top toolbar:
The following functionality is placed on the top toolbar (from left to right) :
Stripo.email logo – allows you to go to the root menu of the email messages and templates selection.
Back button – allows you to exit the editing mode and return to the menu for selecting email messages or templates in the current folder.
Form with the name of the email – allows you to change the email template's name and save it manually. The drop-down menu on the right part of the Form with the name allows you to save the email and exit, save as a new email message, save as a new template, or leave the email editor.
Localization button – allows translating emails into all major languages (over 100). Communicate with your customers worldwide in the languages they speak. You do not need to re-create an email and translate the text in it manually; Stripo will do everything for you.
If you'd like to find more info about translation functionality, please follow this link.
Export button – shows a list of all available exports from Stripo and allows you to export an email for future sending.
You’ll see an additional window with all export options upon clicking on it. They are divided into the "Export to file and applications" and "Export to ESP" sections.
Stripo is currently integrated with 75+ 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 you push an email template to an ESP or any other application, a new section called "Recently Used", will appear in the "Export" window. It is developed for your convenience as it helps you find necessary export options faster.
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.
Share button option will help us share an existing email template with colleagues and get feedback from them.
You can copy the unique URL for this template and give this URL to anyone you want to exchange the template with. Also, you can perform a direct share on Facebook, Twitter, or mail.
You can also split the links on social networks and with your colleagues/customers/on your website.
Please find more information on configuring the "Share" functionality following this link.
Undo, Redo, and Version History buttons – allow you to cancel or redo the change.
Also, you can view the Change History, see the previous email versions before the changes, and restore them.
You can restore the previous email version by clicking on the green "restore" button or use one of the 3 options in the drop-down menu to the right of the "restore" button: Restore as a new, preview in a new tab, or export as.
Code Editor Button opens the built-in Stripo code editor, which allows you to make changes directly to the HTML and CSS code of the email.
More information about our Code Editor you will be able to find here.
The Preview button – 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.
◦ HTML preview allows checking how your recipients will see your template on desktop and mobile.
◦ AMPHTML preview allows checking how your recipients will see your template with AMP content on desktop and mobile. More information about AMP technology you can find here.
Test Button – allows you to use two types of tests:
◦ Sending emails to necessary email clients.
If you want to send an email test to a few addresses, separate them with commas;
◦ Testing email messages in various email clients and on different devices based on Email On Acid technologies.
This service shows how your emails will be displayed in various systems.
You can learn more about this kind of test by following this link.
The Stripo Menu button is located in the right corner and allows you to go to the Stripo Account settings. You can learn more about this menu here.
We will be very grateful if you leave feedback about our product. We are open to any suggestions and wishes :)
For doing this please click on "Feedback" button.
I hope you find this guide useful.
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 firstname.lastname@example.org.
We would be glad to talk with you.