Stripo has its own hierarchy of elements. Blocks are at the very bottom of the email template elements hierarchy. Blocks are as "Lego" details; you can easily create an email template using them.
All 13 basic blocks are available in the Column menu tab on the left in editor mode.
Blocks contain the basics to create email elements: image, text, button, spacer, social networks, menu, HTML, banner, video, timer, and three AMP-powered elements.
You need to drag and drop any of them into your email template and then edit.
Device buttons allow you to switch between desktop and mobile versions directly in the Editor mode.
Let’s look at each one of them closer:
Image block:
Benefits of images in email templates:
Emails with images are easier to read and perceive;
Images have a positive impact on brand awareness;
Visuals increase customer engagement.
There are three major image formats — PNG, JPG and GIF.
PNG — if you need to add an image with sharp edges, include a logo, or an image with a transparent background, this format should be your first choice. The PNG format also preserves image quality regardless of its size and color saturation.
Important note: Heavy PNG images will increase the size/weight of your email, which will affect its loading speed.
JPG — you can use this format if you want your images to keep their colors. However, please be advised that the JPEG format will reduce your image, significantly reducing its quality;
GIF — this format works great when your email service provider doesn't have video support and you still need to include a certain action in your email. However, GIFs have a significant disadvantage — they do not render colors as brightly as JPEGs;
Just to let you know, you are able to upload images with a maximum size of 3 Mb weight or 4000px in width.
How to add images to your email template with Stripo?
Dropping/Uploading image:
Here, you can drag and drop the image you are about to use for your email template or upload it from your computer.
Pasting an external URL:
If you do not have the image saved to your computer, you are welcome to insert a link to this image on the web.
Click the "Enter URL" and 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, and choose the "Leave as External" option.
If you are going to use this image for other email campaigns, click the "Project" tab above, insert the link, and choose the "Save to Gallery" option.
Using images from the personal gallery:
As shown in the example above, your images are stored in your personal gallery when you upload images to the gallery. You just need to switch to the "Email" (or "Template" if it’s an email message) 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 their name.
To use one in your current email template, you need to click on the selected image, and it will automatically appear in your email template.
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 within a current project:
Tip: Here, by the word project, we imply a kind of general folder for templates and email messages, where some default settings can be specified. Learn more
But what if you don't have the necessary images?
In the "Common" folder, you will find our collection of images. Choose a topic of interest and find an image suitable for your email template:
At the same time, you can save an image to the "Common" folder. It will appear in the subcategory "Other" and will be available in all projects of your account. Leave an image here if you are planning to use it in all your projects (e.g. a company logo):
You can find many more free images in the folder "Stock". Try searching for a particular image by entering a keyword in the search field:
Whenever you upload an image, you can make it available for one email message/template, the entire project, or the whole account.
How to edit images with Stripo?
Once you’ve uploaded the image, in the settings panel, to the right of the image snippet, click the "Edit image" button;
In a new pop-up window, your image will be opened with the Pixie editor;
Here, you can apply filters, resize and crop images, draw over them, put any text over them, add stickers and frames, and apply backgrounds;
When you’ve done editing, click "save" in the Pixie editor — only then will the changes you’ve made to the image be applied.
Additionally, working with the "Image" block, you can:
Insert a hyperlink that takes readers to your website;
Add alt text to the image to specify alternative text that is to be displayed in place of an element that cannot be rendered;
Fit to container, which makes the image fit to the size of the container;
Set the image size — my image’s width is 600 px;
Center alignment is set by default. If you need to change it, click "left" or "right" alignment;
Configure the full image Radius, or do it separately for each side;
Activate the Rollover Effect:
The image rollover effect helps you entertain and engage customers. Moreover, it saves you precious space in email templates, 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 email templates.
To activate this effect, toggle the "Rollover effect" button and upload the second image — edit it if necessary.
Important to note: The image rollover effect works on desktop devices. Other users will see the primary image only.
This feature is only supported by Yahoo! Mail, Ukr.net, AOL, Gmail, iCloud Mail, Outlook 2003, and MacOS Apple Mail
Add the Anchor Link:
You've probably seen a feature on websites when a page has links to its own chapters, and when you click on the link, you get redirected to a specific chapter or paragraph on the same page. This feature is called an anchor link.
To activate it, please turn on the "Anchor link" option and follow the instructions described in another article.
And finally, add Margins to your image block if necessary.
Text block:
No email goes without any text in it. With the texts, you inform users about any events, sales, etc.
How to add text to your email template with Stripo?
Drop the 1-column structure into your email template;
Drop a "Text" block into it, or click the "text" button right in the structure;
Enter your text;
A block can contain both regular texts and headings.
To apply a heading to a piece of text, you need to highlight it with the mouse pointer and pick the Paragraph Style in the "Text" block menu.
With the text block in the Settings tab, you can set up the following:
Paragraph Style, where you can apply the headings to your text;
Text Style, where you can apply text styles such as bold, italic, underline, strikethrough, subscript, and superscript;
Text Alignment. The center alignment is set by default. If you need to change it, click "left", "right," or "justify" alignment;
Increase Indent/Decrease Indent, where you can add/remove an indent to the text by highlighting the necessary word/text.
Fixed Height where you can apply the needed height of the block without using the Code Editor and set the alignment for it.
Line Height is the distance between the text lines in the text block. You use them to give your email a more formal or informal style — this is totally at your discretion;
How to add links to text with Stripo?
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" from the right Settings panel.
Then, in the settings panel, select the link type (protocol) that fits best and insert its data.
To remove the text link, highlight the text and click "Chain" again in the Settings tab.
In the text settings tab, you can also:
Enable Word Break, which enforces a line wrapping so the text is within the specified block width. The option does not work for Chinese, Korean, and Japanese text;
Activate the Underline Links with which you can mark your text links;
Set up emojis, special characters, table, and bullet list;
Add Merge-tags for personalizing your content in a template. More information can be found here;
Add the Anchor Link;
Disable Line Wrap, which will help you put text in one line;
Set Paddings.
In the Styles tab, you are able to set up as well:
Block Background Color, which is applied to the entire text block as well as a Background Color covering the text area;
Font Family and Font size;
Font and Links color.
We already know that it is better to start working on an email design in the "General Settings" tab, where you can set up the following:
Underline links, once you add a link to your email template, it will be underlined automatically;
RTL direction enables the right-to-left text direction in emails for the most widespread language scripts, such as Arabic, Hebrew, Persian, Pashto, Urdu, Kashmiri, and Sindhi;
Custom List Styles, once you add a bullet list to your email template, these settings will be applied.
Moreover, in the "Stripes" tab, you can simultaneously set all stripes' font family, line height, and letter spacing.
And set the content background color, font size, and color, link and hover link color, and enable the Paragraph Bottom Space for all stripes of the same type.
As well as in the "Headings" tab, you can set the font family for all headings in the email template, letter spacing, indent at the bottom of the paragraph, font size, line height, font style and color at the same time.
Button block:
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.
There are a few ways to build a button:
The "Button" block;
Image button;
Please follow this link for the second way to add the buttons described in our separate article.
Now let's check how we can build a CTA button using the "Button" block:
Drop the basic "Button" block into your template and put it right next to the necessary element;
Click the "Button" block in the template to activate the "Settings" panel;
Insert a necessary URL link;
Enter your button text, aka button label;
Set a correct alignment;
Fixed Height where you can apply the needed height of the block without using the Code Editor and set the alignment for it;
Also, you can add an "Icon" directly to the button making it more attractive, where you can set up: Alignment, Width, and Indent;
The icon inside the button will not show in Outlook 2002, 2007, 2010, 2013, 2016, 2019 on Windows.
Add the Anchor Link;
Set Margins to the text block.
Click the "Styles" tab and set up:
Block Background Color, which is applied to the entire button block;
Button color;
Text styles, such as font family, font size, and colors;
Fit the button to Container;
Border radius to the entire button. Also, you can set the radius for the needed corner by clicking the "Radius per corner" control;
Set a border to make your buttons more interesting, where you can customize: a border for all sides, a border for per side, border color and style for that border;
Set internal padding. They are responsible for the space inside your button. Due to the button layout method chosen by Stripo, it does not matter where exactly in the button your customers click. This space is also clickable, yet it makes the buttons more appealing and clear;
Besides, in the "General Styles" → "Button" menu activate the "Hover Button Styles" for animation;
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 will also change with the highlighted font color.
Here you can set the default parameters for the "Hover Button Styles" that will be applied to all buttons in the email template.
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.
Spacer block:
The spacer doesn't boost conversions or anything else. It's just a decorative element that makes email templates look orderly and enhances the content perception.
How to add a spacer to your email template?
Drag a 1-column structure into your HTML email template;
Pull the "Spacer" block in it;
Double-click it to open the settings panel;
Pick a Block Background color;
Set Width — the width here is measured in % by default, and you can switch it to px as well;
Pick a Color and choose a Style for your spacer. It can be solid, dashed, or dotted;
Set a necessary "thickness" of the spacer. To do it, you need to set a digital value in the Border field by increasing or decreasing the value;
Choose a spacer Alignment. By default, center alignment is set. If you like, please change it in the "alignment" section;
If necessary, set Paddings for the spacer block.
Add the Anchor Link;
Switch to the Spacer Mode: Spacer if you need a vertical alignment. Just stretch the spacer to the desired length or specify its height in px.
Social Networks block:
Quite often emails have the "Follow us on social media" block in email templates. These blocks normally have social media icons with links.
How to add Social Networks to your email template?
Drag the "Social Networks" block into your email template;
Pick a design style you like;
Choose the necessary icons by clicking on the "+" sign;
Paste your URLs.
Important note: If you do not want to add manually links to the "Social Networks" block every time, this can be automated using the "Projects" tab → "Social Networks".
Set Icon size, you can pick up from 16px to 64px;
Set the Space Between Icons. The maximum distance between icons is 40px;
Include Title and Alternate text Customization. Where you will be able to set up: Title and Alt text;
Adjust Alignment;
Set the Block Background Color;
Add the Anchor Link;
Set Margins.
Also, you can change the order of your social media, just drag'n'drop it!
Furthermore, you can add your own social icons. To do that, pick up the "Custom icons" type and upload your icons:
Important note: this way, you can overlap all social icons. Therefore, if you want to keep the standard icons and, for example, load only one custom icon, the second method will suit you.
Click on the "+" sign, choose the "Custom icon" and upload your image:
Menu block:
Normally, the "Menu" block is used in the email header to take users to a necessary page on your site quickly. As a rule, menus also contain a company logo.
Users can be redirected to a website or another element inside the email template when they click on a menu tab.
How to add a menu to your email template with Stripo?
Drag a "Menu" block into your email template;
Important note: Even though the menu contains a number of tabs, this is still one block we have put in a container.
Add extra menu items if you like. By default, Stripo offers three of them. New items will be added to the end of the list. If you decrease the total items, it will start removing from the bottom;
Choose whether to use icons, links, or both.
"Links" stand for the names of the menu tabs, while "Icons" stand for the images in the menu;
In the "Links" tab we need to name each menu item and insert the necessary URL links;
Switch to the "Styles" tab to set:
Font family, its size, style, and color;
Add a separator if you like, and set its style and color;
Moreover, you can customize each Menu Items Color;
In the "Icons" tab, we are able to:
◦ Upload an image to each item;
◦ Replace image or Edit image with Pixie editor;
◦ Set up the needed size for each icon;
◦ Set Alt text;
◦ Insert a link.
Switch to the "Styles" tab to set:
Add a separator if you like, and set its style and color;
Moreover, you can customize each Menu Items Color;
Also, for each Menu Item Type, we can customize:
The Hide on Desktop control, If you want to hide some elements for the desktop;
Fit the menu block to the Container width;
Add the Menu Item Padding;
Set Margins if you need;
Add the Achor link.
HTML block:
Sometimes creating an email template using the editor tools following your design ideas is impossible. In this case, you can add HTML code with your own solution.
How to embed custom HTML code in emails with Stripo?
Drop the 1-column structure in your email template;
Drop a basic HTML block;
Click the "Insert elements with custom code" to open the Code editor;
In this editor, paste the embed code;
Customize it if necessary.
Important note: You can't add the javascript directly in the editor because, after export, it will be cut by our provider. They do reject all email sending of email template which has anything from this inside the code: tags <script>, <iframe> JS events "onerror", "onunload" etc.
Banner block
The banner always grabs the users' attention. Most often, it delivers the main offer of the email template.
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.
How to build an email banner with Stripo?
Drag the "Banner" block into a 1-column structure in your email template;
Click on it to open the settings panel;
Add your main image from the "Styles" tab;
Paste a link that will take recipients to the place related to the value offer described on the banner;
Set the Banner size;
Crop Shape where you can choose the orientation, Horizontal or Vertical;
Add the Anchor link;
Enter alt text — this text will be shown to recipients if images for some reason cannot be displayed;
Set margins.
Switch to the "Styles" tab:
Configure the Rotation, the ability to rotate your image clockwise in degrees;
Set the Banner Background color;
Choose the needed Filter to make your banner alluring.
If you need to place any text over the banner image, you need to click the "T" button on the settings panel above. Once it gets light, you need to left-click this image again;
The very moment, you’ll see the "Text node" inscription on the banner. Erase this inscription and enter your text here;
A menu for text style settings will open on the right: set font type, size, color, and other text formatting;
Click on the image above your banner block to add the "additional picture" and set up the styles as well.
It can be anything you like: sticker, frame, logo, background to make your copy more noticeable, etc.
The magic begins when you finish working on your banner and click on any other email template object. All the layers, aka elements, get together inside the block and make the banner. The banner will be mobile-optimized.
Video block:
A video in an email template can grab subscribers’ attention and help you in many other ways. For example, in a video, you show recipients how to use your tool or provide them with a product description.
There are 2 ways of adding videos to emails with Stripo:
Inserting URL link to your video;
Embedding a video player right into an email template.
Way 1. Inserting URL link to your video:
This is a safe way of delivering videos because it works perfectly well with all email clients and devices.
How to add a video to your email template?
In order to create a thumbnail image for your video, add the block "Video" to an email template. On the right panel, paste the video link in the field "Video Link":
It is important to notice that the video block supports only YouTube and Vimeo videos.
Done. Our editor generated a thumbnail image;
Furthermore, you will be able to:
Apply Custom Thumbnail which gives you the option to change the video preview to a different image;
Chose the "Play button styles";
Set up the needed size;
Fit the video to Container;
Apply alignment;
Add the Anchor Link;
Set padding.
Way 2. Embedding a video player right into an email:
The embedded video is the kind of video that is played right in email templates. Recipients are not required to go to another website to watch the video.
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.
Then, add our ready-to-use video player’s code to an email. It consists of two parts:
1) The first part is meant for those email clients where the video player is supported; it contains links to a video file in the format of mp4 or webm;
2) The second part contains a link to the same video, but it is hosted on websites such as Youtube or Vimeo. If an email client does not support the embedded player, a user will be redirected to a video hosting site and watch the video there.
Here is the code of our player. Copy this code:
<video class="adapt-img" controls="controls" poster="https://jenbfo.stripocdn.email/content/guids/videoImgGuid/images/image16586923322854343.png" width="100%" height="313">
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> <source src="http://www.w3schools.com/html/mov_bbb.webm" type="video/webm">
<!-- fallback -->
<a href="https://www.youtube.com/watch?v=ryqOEPk51Lg/" class="esd-frame-element esd-hover-element esdev-disable-select">
<img class="adapt-img" src="https://jenbfo.stripocdn.email/content/guids/videoImgGuid/images/image16586923322854343.png" alt="" width="100%" height="313"></a>
</video>
In the Stripo editor, add an "HTML" block and replace the code of this block with our player’s code, as shown below:
Now you need to insert your own links into this code. Let us find out what the links are responsible for:
The first link is a thumbnail image. Certainly, some devices can generate a thumbnail image using an MP4 video, but this image will not render on iPhone X and devices with Retina displays. Paste this link after the "Poster" attribute;
The next two links are links to our video files in the formats .MP4 and .WebM. Links to Youtube or Vimeo won’t work here. Replace the links that go after the "source src" attribute with your own links;
The other two links that go after the word fallback are links to a Youtube video and to its preview image. This is our fallback for those email clients that don’t support embedded videos. Upload your video to Youtube or Vimeo and upload the second image used as a thumbnail. Replace the links that go after the "href" and “src” attributes with yours.
Done. Now some of your clients will be able to watch a video directly in the email, while other clients will be redirected to the fallback video page.
Important note: We are already working on making the Timer and AMP-powered elements available to you soon.
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.