Email’s visual block editor

Usually, there are 2 types of editors for creating email templates : a code editor and a block editor . In my opinion, this is due to two reasons:

 

not every code can be adapted to the internal layout of the block editor ;

If you give the user free rein to do more than what the editor allows, he will certainly break everything, and the system will be to blame as always, and the support service will have to take the fall.
BUT, these reasons are all technical in nature, not user-related. At the same time, very often there is a desire to slightly change the created code or insert your own “snippet”.

An interesting observation about letter america cell phone number list  layout designers in eSputnik : letter developers open the code inspector, change it there and immediately look at the result, as it is very convenient. The code inspector allows you to write safe HTML by closing all unclosed tags, etc. But the main thing is a quick result. Any change in the letter leads to a change in the code and vice versa. Another cool advantage of using the code inspector is that it focuses only on the selected element, quickly finding the code fragment you need.

Along with syntax highlighting, these 3 features are the basis of our editor:

 

 

Edit only the section of code you are working on;
Apply changes quickly in both directions;
Ensure the security of the entered code by closing the tags.
It is very easy to identify the selected code. I have already written that we have a hierarchy of content in the letter: strip, structure, container, block and elementary element. By selecting the corresponding fragment in the code editor, only the selected code is shown and does not allow, on the one hand, to change the external code, and on the other hand, it focuses on the necessary fragment of the code.

There is another principle that is worth describing separately: we decided to refuse pop-up windows. This is the topic of a separate post. In particular, this principle allows you to easily change html and track changes.

A little bit about styles
In letters, it is still impossible to use external what is alexa rank? 4 amazing uses of the alexa ranking tool styles listed in head or body style in full. It is recommended to insert some styles into inline elements. But at the time of editing, it would be good to use common styles and have the ability to say that in the footer of the letter, for example, all links should not be underlined.

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

 

That’s why we’ve separated the styles into a separate editor tab (basically, like in Chrome’s code inspector). That is, an advanced user can finish writing and redefine it as they wish, add media selectors and their own features. And when exporting a letter, we launch an inliner that inserts CSS as expected. A regular user can change all the styles using the control block: format and save different letter themes within a project. There will also be a separate post about this.

Custom code markup
You can simply edit any block as the specialist agb directory  deems necessary and save it to the library for further use. Moreover, you can take and upload arbitrary HTML and CSS there. In this case, only the image and link editor will be available from the entire block editor. Because these are ordinary standard elements of the letter that do not require special markup.

 

Scroll to Top