Individuals versed in HTML and CSS for email development, as well as those aspiring to enhance and refine their email presentation, will discover valuable insights within this content.
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:
⁃ The "HTML" tab contains all the main code.
You can edit existing tags, and their classes, add your own, or write custom tags in the editor.
⁃ The "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.
It is important to note that if you want to change the Default CSS, you need to point at the code, and you can "Override" it in the Custom CSS section and configure it there according to your needs:
Furthermore, if you would like to duplicate or excise the code of a particular Stripe, Structure, Container, or Block please activate the "crosshair" icon and elect a specific segment within your email blueprint.
Subsequently, the editor will reveal the complete code of the chosen Stripe, structure, container, or block, highlighted for your convenience, enabling effortless copying or cutting:
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, and 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.