01 83 77 59 00
Rejoignez-nous sur LinkedIn
   
Suivez-nous sur Twitter
   
Abonnez-vous sur Youtube
  • fr
  • en
  • Tuto E-mailing : Créer facilement un HTML en 10 étapes, sans connaissance technique

    Trouver l’inspiration pour créer de beaux e-mailings en toute simplicité n’est pas toujours chose évidente. Vous cherchez de nouveaux modèles ? Vous rencontrez des difficultés sur la réalisation ou la modification de vos maquettes d’e-mailings ? Avec cet article, apprenez à réaliser un HTML facilement en utilisant l’éditeur d’e-mail de LINK Mobility France, sans connaissance technique nécessaire.

    Nous allons voir les étapes pour créer cet HTML :

    Tuto-creer-HTML-facile

    Matériel requis pour la réalisation de ce modèle :

    • 1 image de 600 pixels de largeur

    • 2 images de 300 pixels de largeur chacune

    • 3 icones réseaux sociaux de 256 pixels de largeur chacun

    • 4 références de couleur HTML : noir, blanc, bleu nuit, bleu pâle

    Pour obtenir votre matériel de travail, suivez ce lien.

    Etape 1 : créer un tableau

    Pour réaliser un HTML de A à Z depuis l’éditeur LINK Mobility, la première étape est de créer un tableau. Positionnez votre curseur à l’emplacement souhaité puis cliquez dans la barre d’outils sur « insérer un nouveau tableau » ou faites un clic droit.

    Dans la fenêtre « propriétés générales » qui s’ouvre, renseignez les paramètres de tableau suivants :

    • Colonnes : 1
    • Lignes : 4
    • Espacement dans les cellules / des cellules : 0
    • Alignement : centré
    • Bordure : 0
    • Largeur : 600 (pixels) « taille maximale recommandée »

    Validez en cliquant sur « insérer ».

    comment-creer-tableau-HTML

    ⚠️ Astuce

    Le fait de mettre les bordures et les espacements de cellules à 0 vous permet d’effacer les traits du tableau pour une meilleure fusion des couleurs de fond et des images. Nous y reviendrons plus tard…

    Etape 2 : insérer le logo / les images

    Que ce soit pour insérer un logo ou des images, deux options s’offrent à vous.

    1. Vous pouvez importer vos images sur la campagne e-mail puis les insérer dans le HTML depuis l’éditeur. Pour cela, cliquez sur « télécharger les images » depuis la barre d’outils et sélectionnez les fichiers depuis votre poste de travail.

    telecharger image HTML

    2. Vous pouvez aussi utiliser les URL de vos images si celles-ci sont hébergées sur un autre site Internet. Pour cela, cliquez simplement sur « insérer /éditer image » depuis la barre d’outils ou faites un clic droit.

    ➡️ Dans l’onglet « Général » de la fenêtre qui s’ouvre, renseignez l’URL de votre image ou sélectionnez une des images importées. N’oubliez pas de remplir les champs Titre et Description de l’image .

    inserer image hebergee HTML

    ⚠️ Astuce

    le champ description de l’image correspond à la balise « ALT » en HTML autrement dit à l’affichage alternatif de votre visuel. Il faut savoir que la plupart des messageries, notamment Outlook affichent les images d’un e-mailing uniquement sur l’action d’un « clic » du destinataire. Renseignez ce champ description vous permet alors de donner une indication sur le contenu de l’image à afficher. Elle doit être la plus précise possible : par exemple, « mens-costumes, vêtements chics pour hommes » ou « costume homme bleu nuit ».

    ➡️ Dans l’onglet « Apparence », vous pouvez modifier les paramètres d’affichage de votre logo et lui attribuer un style : taille, bordure, ombre portée, etc. Pour réaliser l’exemple proposé, entrez les paramètres suivants :

    • Alignement : Milieu
    • Taille : 150 (pixels)
    • Bordure : 0

    Terminez en cliquant sur « insérer » ou « mettre à jour ». Sélectionnez le logo dans le HTML et dans la barre d’outils, cliquez sur « centrer ».

    Choisir taille image HTML

    ➡️ Pour insérer l’image principale du modèle, positionnez votre curseur dans la 3e ligne du tableau puis suivez les étapes indiquées ci-dessus. Entrez les paramètres d’image suivants :

    • Taille : 600
    • Bordure : 0

    Terminez en cliquant sur « insérer » .

    ⚠️ Astuce

    Si votre image renferme un lien hypertexte, le fait de mettre la bordure de vos images à 0 évite l’apparition d’un cadre bleu sur les contours.

    Etape 3 : appliquer une couleur de fond sur une cellule

    Pour ajouter / modifier une couleur de fond sur une ligne ou une colonne, positionnez votre curseur sur l’élément souhaité, ici la 4e ligne du tableau. Cliquez sur « feuille de style » dans la barre d’outils, onglet « fond » puis dans « couleur de fond », entrez la référence HTML (ou hexadécimale) de votre choix. Ici #212a32 (bleu nuit).

    Terminez en cliquant sur « Appliquer ».

    Changer couleur fond cellule HTML

    Etape 4 : Insérer un nouveau tableau dans un tableau existant

    Pour commencer à insérer du texte dans votre HTML et réaliser le modèle proposé, positionnez votre curseur toujours dans la 4e ligne du tableau puis faites un clic droit pour sélectionner « insérer un nouveau tableau ». Utilisez les paramètres suivants :

    • Colonnes : 1
    • Lignes : 3
    • Espacement dans les cellules / des cellules : 0
    • Alignement : centré
    • Bordure : 0
    • Largeur : 550

    inserer tableau HTML dans tableau

    Etape 5 : Insérer un titre / un texte

    Dans le nouveau tableau créé, positionnez votre curseur dans la 1ere ligne puis sélectionnez l’ensemble du texte pour lui appliquer une mise en forme à l’aide de la barre d’outils. Utilisez les paramètres suivants :

    • Poids : gras (B)
    • Alignement : centré
    • Famille de police : Arial
    • Taille de police : 24 pts
    • Couleur : #80bfc4 (bleu pale)

    Pour insérer le texte descriptif , positionnez votre curseur dans la 2e ligne de votre second tableau puis rédigez votre texte. Sélectionnez l’ensemble obtenu pour lui appliquer une mise en forme à l’aide de la barre d’outils. Utilisez les paramètres suivants :

    • Poids : normal (par défaut)
    • Alignement : centré
    • Famille de police : Arial
    • Taille de police : 12 pts
    • Couleur : #ffffff (blanc)

    inserer texte newsletter

    Etape 6 : Insérer un bouton (Call to Action)

    Pour améliorer la délivrabilité d’un e-mailing, il est recommandé respecter un ratio de 60-40 : 60% de texte pour 40% d’images. Pour ne pas avoir à utiliser d’images pour vos boutons cliquables vous pouvez les créer en utilisant le HTML.

    Pour ce faire, positionnez votre curseur dans la 3e ligne de votre second tableau puis faites un clic droit pour « insérer un nouveau tableau » dans la cellule. Paramétrez le tableau comme suit :


    Général
    • Colonnes : 1
    • Lignes : 1
    • Espacement dans les cellules / des cellules : 0
    • Alignement : centré
    • Bordure : 0
    • Largeur : 200
    • Hauteur : 40

    Avancé
    Couleur de fond : #80bfc4 (bleu pale)

    inserer bouton call to action

    Pour ajouter le texte de votre Call to Action, positionnez votre curseur dans le tableau créé à l’instant, rédigez le texte puis mettez-le en forme comme suit :

    • Poids : normal (par défaut)
    • Alignement : centré
    • Famille de police : Arial
    • Taille de police : 14 pts
    • Couleur : #000000 (noir)

    Inserer texte CTA Email

    Pour aérer votre travail, jouez sur les espaces en augmentant par exemple, la hauteur de votre tableau. Dans l’exemple, 250 px.

    augmenter taille tableau HTML

    Fin de la 1e partie !

    Bravo ! Vous avez fait le plus dur. En suivant l’ensemble des étapes précédentes, vous obtenez ceci :

    Tuto modele HTML emailing

    Vous avez maintenant les principaux outils en mains pour créer facilement la suite de votre HTML.

    Pour créer la 2e partie, suivez les étapes suivantes :

    • Positionnez votre curseur en bas de page sous votre tout premier tableau
    • Créez un nouveau tableau de 600 pixels de largeur avec 1 ligne et 3 colonnes cf « Etape 1 – créer un tableau »

    • Dans la colonne 2, faites un clic droit et sélectionnez « feuille de style » ou utilisez la barre d’outils. Rendez-vous dans l’onglet « Boîte » et paramétrez une largeur de 20 pixels.

    • Insérez vos petites images dans les colonnes 1 et 3 de votre nouveau tableau et attribuez-leur une taille de 200 pixels chacune, cf « Etape 2 : insérer le logo / les images »

    • Appliquez la couleur de fond #212a32 (bleu nuit) à la 2 colonne (vide)

    Mettre couleur de fond HTML

    • De nouveau, en bas de page et créez un tableau avec les mêmes paramètres que le précédent. Attribuez-lui une couleur de fond : #212a32 (bleu nuit), cf « Etape 3 : appliquer une couleur de fond sur une cellule ».

    Dans la première colonne, ajoutez un nouveau tableau de 1 colonne et 3 lignes.

    Insérez le titre, le sous-titre, la description et le bouton de Call to Action selon les paramètres suivants, cf à partir de « Etape 5 : Insérer un titre » :

    • Titre : gras, centré, Arial, taille 14 pts, couleur : #80bfc4
    • Sous titre : gras, justifié, Arial, taille 12 pts, couleur : #ffffff
    • Texte descriptif : normal, justifié, Arial, taille 12 pts, couleur : #ffffff
    • Texte bouton : normal, centré, Arial, taille 12 pts, couleur : #000000
    • Bouton : largeur 150 pixels, couleur : #80bfc4

    Reproduisez le même tableau dans la colonne 2 (à droite).

    Fin de la 2eme partie !

    Votre HTML est presque terminé, beau travail ! A ce stade, vous obtenez ceci :

    exemple Visuel-HTML

    Vous pouvez maintenant passer à l’habillage du bas de page que l’on appelle le footer . Il vous permet de « fermer » votre HTML et d’y insérer les coordonnées de votre entreprise, éventuellement de faire le pont avec vos comptes de réseaux sociaux et si besoin d’y faire figurer les conditions particulières d’une offre en cours.

    Etape 7 : créer le footer

    Pour reproduire le footer du modèle proposé, créez un nouveau tableau tout en bas de page avec les critères suivants :

    • Colonnes : 1
    • Lignes : 1
    • Espacement dans les cellules / des cellules : 0
    • Alignement : centré
    • Bordure : 0
    • Largeur : 600 (pixels)
    • Couleur de fond : #3f3f3f (gris foncé)

    comment creer footer HTML

    Ajoutez le texte souhaité, par exemple le nom de votre entreprise ainsi que vos coordonnées postales, téléphoniques et électroniques. La pratique est de mettre ce texte dans une taille légèrement plus petite que le reste de l’e-mailing. Utilisez par exemple une taille de 8 pixels.

    Validez en cliquant sur « insérer ».

    Etape 8 : insérer un lien sur une image

    Pour renvoyer vos images vers votre site Internet, vous pouvez ajouter des liens sur chacune de vos images. Sélectionnez votre image, faites un clic droit puis « insérer/éditer le lien ». Dans le chp URL du lien renseignez l’adresse de votre page Internet (Accueil, page produit, compte Facebook, etc.).

    Indiquez si la page de destination doit s’ouvrir dans un nouvel onglet de navigation web ou sur la même pas de lecture.  

    Inserer lien image HTML

    Etape 9 : insérer un lien sur du texte

    Le parcours est le même : sélectionnez le texte que vous souhaitez rendre cliquable puis cliquez sur « insérer / éditer le lien » dans la barre d’outils ou faites un clic droit.

    Si vous le souhaitez, vous pouvez modifier la couleur du lien créé en utilisant les feuilles de styles de la barre d’outils.

    Comment modifier couleur lien HTML

    Etape 10 : ajouter les liens de redirection et de désinscription

    Pour finaliser la réalisation de votre HTML, pensez à inclure le lien de redirection ou (de page hébergée) qui facilite la lecture de vos destinataires. En cas de problème d’affichage des images ou de tout autre partie de l’e-mail dans la messagerie, le lien de redirection permet au lecteur de visualiser votre e-mail sur son navigateur web.

    Pour insérer les liens de redirection et de désinscription, placez votre curseur à l’endroit où vous souhaitez les faire apparaitre, cliquez sur « liens spéciaux » dans la barre d’outils et sélectionnez le lien à insérer Page hébergée pour le lien de redirection et Désinscription pour les désabonnements.

    Le lien de désinscription est, quant à lui, obligatoire. Les destinataires de vos e-mails doivent avoir la possibilité de se désabonner automatiquement de vos listes s’ils ne souhaitent plus recevoir vos communications.

    L’usage est de l’insérer en bas de page, mais vous pouvez tout aussi bien l’insérer dans la partie haute de votre e-mail.

    Dernière étape : Tester son e-mailing avant envoi

    Votre HTML est maintenant terminé ! Il ne vous reste plus qu’à l’essayer en vous envoyant un test sur votre adresse e-mail. Pensez à vérifier que :

    • Les images s’affichent correctement
    • Les liens pointent vers la bonne destination
    • Les polices et couleurs sont bien respectées
    • Les personnalisations (si existantes) correspondent
    • L’expéditeur et l’objet du message sont corrects

    Vous avez besoin d’accompagnement sur la réalisation de campagnes d’e-mailings, de SMS, Rich SMS ou messages vocaux ? Vous souhaitez en savoir plus sur nos solutions de communication sur mobiles ? N’hésitez pas à nous contacter au 01 83 77 59 00 ou envoyez-nous un e-mail . Nous nous ferons un plaisir de vous aider.

  • 0 Commentaires