How does Stripo editor work?

In this article, you will find information about the editor's functionality and learn how to work in the Stripo editor.

Oleh Tokariev avatar
Written by Oleh Tokariev
Updated over a week ago

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 70 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 edit mode by clicking on any email message or template in your account. The entire editor in editing mode is divided into 3 parts:

  1. The Settings Panel;

  2. Working space: is a Preview area same time;

  3. The Top toolbar.

1) The Settings Panel:

For your convenience, you can place the setting panel on the left or right side.

It contains almost all the functionality of the embedded settings for editing email templates.


The Settings Panel is divided into 2 parts: the "Appearance" and the "Content" menu.

Appearance menu:

All the styles that you set in the "Appearance" menu 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 gonna use it. And there will be no need to work on its design every time from scratch.

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

  • General settings;

  • Stripes;

  • Headings;

  • Buttons;

  • Mobile Formatting.

General settings:

In this tab, you work on your email design styles: You customize email message width, default padding for structures, background color as well as image, font, line spacing, paragraph bottom space, underline links, RTL text direction, and responsive design.

We are now gonna cover only the most important controls:

  • By default, the message width is 600 pixels. Today, this is the most standard size among all email clients.

You can change it according to your preferences.

  • Message Alignment allows you to change the horizontal position of an email in the workspace of the inbox. You can align the template's position to the left or right edge of the screen, or keep it centered;

  • Default paddings stand for the fixed padding size for future structures that you add to your email message in the future. You can set separate padding for each side of the structure or remove them altogether.

  • Next, we would like to draw your attention to the difference between the two controls: the General background color and 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 "Repeat image" control if you want your image to be applied to the entire email message regardless of its length.

Important to note: The background image will only render on desktop devices and not on mobile devices.

  • The chosen font will be applied to all "Text" blocks in the email except for Headings. You can choose any standard or custom font from the list.

  • Line spacing 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.

  • The "Underline links" control helps you enable or disable links underlining for the entire email.

  • The "RTL text direction" 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 for people worldwide.

  • Responsive design — this option is always ON by default.

If you turn this option OFF, your email on mobile devices will look just like it does on desktop devices.

Stripes:

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:

  • set individual font sizes for each stripe (it is especially necessary for the "Footer" stripe, where small fonts are more preferred);

  • set the font and link colors;

  • also, highlight the stripe and its content with a color. This 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.

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 Settings panel, you set the necessary font type, size, style, and color for the headings as well as line spacing.

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, so you can set:

  • font size, font style and color;

  • button color;

  • border-radius;

  • the full content border, or do it separately for each side with an option to customize the border color;

  • internal padding;

  • activate the "Highlight hovered buttons" styles and set hovered colors. The button colors will change when you hover the mouse over it;

  • "Support of Outlook" control allows improving buttons displaying in Outlook by inserting a special VML-code element.

Mobile formatting:

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:

  • go to the "Appearance" tab;

  • open the "Mobile formatting" section;

  • apply font sizes to headings H1, H2, and H3 and to different stripes;

  • set button text size. 18px or higher is the most optimal size here;

  • enable the "Full-width buttons" option to fit the button on a user’s mobile screen.

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.


Content menu:

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

  • Structures;

  • Blocks;

  • Modules.

What is the Structure?

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.

To add an extra structure, drag and drop it from the "Content" menu to the desired position of your email template.

Each stripe can contain many structures. In turn, a structure can include up to 8 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.

In the structure's "Appearance" tab, you can:

  • add more containers to the structure;

  • set the container size. You can set container size in the structure using parameters in numbers or "stretching" the container to the desired width;

  • adjust indent between containers;

  • set the background color of the structure as well as the background image;

  • you can set padding for a structure for desktop and mobile view;

  • configure the full content border, or do it separately for each side with an option to customize the border color;

  • configure the structure's responsiveness to locate their containers one below the other for mobile view or set inversion for responsive structures to display containers in reverse order on a mobile screen;

  • hide the structure for desktop or mobile view here if you want some structures not to be displayed in some versions;

  • specify the structure type below – HTML, AMPHTML, or both types.

In the "Data" tab, you can:

  • configure structures just like smart elements.

Smart Elements are functionality that allows you to automate email production. This is a true time-saver for those who build multiple product cards and email digests. You configure them once and use them across numerous promo campaigns.

For more details about smart elements, please click here.

Important to note: the "Data" tab is available for stripes and containers as well as for structures.

In the "Conditions" tab, you can:

  • apply Display Conditions allows you to dynamically change the content of the email/template displayed to recipients after mailing, depending on whether the specified condition is met or not.

To read more about conditions, follow this link.

Important to note: the "Conditions" tab is available for stripes and containers as well as for structures.


What are Blocks?

Stripo has its own hierarchy of elements. We can start from the stripes and proceed in descending order, through the structures and containers down to the blocks.

Blocks are at the very bottom of the email elements hierarchy.

In editor mode, all the 13 basic blocks are available in the "Content" → "Blocks" menu.

Blocks contain the basics to create some email elements: image, text, button, spacer, video, social, banner, timer, menu, custom HTML element, and three AMP-powered elements.

To use any of them, you need to drag and drop them into your email template and then edit them.

To find more information about each block, please refer to this link.


Modules menu:

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.

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 "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.

In addition to the modules you crafted yourself, you can also use our pre-designed ones from the "Template modules" and "General modules" 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.

In the "Template modules", you can find interesting modules with a non-standard layout.

"General 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 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 "General modules" tab.

To find more information about the module configuration, please visit this link.


2) Working space: is a Preview area same time:

The preview area takes the major part of the screen in edit mode.

It’s the area for editing emails and templates, where you can drag blocks/structures/ modules into it from The Settings Panel.


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.

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.

  • 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 the space bar;

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.

  • The Settings button - allows you:

-to set a "subject/title" of the email (no longer than 65 characters), which will be displayed in 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 "add white space", which will help to avoid the effect of "capturing" the text from the email and placing it in the pre-header;

- enable UTM tags (aka UTM codes or UTM parameters) to help you measure the impact of each particular traffic source or marketing channel and see which advertising campaigns bring you less revenue. Please refer to this link for more details;

-annotating emails for the Promotions tab with just a few clicks. Please find more information here.

  • 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.


Did this answer your question?