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

Insérer une image

Vous pouvez insérer une image en utilisant un Bloc Image : sélectionner le bloc Image dans la barre de bloc pour le placer à l'endroit souhaité dans le contenu de L'Editeur :

– Votre image n'est pas hébergée dans la bibliothèque d'image : Prenez connaissance de nos conseils concernant les images puis cliquez sur le bloc Image. Dans la fenêtre « Propriétés de l'image » qui s'est ouverte, cliquez sur le bouton Explorer le serveur. 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.

– Votre image est déjà hébergée dans la bibliothèque d'image : Cliquez sur le bloc Image. Dans la fenêtre « Propriétés de l'image » qui s'est ouverte, cliquez sur le bouton Explorer le serveur. Pour sélectionner l'image souhaitée, rendez-vous dans le dossier Images puis cliquez sur l'image préalablement importée . Enfin, cliquez sur Choisir.

– Votre image est hébergée sur un site dont l'url est renseignée dans un code de personnalisation : Cliquez sur le bloc Image. Dans la fenêtre « Propriétés de l'image » qui s'est ouverte, renseigner le code de personnalisation du champ Texte dans lequel l'url de l'image hébergée est renseignée et en préfixant ou pas celle-ci avec https:// (en fonction de l'url renseignée dans le champ du code de personnalisation) : 

Alternativement, il est possible d'insérer une image dans un bloc autre qu'un Bloc Image. Cependant, il est à noter que cela peut avoir des impacts sur l'affichage multi-terminale qu'il peut être difficile à régler. Si vous souhaitez quand même procéder, cliquez à l'endroit où vous souhaitez insérer votre image dans le contenu du bloc édité puis sur le bouton Insérer une image  du pavé d'édition du bloc.

Insérer une vidéo

Les vidéos ne peuvent pas être insérées directement en tant que telles dans les Emails de masse. en effet, sauf rares contextes, les vidéos ne sont techniquement pas visualisables dans les messageries des destinataires.

Pour permettre à vos contacts de visualiser vos vidéos, vous pouver ajouter une image ou une capture d'écran de cette vidéo et y insérer un lien vers le site où la vidéo est hébergée (Youtube, Viméo, etc…).

Exemple :

Pour toujours plus de simplicité d'édition, vous pouvez utiliser le Bloc snippet/vidéo pour insérer le contenu pointant sur la vidéo dans votre opération.

Insérer un GIF

Vous pouvez insérer un GIF de la même manière qu'une image. Pour un chargement rapide de votre Gif sur la boîte mail de votre destinataire, il faut que celui-ci soit optimisé (inférieur à 150-200 Ko)

Insérer une pièce jointe

Afin d'optimiser la délivrabilité, les pièces jointes sont à pointer depuis des liens dans le message en suivant  nos conseils concernant les fichiers. Comme pour les images, vous pouvez héberger vos fichiers sur la bibliothèque du compte. Au delà du poids maximum du fichier, nous vous conseillons de les compresser sur des sites externes afin de pouvoir les insérer sur Sendethic.

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). Cliquez sur l'icône Insérer un lien : la fenêtre de gestion des liens Lien s'ouvre, 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é. Dans l'onglet Cible, vous pouvez sélectionner Nouvelle fenêtre (optionnel), Cliquez sur Ok.

Insérer un lien sur du texte / bouton

