La communication digitale à la portée de tous

Logo la Communication d'aujourd'hui

Créez et personnalisez votre signature en HTML :

Tutoriel complet avec exemples de templates gratuits

Signature de mail

Les signatures d’e-mails en HTML permettent d’ajouter une touche professionnelle à vos correspondances. Ce guide vous explique pas à pas comment créer une signature personnalisée, inclure votre propre logo hébergé sur un serveur externe, et l’intégrer aux principaux clients de messagerie.

Pourquoi utiliser une signature en HTML ?

Une signature en HTML offre des possibilités de mise en forme avancées :

⇒ Incorporation de polices personnalisées, couleurs, et images.

⇒ Ajout de liens vers vos réseaux sociaux, site web ou numéro de téléphone.

⇒ Amélioration de l’image de marque de votre entreprise.

Avant de commencer : points à noter

⇒ Les images fournies dans les templates sont déjà hébergées : Vous n’avez pas besoin de les héberger. La seule image que vous devrez héberger est votre propre logo.

Utilisez des plateformes gratuites comme Imgur, Goopics, ImgBB ou Postimage.

⇒ Enregistrez votre code en .html : Si vous créez votre signature avec un éditeur de texte comme Notepad ou Sublime Text, sauvegardez le fichier avec l’extension <span>.html</span> pour prévisualiser le rendu.

⇒ Temps estimé : En moins d’une heure, vous pouvez créer et installer votre signature sur vos différents clients de messagerie.

Modèles de signatures HTML offertes

Voici des exemples de signature HTML que vous pouvez personnaliser :

Signature 1

