Adaptation of a custom HTML in Stripo

Imagine that you already know about the benefits of Stripo and have decided to use the service for your future emails. However, you might still be concerned about keeping a collection of email templates you will continue using.

We assure you that moving to a new email builder doesn’t mean leaving your existing templates behind.

Common scenarios for working with existing email designs in Stripo

Depending on what you start with and how much you need to change, there are 3 common scenarios:

1. You have an existing email and want to make regular content updates in Stripo. The HTML template may have been migrated from another email platform or created by a developer, freelancer, or agency.
2. You have an HTML email but want more control over its structure. In addition to updating content, you need to add, remove, or rearrange structures, use Stripo blocks, or save elements for reuse. In this case, the imported HTML will require more advanced adaptation to work with Stripo’s drag-n-drop functionality.
3. You have an email design but no code. For example, you may have a Figma or PSD design, a PNG, or another static image that you need to turn into an editable email template in Stripo.

In this article, we focus on the first scenario: importing an existing HTML email into Stripo to preserve its structure and design while making regular content updates. For deeper structural editing and advanced HTML adaptation, we recommend another article dedicated to this topic.

Analyzing the email structure

First, we selected an email example from Email Love and imported its HTML into Stripo. We’ll use it to show how the import and adaptation process works.

(Source: Email Love)

Before adjusting the email template and its code, let’s break the email down into its main sections and identify which elements you may need to update from one campaign to another. 

It also helps to see how these sections fit into Stripo’s editor hierarchy: stripes contain structures, structures contain containers, and containers hold basic blocks such as images, text, buttons, menus, etc.

1. The pre-header

The email starts with a simple pre-header, which you can treat as a separate container with simple text blocks: “View in your browser” and “Unsubscribe.” If you plan to add a specific pre-header later, then keep the text and links editable.

2. The header

The branded header includes the Flight Centre logo and a World360 Rewards promotion, placed in 2 separate containers. The header will likely remain mostly consistent across emails. However, the images and links can still be updated as needed.

3. The navigation menu

Under the header is a navigation menu with 4 options: Flights, Holidays, Cruises, and Tours. It should remain easy to edit so that you can update icons, item names, and links as needed.

4. The hero banner and main offer

A large hero banner introduces the campaign, followed by supporting copy and the primary CTA button. The structure consists of 2 horizontal containers with campaign-specific elements that may need regular updates.

5. The flight offers

The flight deals repeat the same content pattern: destination, fare details, rewards information, price, and CTA. Structurally, these repeated elements can be organized into containers with text and button blocks. The layout is a good example of content that you could later adapt into reusable Stripo structures.

6. The travel offer cards

Further down, the email uses several card-based layouts to promote tours, cruises, and holidays, which you can separate into 2 containers aligned vertically. Their layouts can remain consistent while the content and links change from one campaign to the next.

7. Additional promotional blocks

Other sections also advertise cruises and hotel offers, business-class flights, the loyalty program, and booking assistance. Even though their arrangement varies, the primary editable elements are the same: images, text, buttons, and links.

8. The app and social media links

Below is a section with social media links and a prompt to download the Flight Centre app. It uses a simple 2-container structure with text and image blocks. The text, images, and links should remain easy to edit.

9. The secondary menu

Next comes another menu with links to additional Flight Centre resources. It uses a single container, with the links kept editable for future updates.

10. The footer

Finally, the footer contains copyright information, footnotes, and contact details, all within a single container. This content doesn’t change often but should still remain editable when updates are needed.

Adapting a custom HTML for Stripo

How to import the HTML and CSS into Stripo

We have figured out the email structure and what we can change. Now it’s time to import the HTML file into Stripo and learn its features.

The fastest way is to click the arrow icon in the upper-left corner of the Stripo account.

Then, click the drag-n-drop area and upload the HTML file from your computer or cloud storage.

Alternatively, you can paste the code directly into Code Editor. To do this, select the “Paste Code” tab.

Once you upload the template, it appears in Stripo. You’ll see the email preview area (1) and Code Editor, where you can switch between the HTML (2) and CSS (3) sections.

Depending on how the original email was built, its CSS styles may be included directly in the HTML, typically inside a <style> element in the <head>, for example:

You don’t have to separate the HTML and CSS to work with the imported email in Stripo. However, keeping them in their respective sections of Code Editor can make the code easier to navigate and edit.

