With the Designer email editor there is no need to rely on an external agency or to know HTML, CSS or JavaScript. This editor enables you to create emails with great design flexibility and little effort, manage your media files, re-use saved content, add comments for review and much more...
With very intuitive and easy drag-n-drop features, the editor allows you to:
- Define the global settings of your template, such as the default font or the background color.
- Add rows, aka. elements of structure that you can save and reuse in another template.
- Add and configure content: title, text, images, buttons, social media links, etc.
- Manage your images in folders.
- Add comments for review by colleagues.
- Preview the result on desktop or mobile.
- And much more...
| Widget Connector | ||
|---|---|---|
|
Below we are going to explore the Designer email editor. At the end of the page you'll find a Q&A video and the link to continue this training unit. We encourage you to feel free to explore this tool and play around with it. Do not forget to save your template even half way, you'll be able to come back and keep working on it at any time.
SCREEN LAYOUT
On the left you can see the general layout of a brand new email template.
In the central zone, you will be able to see the following:
This button will enable you to see how the message would be displayed in a computer or in a smartphone. The option selected will have the- blue background.
This two links (View in browser and Unsubscribe) will always be added automatically to your emails. To be compliant with the GDPR, you must keep the Unsubscribe link available and visible in all the marketing emails you'll send.
Once you start editing your email template, these buttons will appear on the bottom left of the email template creation zone. With them you'll be able to go back and forth between modifications.
On the right, all the options within the tabs Content, Rows and Settings will enable you to build your email.
SETTINGS
On the Settings tab you'll be able to manage the general settings of the email template:
- The width: Fixed for smartphones, but modifiable within the desktop view.
- The content area alignment: Left or center.
- The general background and the content area background colors: As you can see, you can even introduce a very precise HTML color code.
- A default font: There are many options, but if you could not find the right one for your institution, it is possible to add a font to the options though a service request.
- A default link color.
ROWS
On the Rows tab, you will be able to build the layout of your email by dragging and dropping rows with differently sized columns where you'll be able to allocate content afterwards.
However, at any moment you'll be able to readjust the size of the columns, and even add new ones just by selecting the row:
In the image above, you can see that when you select a row of a template, you'll be able to access the "Row properties", add comments
, delete it
, duplicate it
and save it
.
You can also click on this symbol to move the block around.
Within the "Row properties" you'll be able to set up many other options (see picture on the left). Here are a few interesting ones:
- Do not stack on mobile: the column division of the row will not be altered. If you choose to stack them they'll be displayed one on top of the other on the mobile visualization.
- Reverse stack on mobile: the columns of a row will be stacked from right to left instead of from left to right.
Display condition - Add condition button: Not available yet.- You could hide the row when displayed on a desktop
or on a mobile
. You can customize the columns width, as seen above too.
You can customize the style of each column: background color, padding (distance between the border of the column and the text), borders and their style.
You can also select the "Saved rows" and search them by key word: Saving a row is particularly useful to save footers, logos and links to social media or partners, as well as signatures.
When saving a row it is highly recommended to save it with a strategic name so that each organization within your institution can easily find theirs.
CONTENT BLOCKS
In order to add content, you just need to drag and drop , into the columns of the rows , almost any of the content blocks that you can see in the picture on the left: The "Dynamic content" is not supported yet.
You can also drop more than one content block per column.
When clicking on a content block, you'll be able to see the small black menu appear (see picture above). Aside from very common formatting options, you'll find a few other interesting ones:
- Special links: They are the same as the ones that were automatically inserted in your email template from the very beginning: "View in browser" and "Unsubscribe".
- Merge tags: They enable you to introduce dynamic fields that will be automatically filled out with the information of each contact you'll send your campaign to. On the right you can see a picture of all the merge tags that are currently available. We will learn more about the Invitation/advantage code in the "How to create a campaign" chapter of this training unit. Below you can find how a merge tag will be displayed within the text of your email template:
When selecting a content block already dropped on your template, you'll see that a whole new set of options are available now within the Content tab:
- The font family: By default, the global font will be selected (this is the font chosen in the parameters tab), but you can change it within any content block.
- The font weight (regular or bold) and size.
- The text and link colors: Also set by default in the parameters tab, but here, as the for family, you can modify them per content block.
- The alignment of the text, the space between the paragraphs (paragraph spacing), the space between the lines (line height) and the space between each letter (letter spacing).
At the very bottom, you'll see that you can also set specific content bock options regarding the padding (space between the text and the borders of the bock), and the display of the block:
You could hide a specific block only, instead of a whole row, when the email is displayed on a desktop or on a mobile screen.
For example: Here I chose to hide the "New paragraph block" when displayed on a mobile (see picture below). As you can see, when the eye button is selected 
, you'll be able see any hidden block on your template... blurry.
But as soon as you unselect it, it will disappear:
.png?version=1&modificationDate=1652958956079&cacheVersion=1&api=v2&width=500)
IMAGES
usieurs options sont disponibles pour ajuster la taille de l’image :
- Largeur automatique,
- Pourcentage de la largeur de la colonne,
- Largeur complète sur mobile.
« Modifier l’image » permet d’aller chercher une autre image dans la bibliothèque.
« Appliquer des effets » permet de retoucher l’image (filtre, recadrage, rotation…). L’option “image dynamique” n’est pas supportée.
Dans la partie « Action », 4 actions sont possibles au clic sur l’image :
- Ouvrir une page web : il suffit d’insérer l’adresse de la page dans le champ L’option « Add a custom Special link » n’est pas supportée.
- Envoyer un mail : il faut alors renseigner un destinataire et éventuellement l’objet et le corps du
- Lancer un appel téléphonique
- Envoyer un SMS
Quand on insère une nouvelle image, il est possible, soit de glisser l’image, soit de saisir l’URL de l’image, soit de
cliquer sur le bouton « parcourir » pour accéder à la bibliothèque intégrée :
Téléverser permet de charger une image depuis son poste.
Importer permet de récupérer une image sur internet ou depuis un compte Instagram, Facebook…
Le bouton permet de créer des répertoires pour classer vos images.
Il est également possible de chercher une image enregistrée par son nom à partir de
BUTTONS
n bouton permet de lancer l’une des 4 actions déjà vues pour les
images.
Les options spécifiques aux bouton :
- Rayon de courbure pour arrondir plus ou moins les angles (laisser à 0 pour un bouton rectangulaire).
- Les options de bordure permettent d’entourer le
DIVIDERS
es seuls options possibles sont :
- Le style : ligne, tirets ou pointillés,
- La taille,
- La couleur,
- La largeur,
- L’alignement.
SOCIALS
ous pouvez choisir :
- Le style des boutons,
- Les réseaux que vous voulez ajouter/supprimer,
- Les URL de chaque compte,
- Éventuellement ajouter un texte
Les réseaux supportés :
HTML
ous pouvez insérer des blocs de code HTML. A n’utiliser que pour insérer des blocs avec des éléments de CSS que vous n’arriveriez pas à reproduire avec l’éditeur.
Plusieurs mises en garde cependant :
- Si vous voulez utiliser uniquement l’insertion de code depuis un autre
outil, privilégier l’ancien éditeur.
- Si vous importez des blocs, attention au rendu et en particulier à
l’aspect responsive.
VIDEO
l est possible d’insérer directement un lien vers une vidéo, uniquement sur YouTube ou Vimeo pour générer automatiquement l’image d’aperçu.
Pour d’autres sources, il faudra ajouter une image avec un lien vers la
vidéo.
ICON
us de l’ordre du gadget.
Ca revient à insérer une image.
outil permet également de générer des pages Web, d’om la présence
de cette option qui n’est pas très pertinente pour un modèle d’email.
- Migration de modèle (1 inclus, possible d’en migrer d’autres sur devis)
- Création de modèle (sur devis)
- Intégration d’une police personnalisée (sur devis)
- Note de livraison : https://confluence.secutix.com/display/RN/New+SAM+email+template+editor
.
Hereunder we are going to explore the particularities of some of the content blocks.
Do not be afraid to play around with this editor!
IMAGES
Once you've dropped the "Image" content on a column, you can either drag and drop an image into the column, or access the File manager by clicking on the "Browse" button.
Within the File manager you'll be able to save and store images and organize them in folders
. Remember to first create the new folder, name it, open it, and then upload the pictures already correctly named to be able to search efficiently for all the stored content.
You can also import an image from Instagram, Facebook, Dropbox, Google Drive... and even by just copy and pasting a link directly from the internet.
Once the image has been selected, there are several options to adjust the size of an image:
- Auto width: This will fit the image within the column.
- If the auto width is turned off, you'll be able to adjust the image as a percentage within the width of the column. In this case it can be interesting to choose an alignment option for the picture.
- And also choose if you want the picture, which has been adjusted as a percentage of the width of the column its when displayed on a desktop, to be displayed at full width on mobile.
The "Dynamic image" is not supported yet.
You can also "Change image" and select, upload or import another image file from the file manager, and even "Apply effects and more": The picture below is the pop up screen that will appear once you click on that button. As you can see, there are a lot of options that can be accessed directly from the editor.
As you can see in the image above (on the left), there's a part in the content properties of an image content block that is named "Action". There you can enable four different actions to happen when your customer will click on the image:
- Open a web page (as selected in the image above-left): You'll just have to insert the URL of the website. The special links are not supported yet.
- Send an email: Three fields to fill out will then appear: "Mail to", "Subject" and "Body" of the email. The only one indispensable for it to work is "Mail to".
- Make a call: You'll have to introduce the phone number you want your client to call.
- Send an SMS: You'll have to introduce the phone number you want your client to send the SMS to.
SOCIALS
You'll be able to choose the style of the images that will redirect your client to your social media through the "Select icon collection" drop list.
You can organize and configure each one of the icons to your socials:
- The most important thing is to introduce the right URL!
- You can also reorganize them and alter the order in which they appear by clicking on
(just besides the icon) and dragging the section up and down the list of the icon collection.
When adding a new button (see image on the left) you'll see a full panel of possible social media icons that you'll be able to insert on your email template (see image on the right).
ICONS
Please note that icons work just as images do, even though the layout of the content properties looks like a Social content block.
BUTTONS
DIVIDERS
The very first content properties of a button are the ones related to its "Action": They are the same ones as for the images (seen above).
There are a couple options that are only available for buttons:
- The border radius: When set to zero, the button will have 90º corners, it will be a rectangle. The bigger the number set, the rounder the button will be.
- The border style options, which apply to the border of the button, not the border of the column.
There are only a few content properties that are characteristic of dividers:
- Whether or not they are transparent
- Their style: solid, dotted or dashed
- Size
- Color
- Width
- And alignment
HTML
VIDEO
You could also drop HTML content blocks on your template. This option should only be used by experts, as using your own code could affect how the message is rendered.
This option should only be used in very specific situations were you could not achieve the desired outcome through all the other options of the Designer email template editor.
If you are planning on building the whole message on HTML to achieve the desired outcome, we recommend using the Basic email template editor.
When dropping a video content block, remember that Youtube and Vimeo are the only two platforms that the editor accepts to automatically create a preview of the video with an embedded link.
If you wanted to use other video sources, you would have to drop an image content block on your template, choose the preview image of the video, and add within that content properties an "Action" that will "Open a web page" when the image is clicked on.
Q&A
| Widget Connector | ||
|---|---|---|
|
- Documentation BEE :
Click here to continue the training unit and learn how to create targets (available soon).
NOTES
- If the designer content editor is not yet enabled, you can ask for the update here, for free.
- One of your basic/old email templates would be transformed to the designer editor format for free. Any extra one would come with a fee.
- It is possible to integrate a new font in the designer editor for a fee.