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 : Pour faire une signature d’email facilement et gratuitement
Créer sa signature mail HTML
- Ouvrir Si.gnatu.re
- Cliquez sur « Create a signature »
- Indiquez vos informations personnelles
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
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
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
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.
Personnaliser sa signature mail et la rendre efficace
- 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
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
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
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é.
Return to ***************** to edit your signature in the future. Copy link
Outils similaires
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
0 commentaires