In this section, we gathered some advanced controls that can help your customers create their email templates in the most powerful way.
Please be advised that this option is included in paid plans only.
The list of controls with their explanations is as follows:
Element Hiding:
If you turn on this control while configuring the plugin, it will be added to the set of controls for every basic block (e.g., "Image," "Text," "Button," etc.), containers, structures, and stripes and will look like this:
When a customer selects any of the elements in the editor and then decides not to display it on mobiles or on desktops, all they need to do is activate this control, and this is it — this element won’t be displayed when the email is opened on mobile devices or on desktop ones respectively.
For example:
Mobile Padding:
In case you turn on this control while configuring the plugin, it will be added to the set of controls for structures, stripes, and basic blocks (e.g., "Image," "Text," "Button," etc.) in the Padding section and will appear like this:
When a customer selects any structure or block in the editor and then decides to set up individual padding for mobile, all they need to do is activate this control and enter values — this structure or block will be displayed with the specified padding values on mobile devices.
Containers inversion on mobile:
If you turn on this control while configuring the plugin, it will be added to the set of structure controls only if there are 2 containers in it (the control will be hidden for structures with 1 or more than 2 containers inside) and will look like this:
Please be informed that by default, this control is turned off, and also, this control won’t be active if a customer turns off the "Responsive structure" control.
This control specifies which container should be displayed at the top and which one at the bottom for the mobile version of the email template.
If a customer turns on the "Container inversion on mobile" control, the container will be placed on mobile the following way:
the first container on the desktop will be displayed as the second container on mobile;
the second container on the desktop will be displayed as the first one on mobile.
Basic block alignment on mobile:
If you turn on this control when you configure the Plugin, the mobile icon will be added to the "Alignment" control of every basic block (e.g., "Image," "Text," "Button," etc.) that has the "Alignment" control and will appear like this:
By default, this icon is not activated, which means that the selected alignment is relevant for the desktop version, yet it will be the same for the mobile version if we do not specify another value.
To specify another value, we should click on the "mobile" icon, it becomes activated (clicked), and then we need to choose another alignment by clicking on a proper icon here:
To switch back to the desktop version, you should just click on the "mobile" icon again (it gets its default state when it’s non-clicked).
Border of the content part of the stripe:
If you turn on this control while configuring the plugin, it will be added to the set of stripe’s controls and will look like this:
It allows setting the border for the content area of a selected stripe. It is possible to configure the border line type (straight, dashed, dotted line), its color, and width for all sides or for a particular one (like only on the left side, or at the top, etc.)
Container Background Color:
In case you turn on this control while configuring the plugin, it will be added to the set of container’s controls and will appear like this:
It is obvious that this control allows setting up the background color for the selected container.
For example:
Structure Background Image:
If you turn on this control while configuring the plugin, it will be added to the set of structure’s controls and will appear like this:
This control allows setting up any image as a background for a selected structure. It enables to configure the alignment and provides the ability to repeat a chosen image.
Container Background Image:
If you turn on this control while configuring the plugin, it will be added to the set of container’s controls and will appear like this:
This control allows setting up any image as a background for a selected container. It enables to configure the alignment and provides the ability to repeat a chosen image.
Management of Container Numbers and Sizes in the Structure:
If you turn on this control while configuring the plugin, it will be added to the set of structure’s controls and will appear like this:
It allows adding a new or removing an existing container within a selected structure (it is possible to add up to 8 containers in 1 structure). This control also allows changing the container’s width and indents between them.
Please note that if you click on the Equalize button, the width of containers will become equal automatically, and all opportunities to change it will be disabled. To apply the changes, please click on the Equalize button again.
Image path Configuration:
If you turn on this control while configuring the plugin, the extra "URL" control will be added to the set of the "Image" block controls (as well as for the Menu, Banner blocks, etc.) and will appear like this:
It allows specifying/replacing the URL to the image without making any changes to the HTML code. This feature is useful in case a user doesn’t want to place the image in your storage and simply wants to host it elsewhere (on an Internet site or any own storage of their own).
All they have to do is click on this "Link" control and replace the image URL with the required one in the "Image path" field.
Smart-element Properties:
This option provides the ability to activate smart properties for containers, structures, and stripes. If you activate this control when you configure the Plugin and the user selects any container (structure or stripe), the new "Data" tab will be displayed at the top above the set of controls.
In this tab, a customer has the ability to activate smart properties for a selected element and perform its configurations.
For more information about smart properties, please refer to our blog post – https://stripo.email/blog/smart-elements-reducing-time-creating-similar-letters-automating/.
AMPHTML MIME Type Support:
In March 2019, Google released its AMP for emails technology. And as of July 2, 2019, it is available even for the G-Suite users and is “on” by default for all Gmail users.
It allows senders to include AMP components inside engaging emails, making modern app functionality available within the email. This dynamic email format provides a subset of the AMP HTML components to use in email messages, allowing recipients of AMP emails to interact dynamically with content directly in the message.
Since June 18, 2019, Stripo has been supporting the creation of a new AMP HTML format of email template in the editor. To provide this option to your users, you may activate the "Support of AMP HTML Mime type" on your Plugin details page. When it is activated and the user selects any block or container (structure or stripe), the new control will be added to the settings panel and will appear like this:
By default, all elements will be included in 2 versions of an email template: a traditional HTML version and AMP HTML version.
But users have a choice to include any element only in a particular version, for example, only in HTML or only in the AMP HTML version. In this case, that element will be highlighted with an orange border and a tooltip that indicates in which version that element is included.
For more information on how to build AMP emails with Stripo, refer to our blog post – https://stripo.email/blog/how-to-build-amp-emails-with-stripo/
Please be advised that if the email template has at least one element that is included in the AMP version (or if it has a custom code with AMP components), then when you call the compileEmail JS function or compress method from your server, in addition to HTML version in response, you will get the AMP HTML version of your email template.
For more details, go to the Plugin Invocations section.
Image editor:
This option helps you to enable or disable the image editor embedded in the Stripo Plugin. It helps to apply different effects to images, change their sizes, shapes, etc.
When it is activated and the user selects any image in an email template, the new control will be added to the Settings panel and will appear like this:
Rollover effect:
This feature is also known as a mouseover. When you place a mouse cursor over an image, it is being replaced with another one.
The image rollover effect works on desktop devices only. Other users will see the primary image. It can be applied to any image you add in the email except for the banner one.
How to implement an image rollover effect with Stripo:
Upload your first image;
In the settings panel, toggle the "Rollover effect" button;
Upload the second image — edit it if necessary;
Insert a URL link — it will be tied to both images;
Enter the "Alternate text";
Set alignment and size of the images.
Read this article to learn more about how the image rollover effect can be used.
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.