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 1450+ 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 85 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;
General styles;
Elements tree.
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";
Important to note: this option works in Gmail on mobile devices only and is meant for email messages that get to the “Promotions” folder. You can learn more about this functionality in our article.
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.
General Styles:
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:
General settings;
Stripes;
Headings;
Buttons.
1. General settings:
In General Settings, you can set up settings 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.
Important to note: The background image will only render on desktop devices and not on mobile devices.
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 display. 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".
2. Stripes:
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, add 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 can be found in our separate article here.
3. Headings:
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, and 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.
4. Buttons:
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;
Letter spacing;
Button color;
The full button border, or do it separately for each side with an option to customize the border color;
Add a border-radius;
Enable the Fit to Container;
Set paddings inside the button.
The "Support of Outlook" control allows improving buttons displaying in Outlook by inserting a special VML-code element.
Furthermore, you can activate the "Hover button styles" to make your buttons more attractive and animated.
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 also will be changed with the highlighted font color.
Element tree:
Important note: We are already working on making the "Element Tree" available to you soon.
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.
Important note: We are already working on making the Timer and AMP-powered elements available to you soon.
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;
Click "Save";
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 element layouts 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.
Important to note, that the displaying of some module elements may vary in different emails as they use styles from certain emails.
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.
Reminder: By switching to the mobile version, the same settings will be applied to the mobile version as well.
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.
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.
Important note: We are already working on making the "Version History" function available to you soon.
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.
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.
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 can be found 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;
Important to mention: users of the "free" tariff plan can only send test emails to the mailbox set in the profile.
◦ 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.
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 several sections: "Email Provider", "Application" and "File".
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.
Switching button, which helps you to configure the desktop and mobile versions;
Help Center / Notifications Center:
⁃ Access Stripo's Help Center for tutorials and guides on using Stripo tools on the YouTube channel;
⁃ Improve your skills with educational courses;
⁃ The "Billing" tab manages finances, handling bills, payment updates, subscription changes, and history.
⁃ The "Plugins" tab is for integrating the Stripo Plugin—a drag-and-drop email editor—into user-created applications, offering customers an easy way to create emails.
⁃ Reach out to the support team via Live chat, email, or feedback form.
The Stripo Account button is located in the right corner and provides quick access to important settings of the account, as well as some additional features:
The Account tab contains the following buttons and links:
⁃ "Show Profile" — Open the Profile settings in the Settings tab;
⁃"Switch to the new Editor" — allows you to choose whether to open emails and templates in the old or new Stripo editor by default (beta access);
⁃The "theme" lets you switch between the Light and Dark modes in the account (coming soon);
⁃"Billing" — opens the section Billing of the Settings tab;
⁃"Plugins" — opens the section Plugins of the Settings tab;
⁃"Release Notes" — a link to the page where you can follow our updates and improvements;
⁃"Terms of Use" & "Privacy Policy" – links to Stripo's Terms of Use and Privacy pages;
⁃"Sign Out" — use this button to log out of Stripo.
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.