Utilisez L’Editeur Message Business (PAS à PAS & VIDEO)

En utilisant l'Editeur, vous obtiendrez un résultat professionnel au design de votre choix, sans compétence spécifique en HTML. Nos vidéos sont à regarder et à écouter : mettez le son !

Vidéos d'introduction

3 minutes : découverte express

Agrandir la fenêtre de la vidéo en cliquant sur elargir-vimeo

30 minutes : retransmission d'une démo

Agrandir la fenêtre de la vidéo en cliquant sur elargir-vimeo

Inscrivez-vous à une démo et posez vos questions en direct via le tchat !

Découvrir l'interface et le glisser / déposer

Par défaut lorsque vous vous rendez dans Opérations > Emailing > Nouveau > Créer un Emailing depuis un document vide, l'opération est éditable avec l'Editeur de Message Business.

Présentation de l'Editeur : zoning-lediteur-message-business


numero1 Ajouter des blocs ou des colonnes accueillant des blocs.

numero2 Pratique ! Visualiser les imbrications et les types de blocs.

numero3 Éditer les styles généraux et les comportements d’affichage mobile.

numero4 Pré visualiser l’affichage du message sur tous les terminaux.

numero5 Agrandir la zone de travail et obtenir de l’aide.

 Pas à pas pour bien débuter

Ajouter des blocs

Vous disposez de blocs « Colonne » (1 colonne, 2 colonnes, 3 colonnes…) et d'assemblages préconçus.

Dans chaque bloc ou colonne vous pouvez imbriquer d'autres blocs.

Vous pouvez ajouter, manipuler, supprimer des blocs proposés dans la barre des blocs à droite de l'interface.

Pour cela, cliquez sur l'icône « Plus » icone_plus_inserer_blocs pour ajouter le bloc au bas de l'Emailing ou cliquez sur le bloc de votre choix et déposez le à l'endroit souhaité dans la zone d'édition du message.

Blocs de contenu

Manipuler un bloc

Au survol de votre souris d'un bloc, celui-ci se surligne en faisant apparaître les icônes de manipulation du bloc suivant :

  • palette-bloc accéder aux styles spécifique du bloc (fenêtre d'édition du bloc),
  • mobile-bloc accéder aux options d'affichage mobile du bloc (fenêtre d'édition du bloc),
  • custom-bloc enregistrer en tant que bloc personnalisé, 
  • drag-bloc glisser/déposer avec la souris le bloc dans la structure du message,
  • duplicate-bloc dupliquer le bloc (la copie se positionne en dessous du bloc dupliqué),
  • delete-bloc suppression du bloc (toute suppression validée est définitive !).

Et en fonction de la position du bloc dans la structure du message :

  • right-bloc up-bloc left-bloc bottom-bloc déplacer d'une position le bloc dans la structure du message. 

Éditer un bloc et des contenus dans un bloc

En cliquant sur un bloc, la fenêtre d'édition du bloc s'ouvre à droite et vous permet d'éditer le style de chaque bloc disponible. Plus spécifiquement, vous pourrez utiliser le pavé d'édition pour des ajustements.

2-zoning

Éditer des contenus dans un bloc

Éditer un bloc

4-pavededition

A tout moment, et indépendamment des styles généraux et des styles du bloc, vous pouvez paramétrer des styles spécifiques dans le pavé d'Edition du bloc.

Pour cela, cliquez sur le bloc souhaité et le pavé d'Edition s'affiche. Vous pouvez changer les styles.

La fenêtre d'édition du bloc permet d'éditer le style du bloc. A utiliser AVANT d'éditer le contenu dans un bloc (via le pavé d'édition).

Permet notamment de modifier très finement : le style du texte, le fond du bloc, la hauteur de ligne, l'espacement des caractères, l'alignement, les marges…

 

Insérer une image

Lors de la création de vos opérations Emailings, il est nécessaire d'héberger vos images sur un serveur : le vôtre ou celui de Message Business. Dans votre compte, vous disposez d'un dossier Images qui vous permet d'héberger l'ensemble des images afin de les rendre disponibles à vos contacts. Ce dossier est commun à l’ensemble de vos opérations, ce qui vous permet d’importer une seule fois les images qui pourraient être présentes dans une ou plusieurs opérations.

Pour que vos images puissent être importées et hébergées par Message Business, il est nécessaire qu'elles aient un format JPG, JPEG, GIF ou PNG.

Nous vous recommandons d'importer vos images directement au bon format et de ne pas les modifier la taille de vos images dans Message Business.

Pour insérer votre image dans votre emailing, évitez tout copié / collé ou glissé / déposé dans l'Editeur car cette pratique altère fortement le code HTML de votre opération, et procédez comme suit  en fonction de votre situation :

