Email designs can be created in two ways:
Create HTML template
HTML template editor is designed for those who have already pre-built HTML template or at least basic knowledge of HTML and CSS. Editor contains two editing modes (Visual and Source), which you can switch in panel shown in figure:
By default there’s Source mode in open editor. Here you can paste your pre-built HTML template and then edit as in the common programming editor.
Upload images button enables upload and hosting of images displayed in the email.
Each uploaded image is automatically recognised the source code. For example, if you have in the source code <img src = “” / data / mypicture.jpg “/>, and then you upload file mypicture.jpg, editor will automatically match image with correct IMG element.
Edit template in visual mode
If you already have imported source code with images go to the Visual section where you can see editable preview of template. In case you have a responsive template you can switch between the different sizes of window and test such behaviour on mobile, tablet or PC. If you click on the text, you can directly edit a selected part of the text.
To change the formatting of the text, click the pencil icon. It will open dialog with simple WYSIWYG editor:
If you need to change any image in the template, just put the mouse over an image to show editing options.
By clicking the pencil icon , you will see a dialog box where you can replace image with another one:
- uploaded a new image
- enter url of external image
- choose some of previously uploaded images
If you want to change url of image link, click on icon . Any change that will happen in the source or visual mode is real-time synchronized. So any time you can see actual version of your email template.
Dynamic properties can be inserted into your template. Personalisation component located at the bottom of the editor. You can choose from 4 options:
- Customer properties – allows you insert customer attributes into email
- Recommendations – allows you to display dynamically generated list of products in a particular place in emails
- Unsubscribe link – generates HTML snippet of unsubscribe link
- View link – generates HTML snippet of view link
If you select any of the 4 options, you have to copy & paste generated string into the template (in the case of unsubscribe link or view link you have to insert string directly into source code).