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

- Il est possible d'ajouter des padding verticaux ou horizontaux. 

ATTENTION : les padding ont la même taille en haut et en bas ou à droite et a 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 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.

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

 

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

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

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

social_media.jpg

 

 

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

Le Pre-Header d'un e-mail peut être défini comme étant le résumé du texte situé à côté de la ligne d'objet lorsque vous affichez le 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 de 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