- Depuis votre bibliothèque de templates, sélectionnez une catégorie / un dossier et cliquez sur le bouton + situé en face de celle-ci :
- Attribuez un nom à votre nouvelle création, ainsi que la zone de partage souhaitée si vous en avez plusieurs :
Depuis votre dossier, pour afficher l'éditeur HTML, il faudra cliquer sur le bouton + en haut à droite:
- Vous devrez ensuite donner un nom à votre nouveau template (il est obligatoire de le remplir pour effectuer l'enregistrement du template).
- Puis vous arriverez sur la page de création :
Via l'éditeur interne à Sunflow, 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 lignes :
Elles vous permettent de structurer votre modèle. Vous pourrez y insérer des images, textes, boutons ou codes barres. Pour ajouter une lignedans 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 image, vous trouverez sur la partie de droite la possibilité d'éditer votre 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).
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 l'emplacement de votre bouton sur l'email, vous pouvez éditer son contenu
- Le lien : permet d'ajouter un lien cliquable vers une autre page web,
- Le rembourrage du content : permet d'adapter 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.
- Code barre :
En cliquant sur l'emplacement du code barre depuis votre email, 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 le séparateur depuis votre email, vous pouvez éditer ce contenu.
La largeur : elle est de maximum 100% et de minimum 5%
Ligne : correspond au type de séparateur souhaité (en continu, en tiret...) et permet d'ajuster l'épaisseur du trait de séparation
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 le bloc social depuis votre email, 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 dessus pour faire apparaître sur la droite les propriétés du contenu à modifier. Il est possible d'éditer une colonne ou une structure totale.
------------------------------------------------------------------------------------------------------------------
L'affichage sur mobile ou desktop peut être retiré pour certaines structures :
Il faut donc cliquer sur "cacher sur " après avoir cliqué sur la structure à retirer.
------------------------------------------------------------------------------------------------------------------
A la fin de votre création de modèle, enregistrez la en cliquant sur le bouton de validation en haut à droite de l'éditeur.
Vous pouvez visualiser votre création en fonction des différents supports (ordinateur ou smartphone) en haut à gauche de votre écran.