Depuis votre bibliothèque de templates, sélectionnez une catégorie / un dossier et cliquez sur en haut à droite de l'écran:
Vous arrivez ensuite sur la page de création :
Via l'éditeur interne à CRM360, vous pouvez créer vos propres emails sans avoir de connaissance HTML. Votre email aura les caractéristiques suivantes :
- Une largeur de 600 Pixels
- Un contenu responsive (qui s'adapte aux mobiles)
- Un contenu qui s'affiche correctement sur la majorité des outils de visualisation d'email (Outlook, Gmail, Yahoo...)
Les différents composants :
Le nom du template : il est obligatoire de le remplir pour effectuer l'enregistrement du template.
------------------------------------------------------------------------------------------------------------------
Les structures :
Elles vous permettent de structurer votre modèle. Vous pourrez y insérer des images, textes, boutons ou codes barres. Pour ajouter une structure dans votre email, il faut "sélectionner/glisser/déposer" (Drag & Drop) la structure choisie à l'endroit souhaité dans l'email.
Une fois ajoutée, une structure peut être déplacée grâce au bouton ou dupliquée grâce au bouton
. La duplication se fait dans la même structure.
- La structure "1 colonne" fera 600 pixels de large
- La structure "2 colonnes" contient 2 colonnes de 300 pixels de large. En mode responsive/mobile la colonne de droite passe sous la colonne de gauche
- La structure "3 colonnes" contient 3 colonnes de 200 pixels de large. En mode responsive/mobile la colonne de droite passe sous la colonne de gauche
- La structure "2 colonnes 2/3 - 1/3" contient 1 colonne de 400 pixels de large et 1 colonne de 200 pixels de large. En mode responsive/mobile la colonne de droite passe sous la colonne de gauche
- La structure "2 colonnes 1/3 - 2/3" contient 1 colonne de 200 pixels de large et 1 colonne de 400 pixels de large. En mode responsive/mobile la colonne de droite passe sous la colonne de gauche
Une structure peut contenir plusieurs éléments. En effet, pour l'affichage en responsive d'une image suivie d'un bouton puis d'un texte, il faut mettre les éléments dans la même structure.
--------------------------------------------------------------------------------------------------------------
Les contenus :
Les contenus sont à insérer à l'intérieur des structures. Pour ajouter un contenu dans une structure, il faut sélectionner "glisser/déposer" (Drag & Drop) le contenu choisi à l'endroit souhaité dans la structure voulue de votre email.
Un contenu ne sera jamais plus large que la structure qui le contient.
- Texte :
En cliquant sur votre email, vous pouvez ajouter/éditer le texte grâce à un éditeur "in line" à la façon Word. Sur cet éditeur, vous avez 2 options supplémentaires :
- "Plugin" : vous permet d'ajouter simplement vos liens "Miroir" et "Désabonnement" dans votre texte.
- "Zones personnalisées" : vous permet d'ajouter des zones variables personnalisées dans votre texte.
A noter : Le contenu texte possède systématiquement une marge en-dessous, au-dessus et sur les côtés.
- Il est possible d'ajouter des paddings verticaux ou horizontaux.
ATTENTION : les paddings ont la même taille en haut et en bas ou à droite et à gauche.
- Il est possible d'ajouter une couleur de fond sur le texte en cliquant sur "Couleur de fond"
- Image :
En cliquant sur votre email puis en cliquant sur vous pouvez éditer ce contenu.
- L'adresse URL : correspond à vos images importées au préalable dans votre bibliothèque de templates
- La largeur : correspond à la largeur que l'image aura. Si la largeur est plus petite que la largeur de la structure, l'image sera centrée dans la structure
- Le titre : lorsque l'image n'apparaît pas c'est le texte qui apparaît à la place dans l'email reçu par vos clients
- Le lien : permet de mettre un lien cliquable vers une autre page web
Une image est toujours centrée (même en mode responsive).
A noter : Le contenu "image" ne possède pas de marge en-dessous, au-dessus et sur les côtés. Si la largeur de l'image est égale à la largeur de la structure, l'image prendra 100% de l'espace disponible.
La taille de l'image doit être au maximum celle de la structure soit :
- 600 de large si elle est dans une structure 1 colonne,
- 300 de large si elle est dans une structure 2 colonnes,
- 200 de large si elle est dans une structure 3 colonnes.
- Bouton :
En cliquant sur votre email puis en cliquant sur vous pouvez éditer ce contenu
- Le texte du bouton est à ajouter dans cette pop in en cliquant directement sur le bouton.
- Le lien : permet d'ajouter un lien cliquable vers une autre page web,
- La largeur : correspond à la taille du bouton que vous désirez,
- La couleur : possibilité de choisir la couleur de fond et la couleur du texte,
- L'épaisseur & la couleur : correspondent à l'épaisseur de la bordure du bouton et la couleur de cette bordure,
- Arrondi : permet d'arrondir les coins du bouton (ATTENTION : cela n'est pas compatible avec tous les outils de visualisation d'email. Dans ce cas, les coins apparaissent tout de même "carrés").
Un bouton est toujours centré (même en mode responsive).
A noter : Le contenu bouton possède systématiquement une marge en-dessous, au-dessus et sur les côtés.
La taille du bouton doit prendre en compte les marges sur les deux côtés :
- 580 de large si il est dans une structure 1 colonne
- 280 de large si elle est dans une structure 2 colonnes
- 180 de large si elle est dans une structure 3 colonnes.
Il est possible d'ajouter une couleur de fond sur le bouton
- Code barre :
En cliquant sur votre email puis en cliquant sur vous pouvez éditer ce contenu
Le type : correspond au type de code barre que vous souhaitez ajouter au contenu
Le contenu : correspond aux chiffres ou lettres que vous souhaitez mettre en-dessous du code barre
La largeur et la hauteur : correspondent aux dimensions du code barre
Le titre : lorsque le code barre n'apparaît pas c'est le texte qui apparaît à la place dans l'email reçu par vos clients
Les champs personnalisés : permettent de personnaliser le contenu du code barre
Un code barre est toujours centré (même en mode responsive).
A noter : Le contenu code barre possède systématiquement une marge en-dessous, au-dessus et sur les côtés.
- Séparateur :
En cliquant sur votre email puis en cliquant sur vous pouvez éditer ce contenu.
La largeur : elle est de maximum 100% et de minimum 5%
L'épaisseur : permet de grossir le trait de séparation
Le type : correspond au type de séparateur souhaité (en continu, en tiret...)
Si vous souhaitez ajouter une marge à une image ou à un texte, il suffit de faire la même manipulation mais de sélectionner le type "transparent" et de sélectionner la largeur et l'épaisseur de votre choix.
- Social :
En cliquant sur votre email puis en cliquant sur vous pouvez éditer ce contenu.
Cet outil vous permet d'insérer les réseaux sociaux que vous souhaitez mettre à l'honneur, et selon le design de votre email.
------------------------------------------------------------------------------------------------------------------
Le Pre-Header d'un email peut être défini comme étant le résumé du texte situé à côté de la ligne d'objet lorsque vous affichez l'email dans la boîte de réception.
Le but premier de son utilisation est de capter l'attention avant même l'ouverture de l'email.
--------------------------------------------------------------------------------------------------------------------
Sur une ligne ou sur une colonne, il est possible d'insérer une image de fond ou une couleur de fond :
Il faut donc cliquer sur un stylo pour éditer. Il est possible d'éditer une colonne ou une structure totale.
------------------------------------------------------------------------------------------------------------------
L'ordre d'affichage sur mobile peut être inversé lorsqu'il y a plus d'une structure :
Il faut donc cliquer sur "ordre d'empilement des colonnes pour affichage mobile" lors de l'édition de la structure en cliquant sur le stylo.
------------------------------------------------------------------------------------------------------------------
A la fin de votre création de modèle, enregistrez la en cliquant sur .
Vous pouvez visualiser votre création en fonction des différents supports (ordinateur, tablette ou smartphone) en bas à droite de votre écran.
1- Afficher la version mobile
2- Afficher la version Tablette
3- Afficher la version écran large
Il est encore possible de faire des changements en cliquant sur en bas à droite de votre écran.