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.
All 13 basic blocks are available in the "Content" → "Blocks" menu in editor mode.
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.
Let’s look at each one of them closer:
Image block:
Benefits of images in emails:
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 — JPEG, GIF, and PNG.
JPEG — 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 support for videos, 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 JPEG;
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.
Please remember that a heavy PNG image will increase the size/weight of your email, which will affect its loading speed.
Please, be aware you can upload images with a maximum size of 3 Mb and image resolution of 4000 х 4000 px.
There are three ways of doing it:
1. Dropping/uploading image:
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.
2. Pasting an external URL:
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.
3. Using images from the personal gallery:
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.
But how can you edit images with Stripo?
once you’ve uploaded the image, in the settings panel, to the right of the image snippet, click the "magic wand" 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;
center alignment is set by default. If you need to change it, click "left" or "right" alignment. Also, you can set alignment for mobile by clicking on the Mobile icon;
set the image size — my image’s width is 600 px;
enable the "Responsive image" option;
set padding for desktop and mobile view.
How to add an image rollover effect to an image?
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.
Important to note: The image rollover effect works on desktop devices. Other users will see the primary image only.
This feature works in a limited number of email services: Yahoo! Mail, Ukr.net, AOL, Gmail, iCloud Mail, Outlook 2003, macOS Apple Mail.
Text block:
There is no email that goes without any text in it. With the texts, you inform users about any events, sales, etc.
How to add text to your email with Stripo?
drop the 1-column structure into your email template;
drop a "Text" block into it, or click the "text" button right in this 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 or triple-click on the entire text block and then pick the format in the "top panel" tab at the beginning;
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.
So 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" in the top Settings panel.
Then, select the link type (protocol) that fits best in the left settings menu and insert its data.
How can I add Indent to the text block?
To add an indent to text, highlight the necessary word/text and click the label "Increase Indent" in the top Settings panel.
You can click as many times as you need to achieve the desired design.
In addition, you can "Decrease Indent" in the text block by clicking the label at the top Settings panel.
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;
animated GIF button.
Please follow this link for the second way of adding the buttons we 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 text styles, including the font style and text size, and also set button and text colors as well as background color;
add border-radius;
apply a fixed height where you can apply the needed height of the block without using the Code Editor and set the alignment for it.
apply the hover effect to the button if you like.
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);
adjust the button to width;
set the button border if you like;
set internal paddings. 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;
set external paddings — they are responsible for the whitespace outside the button, but within the container it is located in. You can apply different external paddings for mobile only by clicking on the mobile icon.
Also, you can add an icon to the button. The feature is not supported for Windows Outlook 2002, 2007, 2010, 2013, 2016, and 2019.
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.
Animated GIF button:
The animated GIF button is a perfect alternative to the image button.
You can just draw a banner or any other image, including a product snippet, and put an animated button over it.
Spacer block:
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.
How to add a spacer to your email?
drag a 1-column structure into your HTML email template;
pull the "Spacer" block in it;
double-click it to open the settings panel;
apply the background color of the block;
pick a color and choose a line style. 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;
set width — the width here is measured in % by default and you can switch it to px as well;
set width — the width here is measured in %, not in pixels!
specify spacer alignment. By default, center alignment is set. If you like, please change it in the "alignment" section;
toggle the "responsive spacer" button for a spacer to render properly on mobile devices;
make it dynamic to change the size by dragging it manually;
apply the background color of the block;
if necessary, set padding.
Video block:
A video in an email 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.
Way 1. Inserting URL link to your video:
This is a safe way to deliver videos because it works perfectly well for all email clients and devices.
add the block "Video" to an email. On the right panel, paste the link to your video in the field "Link to Video":
It is important to notice that the video block supports only YouTube, Vimeo and TikTok videos.
drop in the 1-column structure in your HTML email template;
drop in a basic "Video" block;
left click the container in the email;
in the settings panel, you will only need to insert a link to your video on YouTube, Vimeo or TikTok;
our system will automatically fill out the "Alternate text" field;
select the color of the "Play button".
Apply alignment;
Set up the needed size;
enable Adjust to Width;
apply Responsive Image (The option allows the image to adjust to the width of the screen of the mobile device);
Set padding;
Add the Anchor Link.
Our system automatically generates the thumbnail/preview image for your videos. But you may also want to set a custom one.
How to set a custom thumbnail to video in emails?
toggle the "custom thumbnail" button in the settings panel;
upload an image;
edit it if necessary.
If you like, you may even insert an animated GIF as the thumbnail image. It will certainly draw more attention to the video.
Important to note: The play button will also be displayed over the custom image unless you deactivate it.
Way 2. Embedding a video player right into an email
Embedded video is the kind of videos that are played right in emails. 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.
Social Networks block:
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:
drag the "Social" block into your email template;
pick a design style you like;
choose necessary icons;
paste your URLs;
double-click it in your template to activate the settings panel;
by default, you will see 4 icons. If they are not enough, click the "plus" button to add extra icons to your email;
in the settings panel, next to the social media icon, toggle the "more" button to start working with this particular social network;
insert respective URL links;
enter Title and Alt text;
set style for these icons and their size;
set the paddings, alignment, and indents between the icons.
Furthermore, you are able to add your own social icons. To do that, pick up the "Custom icons" type and upload your icons:
Important to mention 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, then the second method will suit you.
Click on the "+" sign and choose the "Custom icon" :
Banner block:
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.
How to build an email banner with Stripo:
drag the "Banner" block into a 1-column structure in your template;
click on it to open the settings panel;
add your main image;
choose the orientation;
use the "Banner height" control to set your own height of the banner cropping area;
paste a link that will take recipients to the place related to the value offer described on the banner;
enter alt text — this text will be shown to recipients if images for some reason cannot be displayed;
choose 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;
the very moment, you’ll see the "Caption' inscription on the banner;
erase this inscription and enter your text here;
set font size, font color, and font type;
among the banner fonts, choose the one that fits your email best;
toggle the "additional picture" button in the settings panel. It can be anything you like: sticker, frame, logo, background to make your copy more noticeable, etc. Yes, you can place text over it :)
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.
Timer-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.
How to build and add a countdown timer in emails with Stripo:
drop the 1-column structure into your template;
drop a "Timer" block in it;
left-click this container in an email template to activate the settings panel to work with the timer;
set the end date and exact time;
set the time zone;
set timer background color that fits your email design best;
make changes to the numbers' size and color if necessary. Initially, Stripo applies the parameters that you specified when making general settings;
Toggle the "Display days" button if you want recipients to see how many days are left. Otherwise, they will see just hours and minutes. "5 days 20 hours" are easier to percept than "140 hours";
change the date style if necessary. By default, we use ":" (colon) to separate days from hours, minutes, and seconds. You can also set "-" and "/" or others;
toggle the "number labels" button to display names "days", "hours", "minutes" and "seconds" under respective numbers;
set color, font type, and size to the labels;
toggle the "Expired Timer Image" button. Upload the image (as explained in the respective paragraph) that will be shown to customers once the timer expires. This is optional, yet we strongly recommend doing it — this will inform recipients the coupon is expired and they cannot use it any longer;
insert a URL link that will take recipients either to your website or to a particular page on your site when you describe the value offered in the details. This link will be applied to the "Expired timer image" as well;
specify alt text for accessibility;
use "Advanced settings" to set up the labels and digit colors for days, hours, minutes, and seconds;
Please, find more ideas and inspirational examples in our blog post: How to add a countdown timer in your email.
Menu block:
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.
How to add a menu to your emails with Stripo?
drag the "Menu" block into your template;
add extra menu items if you like. By default, Stripo offers three of them;
now in the settings panel, you need to choose whether to use icons, links, or both. "Icons" stand for the images in the menu; while "links" stand for the names of the menu tabs;
once you select the links type, which I did, you will see that the color and font of your links that you previously set in the "General settings" section are already applied to the menu links. I made them bold by clicking the "B" icon in the settings panel;
now you need to name each menu item;
insert necessary URL links;
do the same for all menu items;
if you want to hide some elements for mobiles, just click the "Hide on mobile" icon;
finished with naming menu items? Then take a look at what you’ve received. In my opinion, the menu looked small, so I decided to set a bigger font for it — I set "18";
if you choose the "Icons and links" type, please pick one of the alignments for it and upload your icons.
Besides, you can enable the "Adaptive menu" control that gives you an opportunity to display menu items one below the other for the mobile version.
HTML block:
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.
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 your HTML in the Code editor" to open the Code editor;
in this editor, paste the embed code;
customize it if necessary.
AMP Carousel block:
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;
add the desired number of slides by clicking on the "Add slide" button to add a new image;
enter "Alternate text" and paste a link to the relevant slide if you need it;
if you want only one common link for all slides, activate the "General link" control and add the corresponding link to all slides at once;
check if the sizes of all images match. If they do not, crop them with our photo editor;
if you want to see small preview images, you need to toggle the "Display preview" button. And set up the width for these preview images;
Result:
set the "Slide preview" to top or bottom;
adjust the "Preview alignment" and add a "Border radius preview";
Result:
set "Outline style of active preview slides" and "Outline style of inactive preview slides";
Result:
besides, you are able to set up "Indent between preview" images;
if you would like to make the slide round, then you can do it here with the function "Border radius slide";
Result:
furthermore, you can set your own "Custom preview".
To do this, please activate the "Custom preview" control and choose which type of preview suits you:
Image preview type:
It means that you have the ability to upload your own preview image;
Color preview type:
It means that you have the ability to choose what color should be displayed in the preview;
Result:
additionally, if you would like slides to change automatically, please activate the "Autoplay" option and set a time delay. For example, slides will be automatically changed every 2 seconds, or you can choose the convenient time for you, max 10 seconds;
also, you can activate the "Loop" option (slides can be switched in a circle);
done:) AMP carousel is ready!
AMP Accordion block:
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.
enter your email template and drag the "Accordion" block into it;
add the needed number of sections to the accordion;
give all sections' names. You can enter up to 200 characters;
now enable the "Auto-collapsing accordion" option. It allows you to show one section at a time. When you open any other section, the previously opened one is closed.
you may want one section to expand in your emails to let your customers know there’s some content hidden in these sections. To do so, please toggle the "Expanded" button for the necessary section;
the "Animated expansion" option is ON by default. It activates the "transition" property, allowing your sections to open and close slowly. If it does not need it, you can always turn it OFF by toggling the button;
now you can customize the accordion design;
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;
after that, fill those sections with your content;
It can be anything like images, text, buttons, banners, social media icons, videos, etc.
result.
AMP Form block:
AMP-form is very useful for those who would like to receive feedback or any other useful information from their clients.
drag the AMP-form block into your email template;
click on the ⚡HTML icon in the template to open its settings;
in the settings panel, you should select your service for collecting data created earlier (or add a link to the storage manually);
then click the "Add form element" and select "Text input";
there you can choose Text, Multi-line text, Number, Email, or Phone type;
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.
click on the "Label name" in the form to start editing it;
in the settings panel, in the "Show input field name" field, enter your CTA text that starts the form;
enter your "Placeholder".
How can I find out which customer left a comment?
For doing this, you should:
click on the ⚡HTML icon in your template;
then add a form element and select the "Hidden field". This field will be hidden in user emails;
paste a "Default value" in the field. The default value is the merge tag that retrieves the respondent's email address.
To find more information about Merge-tags, please follow this link;
then enter a name for your "Variable" — this will just help you find your user's feedback in the report faster. The variable can only be written in Latin.
How can I design the AMP-form block?
To design this form, you need to:
to design the form itself, click on the "AMP-form" and in the settings panel, set label/input color and style, input height, add a background with a shadow, and set a border;
to design a button in the form, click on it and set the button label, text type and color, button color, border radius, borders, alignment, set background color, and add an icon to the button;
click the green area in your template and edit the text right there. Color for each section — by default, they are green and red — and text color should be set in the settings panel.
Result in the preview:
Creating a new Data Service:
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.
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.