Créer une Signature Email en HTML Facilement Sans Coder

Trop souvent, on sous-estime l’impact de notre propre image vis-à-vis de notre clientèle ou des nombreuses personnes à qui l’on adresse nos emails. Pourtant, une signature mail au format HTML bien faites peut-être un gage de professionnalisme, mais aussi une source de confiance et découverte pour ceux qui la reçoivent. En plus de cela, celle-ci peut tout à fait attirer du trafic sur votre site et augmenter vos conversions. Mais bon, nous n’avons pas tous les compétences nécessaires pour réaliser une telle signature HTML et en plus vous n’êtes peut-être pas très à l’aise avec ce langage. Ça tombe bien, car aujourd’hui je vous propose un tutoriel complet pour avoir une signature personnalisée qui attisera à coup sûr la curiosité de vos lecteurs. Sur laquelle vous pourrez également frimer avec toute vos compétences en sirotant un Gin-Tonic pendant que votre nombre d’abonnés grimpe sur vos réseaux sociaux. Mais juste avant ça on va faire les présentations avec notre générateur de signature d’email bien connu je l’ai nommé Si.gnatu.re.

Si.gnatu.re

Si.gnatu.re : Pour faire une signature d’email facilement et gratuitement

Cet outil gratuit est compatible avec les services de messagerie Gmail, Thunderbid, Outlook, et bien d’autres. Il va enfin venir en aide à tous vos confrères qui utilise encore la signature automatique « envoyé depuis iPhone de Jean ». Avec son interface simple d’utilisation et sa visualisation en temps réel, vous pourrez percevoir immédiatement le résultat de chacune de vos modifications. Maintenant que nous avons fait connaissance, passons à l’exécution.

Créer sa signature mail HTML

Pour réaliser une signature mail HTML facilement il y a quelques grandes étapes. Pour commencer, vous devez d’abord :

Ouvrir Si.gnatu.re
Cliquez sur « Create a signature »
Indiquez vos informations personnelles

Name : Votre nom et prénom
Job Title : Votre poste ou votre statut. Par exemple un étudiant pourra mettre « Étudiant en Communication & Marketing » tandis qu’un salarié pourra ajouter son poste « Responsable des ventes »
Département : Le domaine dans lequel vous exercer votre activité. Si le rendu ne vous satisfait pas, laissez cette case vide. Ensuite, nous allons ajouter vos informations de contact et votre site internet

Renseigner ses informations

Colonne Texte Label : si vous souhaitez modifier l’appellation de ce champ par un autre nom
Email : Votre adresse email
Mobile : Un numéro de téléphone portable sur lequel vous joindre
Office : Le téléphone fixe de votre bureau
Fax : Au cas où vous utiliseriez encore le fax ou la télécopie
Website : À ne surtout pas oublier, car il sera lié de facon automatique au logo que nous verrons dans la section design. Chacune des icônes que vous cocherez fera apparaître un flat design conçu pour un affichage sur mobile et tablette. Comme vous pouvez le voir sur la section suivante

On passe ensuite à la section adresse pour renseigner la boîte postale. En cochant l’option Link to map chaque utilisateur cliquant sur votre signature se verra redirigé sur une application de navigation comme Waze ou Google Maps

Organisation : Dans ce champ, vous devrez renseigner le nom de votre société
Adress Line 1 : Celui-ci viendra accueillir le nom de la rue, avenue, boulevard et pour certains le chemin.
Adress Line 2 : Pour apporter un complément d’adresse comme l’immeuble ou le numéro d’appartement
City : La ville
Post Code : Le numéro de code postal
Country : Le pays
Footer text : Cet espace sera réservé pour ajouter un bas de page pour votre email. On peut notamment y glisser un lien supplémentaire, une phrase, un leitmovit, etc. Bien, maintenant nous allons passer à l’ajout d’une image, d’une bannière ou d’un logo pour étoffer votre signature HTML . Puis nous la mettrons en forme pour lui donner les couleurs de votre entreprise. Normalement, vous devez avoir quelques choses qui ressemblent à cela (vous pouvez cliquer pour zoomer) :

