timer ~ 7 min read
81784 views
rate it
23 October 2017

Part 2. Advanced Version of The Email Template Adaptation

Stripo / Blog / Part 2. Advanced Version of The Email Template Adaptation

In the previous article, we reviewed how to adapt custom HTML template emails to work in the Stripo editor so that you can edit images, links and text via CKEditor without the «looking under the hood» (in the HTML code of the email template).

In today’s article, I want to reveal a more complex topic — how to make an email template made on the 3rd side (in effect — custom layout) become fully adapted in Stripo for editing any element (container/structure/strip) and base blocks in drag’n’drop mode, get the most of the settings and features of the Stripo editor.

For example, we will use the same hotwire template, taken from reallygoodemails.com (you can download the HTML of email here).

Structure of nesting Stripo emails

First of all, let’s look at the nesting of elements in Stripo emails, containing strips, structures, containers and blocks.

Let’s consider an example of a Stripe in which there is a structure with two containers and blocks «Picture» and «Text».

01-Stripo-nesting-of-elements-of-editor

As you can see from the diagram, all elements are table cells with certain classes.

  1. Strip with class esd-stripe;
  2. Structure with class esd-structure;
  3. Container with class esd-container-frame;
  4. Block with classes, in this case esd-block-imageesd-block-text.

If your layout is built on a similar principle, this will allow the most convenient adaptation of the email in Stripo.

Strip → Structure × n → Container × n ≤ 4 → Block × n

  • there can be as many Structures in the Strip;
  • there can be Containers in the Structure, now not more than 4, but soon we will give the opportunity to increase the number of Containers and make them dynamic;
  • any number of Blocks can be in the Container.

Almost always there is a space to add a class for strips, structures and/or containers. It is not always possible to add a class for blocks so that they are correctly adapted because their layout is very specific. Therefore, we recommend adding the esd-block-html class to the wrapper of such a block, then Stripo will be able to edit such a block through HTML, with active block controls (save, move, copy, delete). Or create the same content of the email based on our blocks, just dragging them into containers, but this we will do in the third part of the article.

List of available block classes

esd-block-image — a class for defining the «Picture» block;
esd-block-text — a class for defining the «Text» block;
esd-block-button — a class for defining the «Button» block;
esd-block-spacer — class for defining the «Spacer» block;
esd-block-social — class for defining the «Social Network» block;
esd-block-html — a class for defining the «HTML» block;
esd-block-menu — a class for defining the «Menu» block.

Let’s start adapting our email template.

The process of email template adaptation

Strip adaptation

Let’s start by searching for a table cell where you can insert a class for the strip. Such a table was found — this is the whole email header. Set the cell class esd-stripe.

02-Stripo-Header-adaptation

You can check the result immediately — hover the mouse or click on this area, you will see a frame with the controls.

03-Stripo-Header

Let’s try to copy the current strip with the cap and create a new strip already with the layout of Stripo.

04-Stripo-Copy-of-Stripes

Structure adaptation

Now add a class for the esd-structure.

05-Stripo-Menu-Adaptation

Similarly to the strip, the frame has a frame and controls.

Basic Blocks Adaption

Now we adapt the existing content in the header.

There is one nesting in the HTML header of the email that would allow us to organize the Container. But in fact, you can do without it, since we know that we need containers to unite many Blocks. In this case, we have one «Picture» block and a set of menu links.

We turn the pre-header, the logo and the menu into blocks.

06-Stripo-Preheader-adaptation

07-Stripo-Logo-adaptation

08-Stripo-Menu-Adaptation2

Now let’s proceed to a more complex block — the product card. Here, we lack one nesting — the Container, so that it is possible to drag blocks from the block panel.

First, we add classes for the strip and the structure — everything is simple:

09-Stripo-Cards-adaptation

Next, we find the cell of the table in which the text «3-Star Hotels TORONTO» is located, and indicate to it the class esd-container-frame — this will be our Container.

10-Stripo-Cards-adaptation2

Then all that is located ① ② in the cell esd-container-frame, wrapped in a table — this will be our blocks. All the content of this area is plain text and a picture with stars, so we get the Text and Image blocks. We specify the class esd-block-image cell for the first line, and the esd-block-text block for the second line.

