timer ~ 5 min read
rate it
31 August 2017

Editing HTML and CSS Codes in a Visual Block Editor Stripo.email

Stripo / Blog / Editing HTML and CSS Codes in a Visual Block Editor Stripo.email

To help you create responsive email templates, typically, there are 2 types of editors: the code editor and the block editor. This is connected, in my opinion, with two reasons:

  • not any code can be adapted to the internal layout of the block editor;
  • if you allow the user to do more permissible editor, then he will certainly break everything, and the system will always be guilty and the support service will be raked.

BUT, these reasons are all of a technical nature, not a custom one. In this very often there is a desire to slightly change the generated code or insert your «snippet».

Interesting observation of the emails in eSsputnik: the developers of the emails open the code inspector, change it there and immediately look at the result as it is very convenient. Code inspector makes it possible to write safe HTML closing all unclosed tags, etc. But the main thing is a quick result. Any change in the email leads to a change in the code and vice versa. Another cool plus of using the code inspector is that it focuses only on the selected item, quickly finding that piece of code that you need.

Along with the syntax highlighting, these three features formed the basis of our editor:

  1. edit only the portion of the code we are working on;
  2. apply changes quickly in both directions;
  3. ensure the security of the entered code by closing the tags.

Identify the highlighted code is very easy. I already wrote that we have a hierarchy of content in the email: a stripe, a structure, a container, a block and an elementary element. Selecting the corresponding fragment in the code editor shows only the selected code and does not allow, on the one hand, to change the external code, and on the other hand, it focuses on the necessary code fragment.

There is one more principle that should be described separately: we decided to abandon pop-up windows. This is the topic of a separate post. In particular, this principle makes it easy to change HTML and monitor changes.

Let’s talk about styles

The emails still cannot fully use the external styles listed in the head or body style. It is recommended that some styles be inserted into the inline elements. But at the time of editing, it would be good to use common styles and be able to say that in the footer of an email, for example, all links should be unstressed.

In addition, in the body of the CSS email, the styles and code of the fragment are in different parts.

Therefore, we selected the styles in a separate tab editor (in principle, as in the code inspector for Chrome). Thus, an advanced user can add and rewrite it as desired, add media selectors and proprietary features. And at the time of exporting the email, we run an inline program that inserts the CSS as it should. An ordinary user can change all styles using the control unit: to design and save different topics of emails within the project. About this, too, there will be a separate post.

Own code markup

You can simply edit any block as the specialist deems necessary, and save it to the library for later use. Moreover, you can take and download there any arbitrary HTML and CSS. In this case, only the editor of pictures and links will be available from the entire block editor. Because these are the usual standard elements of writing that do not require special markup.

At the same time, there are such blocks as, for example, a menu, or a container, which have special service styles and enable you to understand what kind of block it is. During the editing, we make sure that they are not violated. But this functionality allows you to customize other people’s templates for the features of the Stripo editor. For example, mark a block as a container and it will acquire all the necessary properties and there it will be possible to add other blocks. How to configure the template I will describe in one of the individual posts. Also, I would like to make a separate «wizard» on adapting an arbitrary HTML to the eSputnik editor. But this is not a priority for the next month, so I do not write about it yet.

In plans, you must write a manual for the preparation of an arbitrary HTML by Stripo. It is so lacking in many systems. Here, for example, MailChimp has recommendations on how to use MC: Edit and this allows us to insert these attributes into Mailchimp during the export process and to be able to edit the text in Mailchimp not in the code, but in the interface.

Feedback from the developer

Recently we got a message from the developer of a European design studio for emails. We talked, phoned to tell about the plans and get more feedback. I asked if he saw the editor, and he said that the first thing he looked at was how to change the HTML, and after that he continued his acquaintance with great care, because he did not use it more conveniently. It’s nice, damn it. Although I also like criticism. So do not be shy to share your opinion on Facebook with us.

You might be interested in

previous next
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
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 Templates
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 have....

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