Ajouter une bannière, un logo ou une image

On va venir pimenter votre première ébauche avec l’ajout d’une image, d’une bannière ou encore de votre logo qui me paraît essentiel. Nous allons nous rendre dans la section Image pour continuer.

La suite de notre tuto va dépendre de ce que vous souhaitez créer. En effet, si vous souhaitez créer facilement une signature HTML pour votre entreprise vous allez plutôt vous orienter par la mise en avant de votre logo. A contrario, si vous êtes étudiant, vous allez préférer mettre en avant votre visage et une bannière redirigeant sur votre portfolio ou site internet. Dans le cas de mon exemple, on va faire les deux.

Logo : Pour importer le logo de votre entreprise et pourquoi pas un produit. Veuillez à bien respecter les dimensions de 200 pixels par 200 pixels.
Selfie – Take a selfie : Afin d’ajouter l’image représentant votre jolie trombine.
Banner : Qui vous viendra ajouter votre contenue sous forme d’image que vous aurez au préalable créée.
Banner Link : Qui correspond au lien de redirection lorsque les récepteurs cliqueront sur votre signature mail. Je vais ensuite importer la photo de mon logo

Et ensuite la photo de profil

Si vous avez une bannière, ce sera exactement la même chose. Mais ne surchargez pas votre signature. Celle-ci pourrait se retrouver ensuite dans les spams de votre contact et en nettoyant sa boîte mail, il risquerait de ne jamais l’apercevoir…

Note : Comme vous pouvez le voir, il est important que vos deux images soient au même format. Dans le cas contraire, cela provoquerait une différence visuelle. Voici la version refaite avec les bonnes dimensions

Ajouter vos réseaux sociaux favoris

Pour être efficace, une belle signature mail suppose aussi que les gens puissent vous suivre sur les réseaux sociaux. Derrière cela et en fonction de votre stratégie. Vous pouvez également les convertir et faire un coup de maître avec un bon social selling. Dans cette section vous devrez donc remplir les champs suivants en indiquant uniquement : Vos comptes ou votre et le plus professionnel si vous travaillez pour une entreprise tous vos comptes si l’objectif de votre email et vous faire connaître la liste des différents réseaux sociaux supportés par Signature.

Vos réseaux sociaux ajoutés vont maintenant donner une touche inédite à votre signature. Maintenant nous allons la sublimer en travaillant son design général.

Personnaliser sa signature mail et la rendre efficace

Ok, maintenant on récapitule, on a à donc :

Vos informations de contacts
L’adresse de votre entreprise ou personnelle
Le logo de votre entreprise
Votre photo de profil
Une éventuelle bannière
Tous vos réseaux sociaux favoris

Maintenant nous allons prendre tout cela et faire un lifting pour pimper votre Signature. D’abord, rendez-vous dans la section Design.

Chacune des sections présentées va vous permettre de modifier une section de votre précieux sésame. Malheureusement, ce site n’embarque pas encore la possibilité de gérer de façon sélective les éléments qui nous intéressent. Mais pas de panique, nous allons faire avec.

Mise en page général

On va commencer de s’intéresser à l’onglet Layout qui signifie mise en page dans celui-ci on va trouver plusieurs options de modification.

Width : Signifiant largeur, cet onglet va vous permettre de régler la largeur de la barre qui fait la séparation entre votre photo/logo ainsi que vos coordonnées.
Logo Position : Viendra définir la position de votre logo par rapport à votre texte. Notamment, en haut (top), en bas (bottom), à gauche (left), à droite (right) . On se croirait presque sur la piste de danse…!
Divider Weight : Ici vous définirez l’épaisseur de votre trait de séparation.
Texte layout : La mise en page du texte, sera de rigueur en fonction de vos goûts personnels ou de la charte graphique de votre entreprise. Vous aurez le choix entre un style superposé, colonne, ou encore minimal (par défaut).
Padding : Pour gérer l’espacement du contenu de votre signature.
Divider colour : Peut être qu’il s’agit de la première fois que vous rencontrez ce type de code avec des zéros. En faite il s’agit d’un langage hexadécimal qui permet de convertir des chiffres en couleurs rien de plus… Du coup, il vous suffit de choisir une couleur qui vous plaît. Puis pour la réutiliser, un copié-collé de ce code la rendra visible instantanément sans possibilité de vous tromper dans les nuances. Pour cette partie, faites vos réglages et observez les résultats en temps réel. La ligne suivante va ajouter une touche de typographie à votre signature.

