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 11 basic blocks are available in Content/Blocks menu.

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

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

Let’s look at each one of them closer:

Image

Image block allows you to add images in PNG, JPG, or GIF formats.

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

In the “External link” field, paste the link to your image.

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, then click the “Project” tab above, then insert the link and choose the “Download to the gallery” option, and click the tick.

3. Using images from the personal gallery

When you upload images or download them 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 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.

To use one in your current HTML email template, you need to click on the selected image and it will automatically appear in your email.

Text

How to add copy to your emails with Stripo:

  • drop the 1-column structure into your HTML email template;
  • drop  a “Text” block into it, or click the “text” button right in this structure;
  • enter your greetings;
  • double click the very text;
  • set headings where necessary. In our example, for the greetings, I chose headings 2 — and as long as we’ve set parameters for Headings in the “General Settings” tab at the beginning, Stripo automatically used them (Arial, 24px) for our email;
  • enter your text in the next line;
  • highlight it;
  • set alignments;

Button

How to build a CTA button with Stripo:

  • drop the basic button block into your template and drop it next to the product it is related to;
  • tap the button block in your HTML email template to activate the settings panel;
  • insert a necessary URL link;
  • enter your button label;
  • set text style, such as font, its type, and font size;
  • set button color, font color;
  • apply hover effect to button if you like.
    In this screenshot, the “button color” stands for the primary color, highlighted button color stands for the color your users see when you move the mouse over it, and text color stands for the font color. If you do not want the hover effect in your emails, just leave apply the same color which you set as the primary one;
  • set border radius if you like oval buttons;
  • specify alignment;
  • set the button border if you like;
  • set internal paddings. They are responsible for the whitespace inside your button. Due to the button layout method chosen by Stripo, it does not matter where exactly in the button your customers click. Whitespace 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.

Spacer

How to set spacer in emails with Stripo:

  • drop the 1-column structure into your HTML email template;
  • drop the “Spacer” block;
  • double-click to activate the settings panel;
  • set its color;
  • to set the “thickness” of your spacer — you need to set the “number” in the “Line” section — increase/decrease numbers;
  • you also need to choose the style of your line. It can be solid, dashed and dotted;
  • 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;
  • if necessary, set paddings.

Video

Stripo provides its users with two ways of adding videos in emails

  1. Inserting URL link to your video;
  2. Embedding video.

Way 1. Inserting URL link to your video

This is an absolutely safe way of delivering videos because it works perfectly well in all email clients and on all devices.

How to insert URL link to your video:

  • 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 or Vimeo;
  • our system will automatically fill out the “Alternate text” field;
  • select the color of the “play button” — it can be white, traditional red and black.

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.

You may even insert an animated GIF as the thumbnail image if you like. It will certainly draw more attention to the video.

Important to note: The play button will be displayed over the custom image, as well unless you deactivate it.

Way 2. Embedding video

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.

Yes, it cannot be played by all email clients. In fact, only Apple Mail, native iOS mail, Thunderbird and Outlook for Mac do support this kind of content.

Stripo provides its users with a universal code — by using which you provide all of your users with the video you want to share.

We recommend sticking to the following order:

  1. Embed this code in email template;
  2. Customize the given code by inserting your URL links.

How to embed this code in emails with Stripo:

  • drop  the 1-column structure in your HTML email template;
  • drop a basic HTML block;
  • in the email template, left-click the “Insert your HTML in the code editor” to open the Code editor;
  • in this editor, instead of the “Insert your HTML code editor" paste the embed code;
  • customize the embed code.

The very code to embed:

<video class="adapt-img" controls="controls" poster="https://tlr.stripocdn.email/content/guids/CABINET_0bd21bea47f1cfb916fb84d59a107495/images/92621531318217276.jpg" 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://tlr.stripocdn.email/content/guids/CABINET_0bd21bea47f1cfb916fb84d59a107495/images/48461531318273724.jpg" alt="" width="100%" height="313"></a>
</video>