Modèle signature électronique gratuite 1
[prism language="html"]
<!-- [et_pb_line_break_holder] --><table style="width: 600px; font-family: Arial, Helvetica, sans-serif; border-collapse: collapse;"><!-- [et_pb_line_break_holder] -->  <tr><!-- [et_pb_line_break_holder] -->    <td style="padding: 10px;"><!-- [et_pb_line_break_holder] -->      <!-- Logo --><!-- [et_pb_line_break_holder] -->      <img src="https://la-communication-daujourdhui.fr/wp-content/uploads/2024/11/Sans-titre-150-x-150-px.png.webp" alt="Logo" style="width: 150px; display: block;"><!-- [et_pb_line_break_holder] -->    </td><!-- [et_pb_line_break_holder] -->    <td style="padding: 10px; color: #000;"><!-- [et_pb_line_break_holder] -->      <!-- Name --><!-- [et_pb_line_break_holder] -->      <p style="margin: 0; font-size: 18px; font-weight: bold; color: #800080;">Cindy Bogaert-Dworniczek</p><!-- [et_pb_line_break_holder] -->      <!-- Company --><!-- [et_pb_line_break_holder] -->      <p style="margin: 0; font-size: 14px;">La Communication d'Aujourd'hui</p><!-- [et_pb_line_break_holder] -->      <!-- Baseline --><!-- [et_pb_line_break_holder] -->      <p style="margin: 5px 0; font-size: 12px; color: #FF69B4; font-style: italic;">La communication accessible pour tous !</p><!-- [et_pb_line_break_holder] -->    </td><!-- [et_pb_line_break_holder] -->  </tr><!-- [et_pb_line_break_holder] -->  <tr><!-- [et_pb_line_break_holder] -->    <td colspan="2" style="padding: 10px;"><!-- [et_pb_line_break_holder] -->      <!-- Contact Info --><!-- [et_pb_line_break_holder] -->      <p style="margin: 5px 0; font-size: 12px;"><img src="https://www.svgrepo.com/show/473308/mobile-button.svg" style="width: 14px; vertical-align: middle;"> <span style="color: #800080;">Téléphone :</span> 06 86 34 98 13</p><!-- [et_pb_line_break_holder] -->      <p style="margin: 5px 0; font-size: 12px;"><img src="https://www.svgrepo.com/show/517643/mail.svg" style="width: 14px; vertical-align: middle;"> <span style="color: #800080;">E-mail :</span> <a href="mailto:contact@la-communication-daujourdhui.fr" style="color: #000; text-decoration: none;">contact@la-communication-daujourdhui.fr</a></p><!-- [et_pb_line_break_holder] -->      <p style="margin: 5px 0; font-size: 12px;"><img src="https://www.svgrepo.com/show/510341/web-link.svg" style="width: 14px; vertical-align: middle;"> <span style="color: #800080;">Site web :</span> <a href="https://la-communication-daujourdhui.fr/" style="color: #000; text-decoration: none;">la-communication-daujourdhui.fr</a></p><!-- [et_pb_line_break_holder] -->    </td><!-- [et_pb_line_break_holder] -->  </tr><!-- [et_pb_line_break_holder] -->  <tr><!-- [et_pb_line_break_holder] -->    <td colspan="2" style="padding: 10px;"><!-- [et_pb_line_break_holder] -->      <!-- Social Media --><!-- [et_pb_line_break_holder] -->      <p style="margin: 5px 0; font-size: 12px;">Suivez-nous :<!-- [et_pb_line_break_holder] -->        <a href="https://www.facebook.com/Lacommunicationdaujourdhui?locale=fr_FR"><img src="https://www.svgrepo.com/show/475647/facebook-color.svg" style="width: 20px; vertical-align: middle;"></a><!-- [et_pb_line_break_holder] -->        <a href="https://www.instagram.com/"><img src="https://www.svgrepo.com/show/452229/instagram-1.svg" style="width: 20px; vertical-align: middle;"></a><!-- [et_pb_line_break_holder] -->        <a href="https://www.linkedin.com/company/105799507/"><img src="https://www.svgrepo.com/show/448234/linkedin.svg" style="width: 20px; vertical-align: middle;"></a><!-- [et_pb_line_break_holder] -->        <a href="https://www.tiktok.com/@cindy.bogaertdwor?_t=ZN-8tFfvuWNLiI&_r=1"><img src="https://www.svgrepo.com/show/303156/tiktok-icon-white-1-logo.svg" style="width: 20px; vertical-align: middle;"></a><!-- [et_pb_line_break_holder] -->        <a href="https://www.youtube.com/@cindybogaert-dworniczek2607"><img src="https://www.svgrepo.com/show/382710/youtube-you-tube-video.svg" style="width: 20px; vertical-align: middle;"></a><!-- [et_pb_line_break_holder] -->      </p><!-- [et_pb_line_break_holder] -->    </td><!-- [et_pb_line_break_holder] -->  </tr><!-- [et_pb_line_break_holder] -->  <tr><!-- [et_pb_line_break_holder] -->    <td colspan="2" style="padding: 10px; text-align: center;"><!-- [et_pb_line_break_holder] -->      <!-- Google Review --><!-- [et_pb_line_break_holder] -->      <a href="https://g.page/r/CUZDpteoI2IhEAE/review" style="text-decoration: none; color: #000;"><!-- [et_pb_line_break_holder] -->        <img src="https://www.svgrepo.com/show/120892/customer.svg" style="width: 20px; vertical-align: middle;"> Donnez votre avis<!-- [et_pb_line_break_holder] -->      </a><!-- [et_pb_line_break_holder] -->    </td><!-- [et_pb_line_break_holder] -->  </tr><!-- [et_pb_line_break_holder] --></table>
[/prism]
Télécharger le fichier html

Signature 2