Typographie

La police de caractère n’est pas qu’un détail. C’est l’essence même de votre marque personnelle. Il faut donc la choisir avec rigueur. La police Helvetica, Aria par exemple, sera parfaite pour une utilisation dans un domaine d’activité stricte. Tandis que Futura, Century Gothic, sans-sérif (les empâtements des lettres) conviendra parfaitement dans le domaine des startups.

Font : L’onglet ou vous aller choisir votre police de caractère en fonction de ce que vous ciblez.
Use bold for titles : Sublimera votre en tête de signature avec une mise en gras.
Title font size : Réalisera des changements de taille sur votre titre.
Body font size : Modifiera l’apparence de votre corps de texte.

Couleurs

Modifiez vos couleurs comme nous l’avons vu juste avant avec le code hexadécimal.

Title colour : Choisissez la couleur de vos titres
Link Colour : La couleur de vos liens externes
Body colour : Permet le changement de couleur du corps du texte
Footer colour : Pour modifier la couleur de votre citation ou commentaire

Icônes

Enfin, nous allons également personnaliser la couleur de vos icônes pour agrémenter leurs visibilités, mais aussi l’envie de cliquer dessus. Il faut évidemment les rendre parfaitement attractives. En jouant sur la tonalité des couleurs et les différentes nuances qui vous sont proposées, il y a fort à parier que vous obtiendrez l’effet WAHOU ! Que vous voulez provoquer chez votre destinataire.

Icon size : Personnaliser la taille de vos différentes icônes. Comme le téléphone, l’envelopper, etc.
Icon foreground colour : Changer la couleur des icônes précédentes.
Social icons in brand colours : Associer les icônes des réseaux sociaux à la couleur du réseau en question.
Icon corner radius : En changeant ce paramètre vous pourrez adoucir les bords de vos onglets.
Icon Background colour : Tandis qu’avec cette option vous ajouterez un arrière plan aux icônes de votre signature.
Invert social brand colours : Inversera la couleur des réseaux sociaux en utilisant celle de l’arrière plan que vous avez précédemment sélectionné.

Finalisation

Hé ! Alors la voilà notre signature. Elle n’est pas belle la vie ? Mais tout n’est pas encore fini. Vous pouvez vous inspirer de celle que je vous ai donnée en exemple où me partage la vôtre sur le réseau de votre choix. Je pourrais même vous donner un coup de main. Cliquez ensuite sur Finish et ensuite Dowload HTML. Vous recevrez alors votre signature toute prête à être utilisé.

NB : Une fois votre signature téléchargé, gardez bien le lien que l’on vous propose d’enregistrer dans la section

Return to ***************** to edit your signature in the future. Copy link

Pendant 30 jours vous aurez la possibilité de l’éditer. Après quoi vous devrez vous intéresser à des formations adobe à prix réduit pour pouvoir utiliser tout le potentiel de création qui sommeille en vous. Voici un exemple avec ma signature de mail personnel.

Outils similaires

ZippySig
Signature Maker
WiseStamp
Assistance Email
Hubspot Mysignature

Si vous souhaitez en apprendre plus pour pouvoir ensuite l’installer Google et pouquoi pas Mozilla Thunderbird. Il vous suffit de me laisser un commentaire.

Anthony Gonnet Vandepoorte

Entrepreneur et inventeur en sciences numériques

Serial entrepreneur et intrapreneur, j’ai toujours eu pour seul objectif de marquer le monde à ma façon pour rejoindre ceux qui s’évertuent sans cesse à le changer. Mais avec une telle perspective et une ambition démesurée le chemin est long, semé d’embuches et on ne sait jamais là où il va nous mener... Lire la suite

Créer une signature d’email en HTML facilement

Si.gnatu.re : Pour faire une signature d’email facilement et gratuitement