When editing templates we have a powerful editor that can create amazing email templates.
Let's start by reviewing the buttons in the top left corner and what they do.
This first button is the "View Components" button. This will show the outline of all the elements on the editor, which you can see below the 2-column element which was not visible in the editor above.
This button will turn the editor fullscreen to give you a better experience when editing.
This button will allow you to see the HTML code generated by the editor in case you want to export it elsewhere.
This button will allow you to insert HTML code into the template. Please note that this will override whatever is currently in the template.
This button will undo your last change.
This button will redo your last undo.
This button will clear the entire editor.
The following button appears at the top right which will show you what your templates would look like on a desktop, tablet, or phone.
This is the tablet view.
This is the phone view.
Now for the right sidebar. This is where you can drag and drop elements into the editor. Here we added the first 4 elements to the editor (1 Section, 1/2 Section, 1/3 Section, and 3/7 Section). Here you can place text, images, or other elements to create the email template.
You can also drag and drop dividers between these sections to add spacing.
In the 1/2 section, we have dragged and dropped a text section to the left box and an image section to the right.
By double-clicking on the sections, you can edit the text or insert an image.
The text editor will also allow you to insert fields, as shown below.
In the 1/2 section, we replaced the text element with Grid Items and the Image element with List Items.
These items are a bit more formatted, with images and text pre-built next to each other.
You can change the styling of any element on the page by clicking on it and choosing the leftmost menu in the sidebar.
The following are the options in the sidebar. These options would be the CSS for the element.
The Component Settings allow you to set an ID or Title to the element.
The layer manager helps you find the specific element you are looking for.