The part of the code that goes above the fallback is for those recipients whose devices and email clients support this interactivity. While the part below is for those whose email clients do not support interactivity — they are redirected to Youtube, Vimeo or any other video hosting site.

By using this code, you make sure that all of your users will see the video you want to share.

Customize the embed code:

  • upload the image, you are going to use as the thumbnail one, to any site (I use Pinterest for these purposes) — it will serve as the preview image for those clients who use Apple devices.
    Certainly, the MP4 video will generate its own thumbnail image, but this image will not render on iPhone X and devices with Retina displays. The play button will automatically appear on it. Paste this link after the Poster attribute;
  • convert your video to MP4 format by using any video hosting site (I use Streamable. It’s free). In the code, replace the link that goes after the "source src" attribute with your URL;
  • convert your MP4 video to the WebM format — and insert the link in the respective line of the code. This video will be played on those devices which support videos of this format; and
  • upload the second image you are going to use as the thumbnail one. Draw the “play” button over it. It can be actually a screenshot of your video on Youtube — will be displayed in all email clients that do not support interactivity in emails yet; then
  • upload your video to Youtube (Vimeo, your website, etc.) — paste this URL in the "href" attribute after the quotation marks instead of the existing link. Once the recipient hit the “play” button, he or she will be directed to the respective website.

Social Networks

How to add social media icons with Stripo:

  • drop the “Social” basic block in your template;
  • 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 in 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;
  • set their size;
  • and finally set the paddings and indents between the icons.

Banner

How to build an email banner with Stripo:

  • drop a 1-column structure into your HTML email template;
  • drop the “Banner” block into this structure;
  • click this block in the template to activate the settings panel;
  • upload image that you’re about to use;
  • in the settings panel, the system will suggest that you crop the image if needed;
  • set image orientation. It can be vertical, square and horizontal. The last one is the most popular type;
  • apply filters. For example, the grayscale one;
  • paste the 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;
  • if you need to place any copy 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 “Caption” inscription on the banner;
  • erase this inscription and enter your text here;
  • set font size, font color, and the 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 :)

Please, be advised:

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.

To build a banner like this one, you need to:

  • upload image;
  • set image orientation;
  • insert additional image over it;
  • place copy over both images.

Timer

How to build and add countdown timer in emails with Stripo:

  • drop the 1-column structure into your template;
  • drop the Basic 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 date style if necessary. By default, we use “:” (colon) to separate days from hours, minutes, seconds. You can also set “-” and “/”;
  • 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 expired. This is optional, yet we strongly recommend doing it — this will you will inform recipients the coupon is expired and they cannot use it any longer;
  • insert URL link that will take recipients either to your website or to a particular page on your site when you describe the value offer in the details. This link will be applied to the “Expired timer image” as well;
  • specify alt text for accessibility.

Please, find more ideas and inspirational examples in our blog post How to add a countdown timer in your email.

Menu

How to add a menu to your emails with Stripo:

  • click the “Content” tab in the settings panel;
  • drop the 1-column structure and put it below the logo;
  • now open the “Blocks” tab;
  • drop a menu block and drag it 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 to 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”.

HTML

How to embed custom HTML code in emails with Stripo:

  • drop the 1-column structure in your HTML email template;
  • drop a basic HTML block;
  • in the email template, left-click the “Insert your HTML in the code editor” to open the Code editor;
  • in this editor, instead of the “Insert your HTML code editor" paste the embed code;
  • customize the embed code.

AMP-Carousel

How to add AMP carousel to your emails with Stripo:

  • drop the AMP carousel block in your template;
  • configure the preview width (optional);
  • add the needed number of slides clicking the Add Slide button to add a new image;
  • your AMP carousel is ready.

AMP-Accordion

How to add AMP accordion to your emails with Stripo:

  • drop the AMP carousel block in your template;
  • set parameters for background sections, outline, font 
  • add the needed number of sections 
  • add to each section chosen block and content
  • your AMP accordion is ready.
Did this answer your question?