Skip to main content

(New Editor) What are the Basic Blocks? How to use them?

In this article, you will learn about Basic Blocks and how to use them.

Oleh Tokariev avatar
Written by Oleh Tokariev
Updated this week

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?

Stripo provides a selection of ready-to-use images in the predefined collections:

  • "Seasons" – Contains images for holidays and seasonal events like Christmas, Halloween, Black Friday, and more;

  • "Decoration" – A collection of backgrounds, patterns, and thematic illustrations for email design.

💡 Tip: You can refine your search within these collections using filters (e.g., category, style, or color theme).

Stripo also connects to multiple free stock image providers, allowing you to access:

  • "Photos" – High-quality visuals from Pixabay, Pexels, and Unsplash;

  • "Icons" – A variety of vector icons from Iconfinder;

  • "GIFs"– Animated and static stickers from GIPHY.

💡 Tip: Use the search bar to find relevant images by entering keywords like "business," "summer," or "sale."

How to use AI-Generated Images in the Image Block?

Stripo now supports generating images with AI services like Gemini, and Stability, DALL·E directly in the editor.

  • Gemini: Google DeepMind's multimodal AI generates images with advanced reasoning.

  • Stability: Stability AI’s tool (Stable Diffusion) creates high-quality, customizable images.

  • DALL·E: OpenAI's AI creates detailed images from text prompts, perfect for art and design.

How Does It Work?

  • Simply activate the AI image generation option in your Group or Project settings, and use the menu under "Artificial Intelligence" to input a text prompt:

  • In the editor, select the Image block and drag it into your template.

  • In the block settings, choose AI Image Generator, enter a text prompt (e.g., "sunset over mountains"), and generate the image:

  • Once the image is generated, you can either "Regenerate" it or adjust the image size and alignment as needed.

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:

  • Check or change an image's path. Additionally, you can copy its URL address;

  • Insert a hyperlink that takes readers to your website;

  • Fit to container, which makes the image fit to the size of the container;

  • Add Alternate Text to an image to specify what will be displayed when it cannot be rendered;

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

  • Besides, AI can automatically generate alt text, improving accessibility and search engine visibility. Simply click the "Generate with AI" button to create Alt Text for your image.

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

  • Furthermore, you can enable automatic Alternate Text generation using AI to enhance accessibility and improve search engine optimization. Simply click "Generate with AI" to create Alt Text for your social network icons.

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

  • Additionally, you can automatically generate an Item name as Alt Text using AI, improving accessibility and search engine visibility. Simply click "Generate with AI" to create Alt Text for your icon.

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.

  • Moreover, you can also automatically generate Alternate Text using AI, improving content perception and accessibility. For this simply click the "Generate with AI" button:

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:

  1. Inserting URL link to your video;

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

  • Besides, AI can automatically generate alt text, improving accessibility and search engine visibility. Simply click the "Generate with AI" button to create Alt Text for your video.

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

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;


In the Settings Tab you will be able to:

  • Set the time zone for an accurate countdown;

  • Size on Desktop/Mobile — Define timer size;

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

  • Display Days — Toggle this to show days. If off, only hours, minutes, and seconds will display;

  • Digital Labels — Enable or disable labels like "days," "hours," etc., under each number;

  • Separator — Choose a separator (e.g., ":", "-", "/") to divide time units;

  • Labels Language — Select the language for labels;

  • Alignment on Desktop/Mobile — Set timer alignment (left, center, or right) on both screens;

  • Retina Display Support — Enable for sharp display on high-resolution devices;

  • Expiration Image — Upload an image to display when the timer expires;

  • Add Anchor Link;

  • Set Margins;

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

Switch to the "Styles" tab to:

  • Set the timer background color of the timer to match your email design;

  • Digits Font — Choose the font style and set the required size for the digits displayed in the timer;

  • Digits Font Color — Specify the color of the digits to enhance visibility and aesthetic appeal;

  • Use "Advanced color settings" to set up the labels and Digit colors for days, hours, minutes, and seconds;

  • Labels Font Color — Select the color for the labels ("days," "hours," etc.) to ensure they stand out;

  • Use "Advanced color settings" to set up the labels and Labels colors for days, hours, minutes, and seconds;

  • Separator Font — Choose the font style for the separator between time units;

  • Separator Font Color — Specify the color of the separator to maintain visual consistency with the timer design.

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

Carousel block:

  • Enter your email template and drag the "Carousel" block into it;

  • Drop the needed image here:

  • Add the desired number of slides by clicking on the "Add slide" button, 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 "Slide Thumbnail" button.

    Here you can set up the thumbnail image fit, size, alignment and space between them.

    Also it is possible to set up custom thumbnail (image or color):

  • For example:

  • 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);

  • Additionally, you can set up cover/contain slide image fit and thumbnail image fit.

    This settings will be especially visible if you have different image sizes:

Accordion block:

In the "Settings" tab, you will be able to:

  • Add the needed number of sections to the accordion (you can add any block);

  • Give all sections' names. You can enter up to 500 characters;

  • Adjust the padding between sections for optimal spacing using the "Set Gap Between Sections" option;

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

  • If you'd like a specific section to be expanded by default, toggle the "Expanded" option so subscribers can see the content right away;

  • By default, the "Animated opening" option is enabled to provide a smooth transition effect when opening and closing sections, but you can toggle it off if you prefer static opening and closing;

Switch to the "Styles" tab to customize the visual appearance of the accordion:

  • Adjust the font of the section titles, including font size, color, and text style;

  • Modify the alignment of the titles and apply a background color to them for added emphasis;

  • You can also add an icon to the title of each section to enhance its appearance;

  • Customize the border color and style for each section to align with your design.

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.

AMP Form block:

AMP-form is very useful for those who would like to receive feedback or any other useful information from their clients.

  • In the settings panel, you should create your service for collecting data (or add a link to the storage manually);

  • After you create your first storage you can choose it in the form-block from the drop-down list:

  • Then click the "Add form element" and select "Input";

Each input field represents one form element, such as name, email, or message. You can add multiple input fields depending on what data you want to collect.

Now let’s take a look at how to configure each input field individually.

  • To configure an input, click on the three dots next to the element and choose "Options";

  • In the "Type" tab, you can select the field type from the following: Text, Email, Number, Phone, Textarea, etc.

Once you've selected the input type, continue configuring the field in the "Settings" panel:

  • Set the input type (e.g., text, email, number);

  • Mark the field as required;

  • Show or hide the label, and customize its text;

  • Add placeholder text inside the field;

  • Assign a variable name to pass data to your backend (must be unique and valid);

  • Adjust margins for desktop view.

Then, switch to the "Styles" tab to customize the appearance of your input field:

  • Set label font, size, and text style;

  • Adjust input height and border radius;

  • Set input text color, font, and font size;

  • Choose background color for the input field;

  • Enable or disable shadow;

  • Set border width, color, and style (solid, dashed, dotted);

  • Apply border to all sides or only the bottom.

The Success tab is available only in AMP forms and is used to customize the message displayed after a user successfully submits the form.

This tab is divided into two sections. In the "Settings" section you can:

  • Toggle the "Start Again" button on or off, which allows users to submit the form again (send another feedback message);

  • Adjust padding on desktop.

In the Styles section, you will be able to:

  • Set the background color and font color;

  • Optionally add a background image;

  • Customize the border size, border radius, and layout.


How can I find out which customer left a comment?

For doing this, you should:

  • Click on the Input in your template;

  • In the dropdown labeled "Type", select "Hidden";

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


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.


Did this answer your question?