11-Stripo-Cards-Adaptation3

Cut out the pieces of code corresponding to the blocks and insert inside the cells of the new table.

Stripo turned this content into native blocks with controls. In addition, it is now possible to «throw» blocks from the panel of blocks into the container’s area.

12-Stripo-Cards-adaptation4

We turn the sections with the price and the button into blocks:

13-Stripo-Cards-adaptation5

The source code for the cost of the price allowed to add classes to existing cells. And the button code is not. You need to wrap it in a table and apply the esd-block-html class, not the esd-block-button, which would be logical. Why is that? Because in this case, the current button is not recognized as a Stripo button due to too much difference in layout.

14-Stripo-Cards-adaptation6

In such cases, it is convenient to use the esd-block-html class in order to leave the source code but to be able to control the block.

In exactly the same way, we adapt the remaining custom HTML to Stripo blocks. You do not need to do everything manually each time for all the cards. It is enough to make two cards in the same structure, and then duplicate this structure with the button that is in the controls, and then just replace the text and pictures.

15-Stripo-Copy-of-card

Results

We managed to figure out how to turn arbitrary HTML into Stripo blocks, which ultimately made it possible to more comfortably manipulate the content of the email (except for direct editing of text and pictures, we can copy, move, delete and save blocks, containers, structures and strips).

Nevertheless, there are some limitations that do not allow Stripo to maximize its capabilities. In the next article, I’ll tell you and show how to use Stripo to the full and make the same template from scratch, right in the editor!

In the meantime, do not hesitate to try to adapt your email templates yourself to work in our editor. If in the process you have any questions, the difficulties associated with the adaptation, please write to us at contact@stripo.email and we will be happy to help you!

David Kim 1 year ago

When's part 3 gonna come out?

Hanna Kuznietsova commented to David Kim 1 year ago

Hello, David. Thank you for your question. The third part came out. We shot a video instead of a blog post. Here's the link to it. https://www.youtube.com/watch?v=Khzpz-hSJFc&t=1s But it is in Russian. Please, turn on the English subtitles. https://prnt.sc/1qt51ml If you have any questions, please let us know.

Rusbel Leon 1 year ago

nice

Jardel Amorim Suporte 1 year ago

why

Moreno Matta 2 years ago

ok

You might be interested in

previous next
banner9
06 June · 15 min read
10 Best Email Template Builders for 2022

Do all email template builders seem alike? You are now confused about which one to choose for your email campaigns, aren’t you? No wonder, as there are so many of them.  We will survey the most popular builders to find their distinguishing features to help you find the best HTML email builder for your current needs. I will try to create one template in all these editors with the same media files to see if the builders differ. The best...

Design Marketing Templates
best-fonts-for-email-cover-image-stripo
24 May · 18 min read
Best Fonts for Email: Usage Tips and Tricks

One of the most striking concerns in the email production process is choosing the right font. Weight, height, width, color, shape, spacing… Does everything matter? Yes, it does, but also one of the most crucial things is to choose legible typography. In this post, we're going to show you how to choose the best professional font for email. Design beautiful emails with Stripo by using prebuilt templates Browse   HTML email fonts: General rules to follow There are three ground...

Design Marketing
Greatest Examples of GIF animations in Emails_Cover Image
27 October 2021 · 10 min read
16 Great Examples of Animated GIFs in Emails

GIFs in emails will be of great use if you want to showcase your product, draw users’ attention to certain elements, or just slightly decorate your text. In this article, we have provided some of the best email gif animation examples. Examples of animated GIFs in emails Here’s a compilation of the best examples with GIFs in emails. Each GIF fulfills its mission. 1. Adidas (Source: Email from Adidas) Adidas used email animations to show what color options they had....

Design Marketing
08 April 2021 · 17 min read
14 Best Email Signature Design Examples

Good email signatures help us build our business and make a lasting impression on potential clients. Since email signature is the last thing people see in emails, we should make them creative and memorable. Let's examine useful tips and real-life examples of email signatures from famous companies and their appropriate use in personal emails and newsletters. Please be advised that all types of businesses require different professional email signatures with detailed contact information, job title, and much more. Use this...

Design Marketing Templates
Be always wide awake in recent email marketing news, guides, articles and how-to’s