Sélectionnez entièrement le texte sur lequel vous souhaitez insérer votre lien puis Cliquez sur l'icône Insérer un lien La fenêtre de gestion des liens Lien s'ouvre, insérez dans Display Text votre texte (si c'est un bouton), puis votre URL et Cliquez sur Ok.

Insérer un lien sur une image

Insérez facilement vos liens dans votre Emailing sur vos textes et vos images grâce à l'Editeur Sendethic . Vous bénéficierez d'un tracking qui vous permettra d'identifier les cliqueurs de chaque lien et d'analyser l'efficacité de votre campagne. Pour ce, il suffit simplement d'indiquer une URL dans l'onglet lien, lors de l'insertion de votre image.

Insérer une image de fond

Pendant longtemps, l’intégration d’images de fond a été vivement déconseillée en Emailing pour des raisons d’incompatibilité et de contraintes d’affichage. Pratique jusqu’à présent réservée aux ultra spécialistes de l’intégration HTML en Emailing, grâce à L’Editeur vous pouvez maintenant utiliser des images de fond en tout simplicité avec l’assurance de leur bon affichage.

1- Insérer une image de fond

Dans l’onglet Style de la fenêtre d’édition du bloc, vous cliquez sur l’icone image afin d’insérer une image de fond.

2- Positionner du contenu

Pour positionner simplement votre contenu sur une image de fond, insérez l’image de fond dans un bloc 1 Colonne puis imbriquez les blocs souhaités.

3- Couleur de fond

Avant téléchargement de l’image, assurez-vous que votre texte soit bien lisible en ajoutant une couleur de fond alternative

Découvrez comment profiter de blocs inédits. 

Barre d'onglets 

Elle se situe au dessus de votre zone d'édition et vous permettra de prévisualiser votre campagne, d'obtenir son code HTML et de revenir sur l'Editeur.

Barre des blocs 

Elle se situe sur la droite de la zone d'édition et vous permettra de choisir les blocs et de les déplacer dans la zone d'édition.

Zone d'édition 

C'est ici que vous créerez votre campagne grâce aux différents blocs qui la composeront.

Fenêtre d'édition du bloc 

Grâce a la fenêtre d'édition d'un bloc, vous allez pouvoir centrer votre texte, insérer des fonds, des bordures ou des marges.

Pavé d'édition

Vous pouvez éditer le style de certains éléments du bloc via le pavé d’édition. Il apparaît lorsque vous cliquez dans le bloc.

Prévisualisation 

Dans la barre d’onglets vous avez accès à la Prévisualisation de votre Emailing pour valider le comportement mobile de votre Emailing au fil de l’eau et éventuellement éditer les paramètres de Mobilité si vous souhaitez une version différente. 

Lien de redirection

Les liens de redirections vous permettront de personnaliser un mot ou un bouton afin qu'il soit redirigé vers une page web externe. Il suffit de séléctionner le mot en question, de cliquer sur le maillon et d'insérer votre lien afin qu'il soit actif.

Code de personnalisation 

Insérez des codes de personnalisation correspondants aux champs de votre Base Contacts pour personnaliser : Le nom d’expéditeur / L’objet / Le contenu des blocs.

Dans l'objet, vous le trouverez en bas à droite dans « Codes de personnalisation » 

Dans la barre d’onglets, vous avez accès à la Prévisualisation de votre Emailing. Cet onglet vous permet de valider le comportement mobile de votre Emailing au fil de l’eau et d'éventuellement éditer les paramètres de Mobilité de chaque bloc, si vous souhaitez afficher une version différente pour améliorer le confort de lecture sur chaque support.

1. Différentes largeurs

Vous pouvez pré visualiser votre Emailing en plusieurs largeurs paramétrables : Pleine largeur / Largeur du contenu mobile / Largeur maximum mobile / Largeur personnalisée

2. Prévisualisation par appareil

Vous pouvez pré visualiser votre Emailing par appareil: Portrait / Paysage / Tablette : Ipad mini et Ipad Air / Mobile : Iphone 6 et Iphone 6 plus

3. Ne pas afficher des éléments

Vous pouvez pré visualiser votre Emailing avec ou sans les images pour vérifier si votre ratio texte / image est satisfaisant. Vous pouvez aussi masquer les codes de personnalisation

Remarques sur l'affichage de vos emailings sur les différents supports et outils de messagerie

• Dégradés

Sur certains webmails ou logiciels de messagerie, le dégradé ne sera pas interprété. Dans ce cas, la première couleur sélectionnée s’affichera uniformément.

• Arrondis 

Sur certains webmails ou logiciels de messagerie, l’arrondi ne sera pas interprété. Dans ce cas, le bord s’affichera sans arrondi.

• GIF animé 

Sur certains webmails ou logiciels de messagerie, le gif ne sera pas animé et seul sa première image sera affichée. Nous vous recommandons donc que la première image de votre gif soit signifiante. Nous vous recommandons d’optimiser le poids de votre gif pour qu’il soit inférieur à 150ko et faciliter son téléchargement lors de l'ouverture de l'emailing.

Découvrez nos conseils pour aller plus loin dans le design et la productivité. 

Habiller le fond de vos emails

Dans l’onglet Style, vous pouvez sélectionner une palette de couleur existante ou créer puis enregistrer votre propre palette. Vous pouvez éditer de manière globale le style qui sera appliqué automatiquement à chaque type de bloc. Vous pouvez également habiller le fond de vos Emailings dans la rubrique Général.

1. Éditer le Style

Vous pouvez, via cet onglet, éditer le Style de votre Emailing qui sera appliqué de manière globale : Choix et création de palettes / Fond et largeur de l’Email / Style par défaut des blocs

2. Habiller le fond Général

Vous avez plusieurs options d’habillage du fond de votre Emailing : Couleur unie / Dégradée (horizontal / vertical) / Transparence (à éviter : le fond par défaut de l’outil de messagerie sera appliqué)

3. Image de fond

Vous pouvez également habiller le fond de votre Emailing avec une image. 3 comportements sont possibles : Répéter l’image / Ne pas répéter l’image / Ajuster l’image

Exemples d'habillage de fond pour vos e-mailings 

• Fond de couleur uni

• Fond avec une grande image

Ajuster les bordures, fonds et espacements

Pour créer des blocs plus impactant, vous pouvez éditer les bordures, le fond et l’espacement entre les blocs.

1. Éditer le fond de vos blocs

Vous avez plusieurs options d’habillage du fond de votre Emailing : Couleur unie / Couleur avec un dégradé / Transparence ou Image de fond

Remarque : si un logiciel de messagerie n’interprète pas le dégradé, la première couleur sera affichée uniformément.

2. Éditer l’espacement des blocs

Vous pouvez éditer l’espacement entre les blocs en paramétrant les marges : Haut, Droite, Bas & Gauche

Remarque : si vous souhaitez qu’un bloc ne s’affiche pas en pleine largeur, plutôt que d’utiliser des marges vous pourriez réduire sa largeur d’affichage en % et valider en même temps son affichage responsive.

3. Éditer les bordures

Vous pouvez éditer les bordures des blocs de contenu et du bloc 1 colonne : Trait / Pointillés / Tirets / Avec effet (double, groove, ridge, inset, outset)

Astuce : Vous pouvez gérer les bordures du bloc 1 Colonne une à une et les masquer sur mobile.

Exemples de blocs avec bordures et fond 

Exemples de blocs avec espacement entre les colonnes

Le guide à télécharger

Pour utiliser l'Editeur Sendethic et créer des Emailings responsive sublimes

Ce guide didactique et esthétique de 40 pages a vocation à vous aider à (re)découvrir les riches possibilités de design de l'email et à les appliquer dans L'Editeur Emailing Sendethic. A garder à portée de main !   Télécharger le guide

Découvrez comment gérer des blocs et palettes personnalisées. 

Les blocs de L'Editeur permettent de composer et d'éditer le contenu de votre emailing :

Les Blocs Colonnes servent à positionner les Blocs de contenus dans la mise en forme souhaité pour l'emailing. Les blocs de contenus sont placés dans les colonne en fonction de chaque type de contenu à éditer dans l'emailing.

Exemple d'utilisation du bloc Agenda et Plan

En utilisant les blocs Agenda et Plan dans le contenu d'une invitation à un événement, ils créeront une meilleure expérience pour vos destinataires et un résultat impactant, le tout avec le minimum de complexité d'édition pour vous ? !

Bloc Agenda

Ce bloc permet à vos destinataires d'ajouter un événement dans leur Agenda en 1 clic depuis votre emailing :

Dans ce bloc Agenda, vous renseigner le Nom de votre événement / Les horaires de début et fin (en fonction du fuseau horaire de votre choix) / L'Adresse / L'adresse du lieu de l'événement, … afin que ces informations soient directement renseignées dans l'événement que le destinataire enregistrera dans son agenda.

Bloc Plan

Ce bloc Plan permet d'afficher une adresse sur un plan pointant vers Google Maps au clic :

Dans ce bloc Plan, vous renseignez l'adresse du lieu a afficher sur le plan / Le type d'affichage souhaité sur le plan : carte, satellite, terrain, hybride, rue / Le zoom et le ratio du plan / La langue / La couleur du marqueur de l'adresse sur le plan…

Bloc bouton

Ajouter une couleur de fond au survol du bouton

Envie de donner du pep's à vos boutons ?

L'Editeur permet d'ajouter une couleur de fond et une couleur de survol dans les paramètres de chaque bloc Bouton. Ainsi, la couleur de survol s'affichera lorsque le destinataire passera sa souris sur la zone du bouton pour l'inciter d'autant plus au clic sur celui-ci :

Ajoutez un bloc bouton, insérez un lien, et modifiez les couleurs dans la partie Fond du bouton depuis la fenêtre de styles du bloc bouton.

Bloc Formulaire / Enquête

Le bloc Formulaire / Enquête permet d'éditer des boutons pointant directement sur une opération de Formulaire ou d'Enquête publiée sur le compte en ayant la possibilité de faire que les champs de l'opération pointée soient remplis (par défaut ou pas) avec les valeurs renseignées dans la base de contacts :

Positionnez le bloc dans la structure du contenu puis, sélectionner l'opération de Formulaire ou d'Enquête à pointer en choisissant si vous souhaitez remplir ou pas les informations des contacts renseignées dans les champs de l'opération Formulaire ou Enquête sélectionnée.

Bloc snippet (open graph)

Le bloc snippet permet de faciliter l'édition des opérations en récupérant directement les informations publiées dans les balises Open Graph des pages web pointées depuis vos opérations; ceci en vous affranchissant des nombreuses opérations de copier/coller pour pointer sur ces pages web.

Le bloc snippet permet de gagner grandement en productivité lors de l'édition d'une newsletter composée d'une curation de site web avec une moyenne constatée de 50 % de temps d'édition en moins !

Voici comment éditer un bloc snippet dans votre emailing.

Bloc RSS

• gagner en productivité : ne plus faire de copier / coller pour reprendre et pointer sur les contenus publiés sur vos sites
• maîtriser vos contenus : paramétrer le nombre d'articles et le style des blocs dans lequel le contenu de chaque article est repris dans l'emailing,
• bénéficier d'un affichage fiabilisé du contenu (en fonction du formatage des éléments inclus dans le RSS) sur les principaux webmails, logiciels de messagerie ou terminal de lecture de l'emailing.

Voici comment éditer un bloc RSS dans votre emailing.

Autres Blocs

N'hésitez pas à utiliser tous les Blocs pour vous familiariser avec leur potentiel éditorial et créatif pour optimiser ainsi vos prochains emailings !

Découvrez comment prévisualiser l'emailing sur différents supports. 

Pour créer une opération, rendez-vous dans Opérations > Emailing > Nouveau > Créer un Emailing depuis un document vide. 

Paramétrez le nom d’émetteur, l'adresse de réponse, l'adresse d'envoi et l'objet de votre message :

Et familiarisez-vous avec l'interface de L'éditeur Sendethic pour éditer le contenu de l'emailing :

Barre des blocs 

1. Ajouter des blocs ou des colonnes accueillant des blocs,

2. Afficher/Masquer le détail de la zone d'édition,

3. Editer les styles généraux et les comportements d'affichage mobile. 

Barre d'onglets

4. Prévisualiser l'affichage du message sur les différentes résolutions de terminaux,  

5. Agrandir la zone de travail et obtenir de l'aide, 

6. Rétablir une version de contenu précédente : 2o secondes après le chargement de l'éditeur, une sauvegarde du contenu édité est effectuée automatiquement toutes les 5 minutes à la condition que le contenu édité soit différent du dernier précédemment sauvegardé. Une sauvegarde automatique est aussi effectuée au moment de la restauration d'une précédente version sauvegardée.

Zone d'édition 

7. C'est ici que vous déplacerez vos différents blocs afin de créer votre emailing.

Découvrez comment sélectionner et manipuler les blocs. 

Vous pouvez définir des styles applicables globalement aux différents de types de Colonnes ou de Blocs afin qu’il s’appliquent d’un coup à tous les éléments ajoutés dans la zone d’édition. En parallèle, vous pouvez également éditer le style spécifique d’une Colonne ou d’un Bloc en particulier.

1. Style général

Vous pouvez modifier les styles qui s’appliqueront par défaut aux Colonnes et/ou aux Blocs ajoutés dans la zone d’édition du message.

Vous pouvez également sauvegarder des Palettes. Vous travaillez  ainsi plus rapidement et fiabilisez l’harmonie des différents contenus composant votre message.

2. Style spécifique

La fenêtre d’édition du bloc s’affiche sur la droite également lorsque vous cliquez dans le bloc .

Remarque: la couleur du lien se paramètre dans la fenêtre d’édition du bloc ou dans le Style général

Respecter votre chartre graphique et créer des emails différenciant !

Par défaut sur 600 pixel de large, n’hésitez pas à augmenter cette largeur jusqu’à 800 ou 900 pixel de large.

C'est sur la fenêtre Style que vous allez également pouvoir insérer un fond, des marges et des bordures à votre email 

Découvrez comment utiliser la bibliothèque pour héberger vos fichiers et images. 

Ce guide didactique et esthétique de 40 pages a vocation à vous aider à découvrir les riches possibilités de design de l'email et à les appliquer dans l'Editeur Emailing Sendethic.

Vous pourrez ensuite router vos campagnes directement dans Sendethic ou dans une autre solution emailing.

Sommaire :

1. L’Editeur Emailing Sendethic
2. Utilisez nos blocs préconfigurés
3. Définissez des styles applicables globalement
4. Optimisez et pensez responsive
5. Éditez un bloc
6. Pré visualisez sur tous supports
7. Habillez le fond : dégradés, image…
8. Éditez et personnalisez vos contenus
9. Importez, traitez et améliorez vos images
10. Structurez avec des blocs imbriqués
11. Respirez : bordures, fond et espacement
12. L’image de fond  fiabilisée et responsive
13. La Collection pour vous inspirer
14. Exporter vers d'autres solutions emailing
15. Plus

A  noter que ce document est aussi directement disponible dans l'interface de votre compte Sendethic.