Modèle signature électronique gratuite 2
[prism language="html"]
<!-- [et_pb_line_break_holder] --><table style="width: 600px; font-family: Arial, Helvetica, sans-serif; border: 1px solid #800080;"><!-- [et_pb_line_break_holder] -->  <tr><!-- [et_pb_line_break_holder] -->    <td colspan="2" style="text-align: center; padding: 10px; background-color: #800080; color: #fff;"><!-- [et_pb_line_break_holder] -->      <!-- Logo --><!-- [et_pb_line_break_holder] -->      <img src="https://la-communication-daujourdhui.fr/wp-content/uploads/2024/11/Sans-titre-150-x-150-px.png.webp" alt="Logo" style="width: 100px; border-radius: 50%;"><!-- [et_pb_line_break_holder] -->    </td><!-- [et_pb_line_break_holder] -->  </tr><!-- [et_pb_line_break_holder] -->  <tr><!-- [et_pb_line_break_holder] -->    <td colspan="2" style="padding: 10px;"><!-- [et_pb_line_break_holder] -->      <!-- Name --><!-- [et_pb_line_break_holder] -->      <p style="margin: 0; font-size: 18px; font-weight: bold; color: #800080;">Cindy Bogaert-Dworniczek</p><!-- [et_pb_line_break_holder] -->      <!-- Company --><!-- [et_pb_line_break_holder] -->      <p style="margin: 0; font-size: 14px;">La Communication d'Aujourd'hui</p><!-- [et_pb_line_break_holder] -->      <!-- Baseline --><!-- [et_pb_line_break_holder] -->      <p style="margin: 5px 0; font-size: 12px; color: #FF69B4; font-style: italic;">La communication accessible pour tous !</p><!-- [et_pb_line_break_holder] -->    </td><!-- [et_pb_line_break_holder] -->  </tr><!-- [et_pb_line_break_holder] -->  <tr><!-- [et_pb_line_break_holder] -->    <td colspan="2" style="padding: 10px; text-align: center;"><!-- [et_pb_line_break_holder] -->      <!-- Contact Info --><!-- [et_pb_line_break_holder] -->      <p style="margin: 5px 0; font-size: 12px; color: #800080;">Téléphone : <span style="color: #000;">06 86 34 98 13</span></p><!-- [et_pb_line_break_holder] -->      <p style="margin: 5px 0; font-size: 12px; color: #800080;">E-mail : <span style="color: #000;">contact@la-communication-daujourdhui.fr</span></p><!-- [et_pb_line_break_holder] -->      <p style="margin: 5px 0; font-size: 12px; color: #800080;">Site web : <a href="https://la-communication-daujourdhui.fr/" style="color: #000; text-decoration: none;">la-communication-daujourdhui.fr</a></p><!-- [et_pb_line_break_holder] -->    </td><!-- [et_pb_line_break_holder] -->  </tr><!-- [et_pb_line_break_holder] -->  <tr><!-- [et_pb_line_break_holder] -->    <td colspan="2" style="text-align: center; padding: 10px; background-color: #FF69B4; color: #fff;"><!-- [et_pb_line_break_holder] -->      <!-- Social Media --><!-- [et_pb_line_break_holder] -->      <p style="margin: 0;">Suivez-nous :<!-- [et_pb_line_break_holder] -->        <a href="https://www.facebook.com/Lacommunicationdaujourdhui?locale=fr_FR"><img src="https://www.svgrepo.com/show/475647/facebook-color.svg" style="width: 20px; margin: 0 5px;"></a><!-- [et_pb_line_break_holder] -->        <a href="https://www.instagram.com/"><img src="https://www.svgrepo.com/show/452229/instagram-1.svg" style="width: 20px; margin: 0 5px;"></a><!-- [et_pb_line_break_holder] -->        <a href="https://www.linkedin.com/company/105799507/"><img src="https://www.svgrepo.com/show/448234/linkedin.svg" style="width: 20px; margin: 0 5px;"></a><!-- [et_pb_line_break_holder] -->        <a href="https://www.tiktok.com/@cindy.bogaertdwor?_t=ZN-8tFfvuWNLiI&_r=1"><img src="https://www.svgrepo.com/show/303156/tiktok-icon-white-1-logo.svg" style="width: 20px; margin: 0 5px;"></a><!-- [et_pb_line_break_holder] -->        <a href="https://www.youtube.com/@cindybogaert-dworniczek2607"><img src="https://www.svgrepo.com/show/382710/youtube-you-tube-video.svg" style="width: 20px; margin: 0 5px;"></a><!-- [et_pb_line_break_holder] -->      </p><!-- [et_pb_line_break_holder] -->    </td><!-- [et_pb_line_break_holder] -->  </tr><!-- [et_pb_line_break_holder] --></table>
[/prism]
Télécharger le fichier html

Signature 3

