Créer un nouveau Template HTML avec l'éditeur CRM 360°

S’abonner

Depuis votre bibliothèque de Templates sélectionnez une catégorie / un dossier et cliquez sur Capture_plus.PNG en haut à droite de l'écran

Vous arrivez ensuite sur la page de création :

modele_de_template.PNG

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

nom.PNG

 

 

------------------------------------------------------------------------------------------------------------------

 

 

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éposser" (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 fleche.PNG 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

600.PNG

  • 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

300_par_300.PNG

  • 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

200_par_200_par_200.PNG

  • 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

400_par_200.PNG

  • 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

200_par_400.PNG

 

 

------------------------------------------------------------------------------------------------------------------

 

 

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 :

bloc_texte.PNG

En cliquant sur votre email, vous pouvez ajouter/éditer le texte grâce à un éditeur "in line" à la façon WORD. Sur cet editeur, vous avez 2 options supplémentaires : 

  • "Plugin" : qui vous permet d'ajouter simplement vos liens Miroir et Désabonnement dans votre texte.
  • "Zones personnalisées" : qui vous permet d'ajouter des zones variables personnalisées dans votre texte.

lien_mirroir.PNG

A noter : Le contenu texte possède systématiquement une marge en-dessous, au-dessus et sur les côtés.

 

  • Image :

image_1.PNG

En cliquant sur votre email puis en cliquant sur  stylo.PNG  vous pouvez éditer ce contenu

capture_image.PNG

  • L'adresse Url: correspond à vos images importées au préalable dans votre bibliothèque de template
  • 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 : il 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.

 

  • Bouton :

bouton_1.PNG

En cliquant sur votre email puis en cliquant sur  stylo.PNG  vous pouvez éditer ce contenu

  • Le texte du bouton est à ajouter dans cette pop in en cliquant directement sur le bouton
  • Le lien : il permet d'ajouter un lien cliquable vers une autre page web 
  • La largeur: elle correspond à la taille du bouton que vous désirez
  • La couleur : il est possible de choisir la couleur de fond et la couleur du texte
  • L'épaisseur & la couleur : ils correspondent à l'épaisseur de la bordure du bouton et la couleur de cette bordure
  • Arrondi : cela 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

 

  • Code barre :

code_barre.PNG

En cliquant sur votre email puis en cliquant sur  stylo.PNG  vous pouvez éditer ce contenu

code_barre_2.PNG

Le type : correspond au type de code barre que vous souhaitez ajouter au contenu

Le contenu : il correspond aux chiffres ou lettres que vous souhaitez mettre en-dessous du code barre

La largeur et la hauteur : elles 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 : ils 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

separateur_1.PNG

En cliquant sur votre email puis en cliquant sur  stylo.PNG  vous pouvez éditer ce contenu

 

 separateur.PNG

La largeur : elle est de maximum 100% et de minimum 5%

L'épaisseur  : elle 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.

 

 

------------------------------------------------------------------------------------------------------------------

  

A la fin de votre création de modèle enregistrez la en cliquant sur enregistrement_de_la_cible.PNG

Vous pouvez visualiser votre création en fonction des différents supports (ordinateur, tablette ou smartphone) en bas à droite de votre écran

 

dossier.PNG

 

Il est encore possible de faire des changements en cliquant sur  en bas à droite de votre écran.

 

 

Vous avez d’autres questions ? Envoyer une demande