Users familiar with HTML and CSS email coding and those who want to customize, further customize, or customize the display of emails will find this article helpful.
How to use the code editor?
To open the code editor, click the corresponding button on the top settings panel, and here we go :)
Please note that when the code editor opens, it displays elements corresponding to the current focus in the editor window.
For example, the entire message is displayed if there is no focus when the code editor is opened.
If some email element is focused, you will get access to the corresponding element code.
This way, the current code displayed in the editor changes when the focus is moved to another email element.
The code editor is divided into 3 sections: HTML, Default CSS, and Custom CSS.
- HTML tab contains all the main code.
You can edit existing tags, their classes, add your own, or write custom tags in the editor.
- Default CSS tab contains styles for tags in the HTML tab.
Email styles are grouped by styles for desktop and mobile devices (you can see styles responsible for email responsively).
- In the Custom CSS tab, you can add your own CSS code without harming the main CSS generated by the editor.
Also, if you want to copy or cut the code of a certain Stripe, Structure, Container, or Block, this function will help you.
Click the "crosshair" button and select a desired section in your email template.
In this case, the editor will show you the entire code of that Stripe, structure, container, or block, and it will already be selected, and you just have to copy or cut it.
Also, if you are in the code editor and want to understand where this code is located in the email template, this feature will be useful to you.
You just need to click on the "highlight" button, then select the code, and you can see visually where this content is located in the email template.
Additionally, when you are in the code editor and want to structure the code to seem more attractive or professionally indent it between tags, this option will be helpful to you.
You just need to click on the "pound" symbol, then select the code, and it allows you to make the code more readable in the email template.
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.