Modèle signature électronique gratuite 3
[prism language="html"]
<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><table style="width: 600px; font-family: Arial, Helvetica, sans-serif; border-collapse: collapse;"><!-- [et_pb_line_break_holder] -->  <tr><!-- [et_pb_line_break_holder] -->    <td style="padding: 10px; text-align: left; width: 150px;"><!-- [et_pb_line_break_holder] -->      <!-- Logo --><!-- [et_pb_line_break_holder] -->      <img src="https://la-communication-daujourdhui.fr/wp-content/uploads/2024/11/Sans-titre-150-x-150-px.png.webp" alt="Logo" style="width: 100px; border-radius: 10px;"><!-- [et_pb_line_break_holder] -->    </td><!-- [et_pb_line_break_holder] -->    <td style="padding: 10px;"><!-- [et_pb_line_break_holder] -->      <!-- Name --><!-- [et_pb_line_break_holder] -->      <p style="margin: 0; font-size: 18px; font-weight: bold; color: #800080;">Cindy Bogaert-Dworniczek</p><!-- [et_pb_line_break_holder] -->      <!-- Company --><!-- [et_pb_line_break_holder] -->      <p style="margin: 0; font-size: 14px;">La Communication d'Aujourd'hui</p><!-- [et_pb_line_break_holder] -->      <!-- Baseline --><!-- [et_pb_line_break_holder] -->      <p style="margin: 5px 0; font-size: 12px; color: #FF69B4; font-style: italic;">La communication accessible pour tous !</p><!-- [et_pb_line_break_holder] -->    </td><!-- [et_pb_line_break_holder] -->  </tr><!-- [et_pb_line_break_holder] -->  <tr><!-- [et_pb_line_break_holder] -->    <td colspan="2" style="padding: 10px; background-color: #800080; color: #fff;"><!-- [et_pb_line_break_holder] -->      <!-- Contact Info --><!-- [et_pb_line_break_holder] -->      <p style="margin: 5px 0; font-size: 12px;">Téléphone : <span style="color: #fff;">06 86 34 98 13</span></p><!-- [et_pb_line_break_holder] -->      <p style="margin: 5px 0; font-size: 12px;">E-mail : <a href="mailto:contact@la-communication-daujourdhui.fr" style="color: #fff; text-decoration: none;">contact@la-communication-daujourdhui.fr</a></p><!-- [et_pb_line_break_holder] -->      <p style="margin: 5px 0; font-size: 12px;">Site web : <a href="https://la-communication-daujourdhui.fr/" style="color: #fff; text-decoration: none;">la-communication-daujourdhui.fr</a></p><!-- [et_pb_line_break_holder] -->    </td><!-- [et_pb_line_break_holder] -->  </tr><!-- [et_pb_line_break_holder] -->  <tr><!-- [et_pb_line_break_holder] -->    <td colspan="2" style="padding: 10px; text-align: center;"><!-- [et_pb_line_break_holder] -->      <!-- Social Media --><!-- [et_pb_line_break_holder] -->      <p style="margin: 0;">Suivez-nous :<!-- [et_pb_line_break_holder] -->        <a href="https://www.facebook.com/Lacommunicationdaujourdhui?locale=fr_FR"><img src="https://www.svgrepo.com/show/475647/facebook-color.svg" style="width: 20px; margin: 0 5px;"></a><!-- [et_pb_line_break_holder] -->        <a href="https://www.instagram.com/"><img src="https://www.svgrepo.com/show/452229/instagram-1.svg" style="width: 20px; margin: 0 5px;"></a><!-- [et_pb_line_break_holder] -->        <a href="https://www.linkedin.com/company/105799507/"><img src="https://www.svgrepo.com/show/448234/linkedin.svg" style="width: 20px; margin: 0 5px;"></a><!-- [et_pb_line_break_holder] -->        <a href="https://www.tiktok.com/@cindy.bogaertdwor?_t=ZN-8tFfvuWNLiI&_r=1"><img src="https://www.svgrepo.com/show/303156/tiktok-icon-white-1-logo.svg" style="width: 20px; margin: 0 5px;"></a><!-- [et_pb_line_break_holder] -->        <a href="https://www.youtube.com/@cindybogaert-dworniczek2607"><img src="https://www.svgrepo.com/show/382710/youtube-you-tube-video.svg" style="width: 20px; margin: 0 5px;"></a><!-- [et_pb_line_break_holder] -->      </p><!-- [et_pb_line_break_holder] -->    </td><!-- [et_pb_line_break_holder] -->  </tr><!-- [et_pb_line_break_holder] -->  <tr><!-- [et_pb_line_break_holder] -->    <td colspan="2" style="padding: 10px; text-align: center;"><!-- [et_pb_line_break_holder] -->      <!-- Google Review --><!-- [et_pb_line_break_holder] -->      <a href="https://g.page/r/CUZDpteoI2IhEAE/review" style="text-decoration: none; color: #000;"><!-- [et_pb_line_break_holder] -->        <img src="https://www.svgrepo.com/show/120892/customer.svg" style="width: 20px; vertical-align: middle;"> Donnez votre avis<!-- [et_pb_line_break_holder] -->      </a><!-- [et_pb_line_break_holder] -->    </td><!-- [et_pb_line_break_holder] -->  </tr><!-- [et_pb_line_break_holder] --></table><!-- [et_pb_line_break_holder] -->
[/prism]
Télécharger le fichier html