Votre image est déjà hébergée sur le serveurVotre image n'est pas encore hébergée sur le serveur
  • Cliquez à l'endroit où vous souhaitez insérer votre image (cas 1) puis sur le bouton Insérer une image icone-inserer-image-editeur rapide du pavé d'édition qui apparaît
  • Dans la fenêtre « Propriétés de l'image » qui s'est ouverte, cliquez sur le bouton Explorer le serveur.

5-proprietesdelimage

  • Pour sélectionner l'image souhaitée, rendez-vous dans le dossier Images (1) puis cliquez sur l'image préalablement importée (2). Enfin, cliquez sur Choisir (3)

    explorer-le-serveur-ff-images

  • Cliquez sur Envoyer sur le serveur puis sur le bouton Ok.
  • Cliquez à l'endroit où vous souhaitez insérer votre image (cas 1) puis sur le bouton Insérer une image icone-inserer-image-editeur rapide du pavé d'édition qui apparaît
  • Dans la fenêtre « Propriétés de l'image » qui s'est ouverte, cliquez sur le bouton Explorer le serveur.

    5-proprietesdelimage

  • Cliquez sur l'onglet Envoyer puis sur Choisissez un fichier pour parcourir vos dossiers et sélectionner votre image. Vous serez alors redirigé vers l'onglet Informations sur l'image et pourrez ajouter un texte de remplacement afin d'optimiser la délivrabilité de votre campagne.
  • Cliquez sur Envoyer sur le serveur puis sur le bouton Ok.

Notez que le non renseignement des textes alternatifs des images peut multiplier par 2 à 3 les chances de parvenir en spam.

Cas 1 : Votre image remplacera l'image grisée présente dans le bloc « Image »

2 possibilités :

  • La dimension (en pixels) de l'image est supérieure ou égale à celle de l'image grisée : celle-ci sera redimensionnée automatiquement dans toute la largeur du bloc Image.
  • La dimension (en pixels) de l'image est inférieure à celle de l'image grisée : celle-ci s'affichera à sa taille réelle. Conseil : bien vérifier que la largeur et la hauteur de l'image ne soient pas spécifiés dans les « Propriétés de l'image »
Cas 2 : Votre image sera insérée dans un autre bloc qu'un bloc « Image » : Texte, Titre, Bouton…

Cela peut être particulièrement utile pour des petites images comme des pictogrammes.

Insérer un lien vers sur du texte

  1. Sélectionnez le texte sur lequel vous souhaitez insérer votre lien (il est nécessaire de ne pas sélectionner simultanément du texte et des images lors de l'insertion de vos liens, car certaines messageries ne gèrent pas ce type d'insertion et votre lien risque alors d'être inactif),
  2. Cliquez sur l'icône Insérer un lienicone-inserer-lien-editeur-rapide : la fenêtre de gestion des liens lien s'ouvre,
  3. Dans le champ URL, indiquez le lien que vous souhaitez faire pointer,
  4. Pour le champ Protocole, sélectionnez http://,
  5. Dans l'onglet Cible, vous pouvez sélectionner Nouvelle fenêtre (optionnel),
  6. Cliquez sur Ok.

7-insererunlien

Insérer un lien sur une image

  1. Cliquez une fois sur l'image sur laquelle vous souhaitez insérer votre lien (il est nécessaire de ne pas sélectionner simultanément du texte et des images lors de l'insertion de vos liens, car certaines messageries ne gèrent pas ce type d'insertion et votre lien risque alors d'être inactif),
  2. Cliquez sur l'icône Insérer un lienicone-inserer-lien-editeur-rapide : la fenêtre de gestion des liens lien s'ouvre,
  3. Dans le champ URL, indiquez le lien que vous souhaitez faire pointer,
  4. Pour le champ Protocole, sélectionnez http://,
  5. Dans l'onglet Cible, vous pouvez sélectionner Nouvelle fenêtre (optionnel),
  6. Cliquez sur Ok.

7-insererunlien

Modifier la couleur d'un lien

Si vous souhaitez modifier la couleur d'un lien lors de son insertion ou de sa modification :

  1. Sélectionnez l'élément sur lequel le lien doit être inséré,
  2. Cliquez sur l'icône Insérer un lien icone-inserer-lien-editeur-rapide,
  3. La fenêtre de gestion des liens Lien s'ouvre,
  4. Rendez-vous dans l'onglet Avancé,
  5. Renseignez le champ Style par text-decoration:none; puis après un espace ajoutez le code couleur de votre lien.
  6. Cliquez sur le bouton Ok ou Insérer pour valider.