For convenience, we’ll demonstrate this with our example. Cut the CSS rules from the <style> </style> element and paste them into the CSS section of Code Editor, leaving the HTML in the HTML section.

After this manipulation, the HTML (1) and CSS (2) sections look like this:

How to edit images and links in HTML

Stripo shows your imported email in the visual area, but you might notice that the images are missing. This happens because whether images appear depends on their original links. 

If an image uses a public and accessible URL, it should display as expected. But Stripo cannot load it if the HTML points to a local file, a private or temporary location, or an old link. In that case, you will need to upload the images and update their links.

We’ll do it later. For now, click the “Holidays” link in the email menu.

You can edit the link and its title immediately after importing the email into Stripo, either through the settings panel on the left or directly in Code Editor.

The same applies to images: you can edit them, their links, and alternate text immediately after import.

To replace an image, select it in the email, then click the “Replace image” icon in the settings panel on the left.

This opens the image library. From here, you can upload images from your computer by dragging and dropping them into the upload area.

You can also add an image using a direct link. This works well when you only need to replace a couple of images; for multiple assets, uploading them to the library all at once is usually faster.

In our case, we have selected the Flight Centre logo from the library, which will automatically be pulled into the email.

You’ll notice that the image path in the HTML code updates automatically. Repeat the same steps for the remaining images in the email.

How to edit text blocks in HTML

Stripo usually recognizes text elements automatically after you import your HTML, so you can edit them directly in the visual editor. However, some text may not be recognized as editable. This happened with the footer text in our template. In this case, add the esd-text class to the element that wraps the entire text block, such as <p>, <div>, <td>, <h1>, <h2>, or <h3>.

You can also add this class to a <span>, but only if it contains the entire text block. If the <span> wraps only part of the text, apply esd-text to its parent element instead.

Once the esd-text class is applied, click the text block in the email preview. You can then edit the content directly in the visual editor and use the settings panel to adjust its formatting and style.

Previewing and testing the adapted HTML email

After you’ve finished editing the email, it’s time to check how the recipients will see it. Click “Preview” in the Stripo header to open Preview mode.

Here, you can check how the email will look on both desktop and mobile devices. But, the banner images are missing from the mobile version. Let’s check the code to find out why.

To investigate the issue, deselect any element in the email visual area and click on the Code Editor icon. This will open the editor with the email’s full HTML code.

Scroll through the code until you find the banner:

The email includes separate banner images for desktop and mobile devices. This is a typical example of a responsive email approach rather than of just reducing the size. A wide desktop banner could make the text hard to read on a small screen. This shows an image designed specifically for smaller screens.

In the screenshot listed above, the desktop banner (1) and the mobile banner (2) links are highlighted. The mobile banner is not displaying because its image path is incorrect.

To fix this, choose the image in the email and click on the “Replace image” icon. Find the correct banner in the image library and copy its image URL.

Then, return to the HTML code and replace the incorrect image path with the copied URL. Let’s preview the email again and check the mobile version:

We solved the problem, and the mobile banner now appears properly, but the desktop version remains the same.

You can also switch to dark mode in Preview mode to check how your email looks with a dark color scheme and spot any potential readability or design issues.

The final step is to test your email before sending to see how it renders across different email clients and devices. Stripo offers this functionality through its integration with Email on Acid, so you can spot rendering issues across desktop and mobile environments, including dark mode, before sending.

That’s all you need to get started quickly with imported HTML in Stripo. This approach works well when you mainly need to update existing content, but structural changes still require working with the code. If you want to add, remove, or rearrange structures using Stripo’s drag-n-drop editor, then you’ll need to adapt the HTML further, which we cover in the second part of this article.

Other ways to import emails into Stripo

Stripo also provides other methods for getting your existing emails into the editor. You can upload an HTML or MJML file to convert it into an editable template, or use a ZIP archive if your email contains extra assets. Stripo has also launched email import, so you can take an email directly from your inbox and place it into the editor. For more details, refer to our articles on design import and email import methods.

Wrapping up

There is no need to start over and rebuild an HTML email if you want to continue working on it in Stripo. After it has been imported, you can modify its content, substitute the images and links, edit the text, and preview or test the results before sending the email. If you require greater control over its structure, you can adjust the HTML by using Stripo-specific block classes so that the various elements become available in the drag-n-drop editor.