Création et sauvegarde de votre signature

  1. Utilisez un éditeur de texte : Ouvrez un outil comme Notepad, Sublime Text, ou Visual Studio Code.
  2. Collez le code HTML : Utilisez le modèle ci-dessus ou un de vos propres designs.
  3. Modifiez vos informations ( en noir sur votre editeur pour le texte et en orange pour les liens)
  4. Enregistrez le fichier avec l’extension .html : Exemple : signature.html
  5. Prévisualisez votre signature : Double-cliquez sur le fichier pour l’ouvrir dans un navigateur web.

Intégration dans les principaux clients de messagerie

Gmail (version web)
  1. Connectez-vous à votre compte Gmail.
  2. Cliquez sur l’icône en forme de roue dentée à droite et sélectionnez Voir tous les paramètres.
  3. Allez dans l’onglet Général et faites défiler jusqu’à la section Signature.
  4. Cliquez sur Nouvelle signature et donnez-lui un nom.
  5. Collez le code HTML directement ou utilisez la barre d’outils pour recréer la mise en forme.
  6. Enregistrez les modifications.
Outlook (version bureau)
  1. Ouvrez Outlook et allez dans Fichier > Options > Courrier > Signatures.
  2. Cliquez sur Nouvelle, donnez un nom à la signature.
  3. Dans la zone d’édition, Copier/coller la signature html que vous avez probablement ouverte sur un navigateur web. 
  4. Collez ou recréez votre signature.
  5. Enregistrez les modifications.

Deuxième option :

  1. Enregistrez le fichier html dans votre ordinateur en suivant ce chemin : file:///C:/Users/user/AppData/Roaming/Signatures/
  2. Ouvrez Outlook et allez dans Fichier > Options > Courrier > Signatures.
  3. Vous retrouverez la signature enregistrez plus tôt.
  4. Sélectionnez la et enregistrez la.

 

Outlook (version mobile)
  1. Ouvrez l’application Outlook sur votre appareil.
  2. Accédez à Paramètres > Signature.
  3. Ajoutez une signature texte (les versions mobiles ne supportent pas les signatures HTML).
Apple Mail (version mobile)
  1. Ouvrez l’application Mail sur votre iPhone ou iPad.
  2. Allez dans Paramètres > Mail > Signature.
  3. Saisissez une signature simple (les signatures HTML ne sont pas supportées).
Gmail (version mobile)
  1. Ouvrez l’application Gmail sur votre smartphone.
  2. Accédez à Paramètres > Adresse e-mail > Signature mobile.
  3. Saisissez une signature simple (les versions mobiles n’acceptent pas le HTML complexe).
Outlook (version web)
  1. Connectez-vous à Outlook.com.
  2. Allez dans Paramètres > Afficher tous les paramètres Outlook > Composer et répondre.
  3. Collez le code HTML dans la section Signature.
  4. Enregistrez les modifications.
Apple Mail (version bureau)
  1. Ouvrez l’application Mail sur votre Mac.
  2. Allez dans Mail > Préférences > Signatures.
  3. Sélectionnez un compte, puis cliquez sur le bouton + pour créer une nouvelle signature.
  4. Collez le code HTML directement dans la zone d’édition.
  5. Fermez la fenêtre pour enregistrer.