10-insererunlien

Astuce : Vous pouvez aussi modifier la couleur du lien avec le pavé d'Edition de l'Editeur.

Insérer un lien vers une adresse mail avec un objet prédéfini

  1. Sélectionnez le texte (Ex : Nous contacter par mail, Demande d'informations…), ou l'image, sur lequel vous souhaitez insérer votre lien,
  2. Cliquez sur l'icône Insérer un lienicone-inserer-lien-editeur-rapide : la fenêtre de gestion des liens Lien s'ouvre,
  3. Pour le champ Type de lien, sélectionnez E-mail,
  4. Dans le champ Adresse Email, indiquez l'adresse email que vous souhaitez faire pointer. Si vous souhaitez faire apparaître un objet prédéfini, après avoir renseigné l'adresse email, renseignez le champ Sujet du Message, puis le corps du message si souhaité.
  5. Cliquez sur Ok.

9-insererunlien

Insérer un lien vers un Formulaire Web Message Business

  1. Sélectionnez l'image ou le texte sur laquelle vous souhaitez insérer votre lien (il est nécessaire de ne pas sélectionner simultanément du texte et des images lors de l'insertion de vos liens, car certaines messageries ne gèrent pas ce type d'insertion et votre lien risque alors d'être inactif),
  2. Récupérez le lien du formulaire
  3. Cliquez sur l'icône Insérer un lienicone-inserer-lien-editeur-rapide : la fenêtre de gestion des liens Lien s'ouvre,
  4. Dans le champ URL, indiquez le lien que vous souhaitez faire pointer,
  5. Pour le champ Protocole, sélectionnez http://,
  6. Dans l'onglet Cible, vous pouvez sélectionner Nouvelle fenêtre (optionnel),
  7. Cliquez sur Ok.

10-insererunlien

Insérer un lien vers une ancre

Notez que certaines messageries ne gèrent pas les ancres traditionnelles (les liens sont alors inactifs). Afin d'éviter que vos liens soient inactifs, les ancres que vous créerez dans un emailing renverront donc systématiquement à la page miroir de votre opération. Il n’est pas possible de modifier cette gestion dans l’application.

Par ailleurs, cette redirection vers la page miroir de votre emailing permet également de mesurer les clics sur vos ancres afin que vous puissiez déterminer les sujets les plus lus par vos contacts et éventuellement adapter votre message en fonction de leurs préférences pour vos prochains envois.

Si vous souhaitez insérer des ancres dans vos Emailings, la procédure à suivre est la suivante :

  1. Cliquez là où vous souhaitez positionner votre ancre.
  2. Cliquez sur l'icône Ancreicone-inserer-ancre-editeur-rapide : la fenêtre Propriétés de l'ancre s'ouvre.fenetre-propriete-ancre-editeur-rapide
  3. Renseignez un nom pour votre ancre. Par exemple : module prestashop
  4. Cliquez sur Ok.
  1. Sélectionnez l'image ou le texte sur lequel vous souhaitez insérer votre lien,
  2. Cliquez sur l'icône Insérer un lienicone-inserer-lien-editeur-rapide : la fenêtre de gestion des liens Lien s'ouvre,ancre-transformer-le-lien-ancre-dans-le-texte
  3. Dans le champ Type de lien, sélectionnez Transformer le lien en ancre dans le texte,
  4. Sélectionnez l'ancre souhaitée dans la liste affichée,
  5. Cliquez sur Ok.

 

Supprimer un lien

Il est recommandé avant d’ajouter un nouveau lien à votre contenu (texte ou image) sur lequel un lien aurait déjà été inséré de :

  1. Sélectionnez votre contenu,
  2. Supprimez la précédente url en utilisant l’icône Supprimer un lien icone-supprimer-un-lien-editeur-rapide,
  3. Une fois le lien supprimé, vous pourrez insérer un nouveau lien sur votre contenu si souhaité.

Insérer une pièce-jointe

Pour les pièces jointes, afin d'optimiser la délivrabilité de l'opération, celles-ci ne peuvent pas être insérées en tant que telles dans les Emails de masse. En effet, les filtres anti-spam des messageries de réception analyseraient ces documents comme pouvant contenir des virus et bloqueraient l’emailing.
Aussi, pour permettre à vos contacts de visualiser vos documents de moins de 2 Mo, il est possible par exemple de les enregistrer au format PDF puis de les héberger sur nos serveurs.

  1. Sélectionnez l'image ou le texte sur laquelle vous souhaitez insérer votre lien vers votre document (Ex : Télécharger notre brochure, Consulter la plaquette en ligne). Il est nécessaire de ne pas sélectionner simultanément du texte et des images lors de l'insertion de vos liens, car certaines messageries ne gèrent pas ce type d'insertion et votre lien risque alors d'être inactif,
  2. Cliquez sur l'icône Insérer un lienicone-inserer-lien-editeur-rapide : la fenêtre de gestion des liens Lien s'ouvre,
  3. Cliquez sur Explorer le serveur pour télécharger un nouveau document à insérer ou, si votre fichier a déjà été téléchargé dans le dossier Files, et sélectionnez le fichier souhaité.
  4. Dans l'onglet Cible, vous pouvez sélectionner Nouvelle fenêtre (optionnel),
  5. Cliquez sur Ok.
