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: 

 

Creation_template.png

 

Vous arrivez ensuite sur la page de création :

template.jpg

 

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.

 

Creation_template_3.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é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 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

600px.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

300px.jpg

  • 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_px.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

200_400_px.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_400_px.png

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 :

creation_template_4.png

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.

lien_mirroir.PNG

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"

 

 mceclip4.png

  • Image :

creation_template_5.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 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 :

creer_un_template_5.jpg

 

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 : 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

 

creation_template_6.png

 

  • Code barre :

creation_template_7.jpg

 

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

 

creation_template_9.png

 

 

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

creation_template_7.jpg

 

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

 

creation_template_10.jpg

 

 

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 :

social.jpg

En cliquant sur votre email puis en cliquant sur  stylo.PNG  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.

social_media.jpg

 

 

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

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.

 

texte_apercu.jpg

 

texte_pr__header.jpg

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

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.

mceclip2.png

mceclip0.png

 mceclip1.png

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

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.

mceclip3.png

 

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

 

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.

 

action_marketing_2.jpg

 

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.

 

 

Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 0 sur 0
Vous avez d’autres questions ? Envoyer une demande