What is The Code Editor, and How to Use It?
For those experienced in HTML and CSS for email development, as well as those looking to improve their email presentations, this guide provides valuable insights.
- How to Open the Code Editor
- Understanding the Code Editor Interface
- Editor Sections
- Code Editor Settings
How to Open the Code Editor
To open the code editor, open the email and click the code icon in the top right corner.
You will then need to confirm that you want to switch to the code editing mode.
Important: Please note that the code editing mode disables some options available in the regular editor, and you will not be able to edit them later through the block editor.
Understanding the Code Editor Interface
When the code editor opens, it displays elements based on the current focus in the editor window:
No Focus: If there was no focus when the code editor was opened, the entire message is displayed.
Element Focused: If an email element is focused, the editor will show the corresponding element's code.
The code displayed in the editor will change as you move focus to different email elements.
Editor Sections
The code editor is divided into three sections for HTML, Default CSS, and AMP code:
- HTML Tab: Contains all the main code. You can edit existing tags, their classes, add your own, or write custom tags in this tab.
CSS Tab: Contains styles for the tags in the HTML tab. Email styles are grouped for desktop and mobile devices, allowing you to see styles that are responsible for email responsiveness.
- AMP Tab: Contains the email code in AMP format. This tab is available if you have previously added an AMP block or want to create an AMP block within the email.
Code Editor Settings
You can choose the color scheme of the code editor. To do this, click on the gear icon and select your preferred theme.
Also, in the top right corner of the code editor, you will see:
- The number of errors in the current email code
- The size of your email
- Icons for adjusting the font size in the code editor