8-insererunlien

Pour aller plus loin dans le design et la productivité

Définir des styles applicables globalement aux blocs

L'onglet Style disponible dans la barre des blocs permet d'appliquer un style identique d'un seul coup à tous les blocs qui portent le même nom dans l'opération d'Emailing. Pour ce faire, sélectionnez dans l'onglet Style de la barre des blocs le type de bloc sur lequel vous souhaitez appliquer un style et modifiez celui-ci comme souhaité.

Par exemple pour rendre tous les blocs « Texte » avec un texte en taille 14, cliquez sur Texte puis tapez 14px dans le menu déroulant.

Tous les blocs dont l'intitulé contient « Texte » seront alors modifiés en 14px.

Styles Généraux

Personnaliser le contenu d'un emailing

Lors de la création de vos emailings, en étape 1 et 2, vous pourrez personnaliser votre contenu mais aussi l'entête (Nom d'expéditeur, Email de réponse et/ou Objet) de votre email en insérant des codes de personnalisation. Pour ce faire, vous avez 2 options :

  • Option 1 : Cliquez à l'endroit où vous souhaitez insérer une valeur contact (Nom, Prénom, Adresse, …) Cliquez sur le bouton Codes dans le pavé d’Édition de l'Editeur Rapide. Puis cliquez sur le code de personnalisation que vous souhaitez insérer dans le menu déroulant.

editeur-rapide-etape3-barre-d-edition-de-l-editeur-rapide-codes

  • Option 2 : Copiez le code de personnalisation relatif au champ contact que vous souhaitez insérer. Pour ce faire :

Utiliser des champs personnalisés que vous aurez créés en cliquant sur le bouton Codes de personnalisation qui vous permet de visualiser l'ensemble des champs disponibles en-dessous de la zone d'édition de l'email. Copiez le code de personnalisation du champ souhaité (par exemple **MB_FIRSTNAME** pour insérer le prénom du contact) et collez-le à l'endroit souhaité dans votre contenu.

10-personnalisation

editeur-rapide-codes-de-personnalisation

Message BusinessAttention

Pour que vos contenus soient personnalisés avec les informations de vos contacts, il est nécessaire que ces données soient renseignées dans la base contacts. Si pour un contact, le champ utilisé est vide, alors la personnalisation affichera une valeur vide.

 

Optimiser l'affichage mobile

Les Emailings que vous créez dans L’Editeur sont responsive (un affichage compatible sur tous les supports) : les images sont redimensionnées automatiquement en conservant leurs bonnes proportions et les blocs se mettent les uns sous les autres. Si vous souhaitez avoir une gestion plus fine du comportement de vote Emailing sur mobile, éditez les paramètres de Mobilité.

Vous pouvez éditer les paramètres de Mobilité de votre Emailing de manière globale…

Options de mobilité

…mais aussi sur chacun des blocs :

 

mobilite-types-blocs

 

Editer les balises Open Graph

Les Emailings que vous créez dans L’Editeur sont partageables par les destinataires sur les réseaux sociaux utilisant le protocole Open Graph : 

Pour ce faire, éditer les paramètres de l'Emailing puis chacune des balises Open Graph de l'opération:

  • Titre correspondant à la balise og:title,
  • Description correspondant à la balise og:description,
  • Image correspondant à la balise og:image. Nous vous recommandons une taille d'image >= 1200×630, un poids < 1Mo et ratio standard (pas de photo panoramique).

Il existe plusieurs outils pour tester l'interprétation des contenus édités dans les balises dont l'outil développeur proposé par facebook (veuillez noter que cet outil n'est pas supporté par Message Business). Voici un exemple d'affichage d'un flux twitter des contenus édités dans les balises Open Graph :
rendu balises open graph sur Message Business

 

Le guide d'inspiration à télécharger

Pour plus d'informations sur toutes les fonctionnalités disponibles grâce à l'Editeur, n'hésitez pas à télécharger le guide d'inspiration et d'utilisation de l'Editeur.