Thunderbird
  1. Ouvrez Thunderbird et allez dans Outils > Paramètres du compte.
  2. Sélectionnez un compte, puis activez Joindre une signature.
  3. Cliquez sur Choisir un fichier, puis sélectionnez votre fichier <span>.html</span>.
  4. Enregistrez les paramètres.

Conseils supplémentaires

  • Testez votre signature : Envoyez un e-mail à vous-même pour vous assurer que tout s’affiche correctement.
  • Respectez une mise en page simple : Certains clients de messagerie n’affichent pas correctement les designs complexes.
  • Utilisez des images légères : Les logos ou icônes lourds peuvent ralentir le chargement.
Serveur de messagerie

Conclusion

Une signature en HTML bien conçue est un atout pour renforcer votre image professionnelle. Suivez ces étapes pour créer une signature personnalisée, et n’oubliez pas d’utiliser des plateformes fiables pour héberger votre logo. Besoin d’aide supplémentaire ? Consultez les forums ou guides en ligne des différents clients de messagerie.

Bonne création !

Offre professionnelle

Vous souhaitez gagner du temps ?

Je prpose 6 signatures HTML professionnelles prêtes à l’emploi, déjà paramétrées et adaptées aux principaux clients de messagerie, pour seulement 20 €.

  1. Design soigné et personnalisable.
  2. Intégration facile avec votre logo.
  3. Support pour l’installation inclus.
Contactez-moi
Cindy Bogaert Dworniczek, chargée de communication

Cindy Bogaert-Dworniczek

Vendéenne de 37 ans, je suis diplômée en webdesign et spécialisée en communication digitale.

Avec plus de 10 ans d’expérience en création de sites web, graphisme et gestion de réseaux sociaux, j’ai eu la chance d’occuper divers postes, notamment comme Chargée de mission site internet pour le Diocèse de Luçon. J’ai également accompagné plusieurs entreprises dans leurs projets de webmarketing, de conception de sites, et de communication interne et externe.

Passionnée de photographie, j’aime capturer les instants et les émotions, un atout que j’intègre souvent dans mes projets pour enrichir les visuels et raconter des histoires authentiques.

Mon objectif ? Vous aider à naviguer dans l’univers digital et à maîtriser les outils adaptés, pour une communication simple, efficace et à votre image. 😊

Derniers articles

Panorama des IA actuelles : Quels outils pour quels usages ?

Panorama des IA actuelles : Quels outils pour quels usages ?

Fév 4, 2025

L’intelligence artificielle (IA) transforme notre façon de travailler et d’innover. Que vous soyez entrepreneur, créateur de contenu ou chef d’entreprise, les outils d’IA offrent des solutions adaptées à une multitude de besoins. Mais comment choisir parmi la variété...

IA et Entreprises : Retour sur la Conférence du Club TGS à la CCI Vendée

IA et Entreprises : Retour sur la Conférence du Club TGS à la CCI Vendée

Jan 31, 2025

Hier soir, le 30 janvier 2025, j’ai eu la chance d’être invité par Jérôme Tognini à la conférence sur l’Intelligence Artificielle (IA) organisée par le Club TGS à la CCI Vendée. Je les remercie pour cette opportunité qui m’a permis d’élargir mes perspectives sur les...

La Protection des Données en France en 2025

La Protection des Données en France en 2025

Jan 27, 2025

Le 28 janvier, Journée de la Protection des Données, est l’occasion idéale de réfléchir aux défis actuels et aux évolutions légales pour garantir la confidentialité et la sécurité des données personnelles. Voici les informations clés pour 2025, en France, basées sur...

Les différences principales entre WordPress.org et WordPress.com

Les différences principales entre WordPress.org et WordPress.com

Jan 20, 2025

WordPress est une plateforme populaire pour créer des sites web. Cependant, il existe deux versions principales : WordPress.org et WordPress.com. Chacune a ses avantages et ses limites. Cet article explore leurs différences pour vous aider à choisir celle qui...