Email Template Builder : Emails HTML

Qu'est-ce qu'Email Template Builder ?

Email Template Builder est un éditeur visuel basé sur des blocs pour créer des templates d'emails HTML responsifs directement dans votre navigateur. Vous ajoutez des blocs de contenu — en-têtes, paragraphes de texte, boutons, images, séparateurs, dispositions deux colonnes et pieds de page — vous les organisez avec des commandes haut/bas et modifiez chacun via un panneau de propriétés. Un aperçu en direct avec iframe se met à jour au fur et à mesure de votre création. Une fois terminé, l'outil génère un email HTML complet basé sur des tableaux avec CSS inline, compatible avec Gmail, Outlook et Apple Mail. Aucun logiciel de design, aucun code et aucun compte requis.

Fonctionnalités principales

• Éditeur d'email visuel basé sur des blocs — Construisez votre email en ajoutant et réorganisant des blocs de contenu. Sept types de blocs : en-tête, texte, bouton, image, séparateur, deux colonnes et pied de page.
• Blocs d'en-tête, texte, bouton, image, séparateur et pied de page — Chaque bloc possède son propre panneau de propriétés. Les blocs d'en-tête ont des sélecteurs de couleur d'arrière-plan et de texte. Les blocs de texte permettent de choisir la taille de police (12px–24px) et l'alignement (gauche, centre, droite). Les blocs de bouton acceptent une étiquette, une URL et une paire de couleurs. Les blocs d'image prennent une URL, un texte alternatif et une largeur.
• Aperçu en direct avec bascule mobile/bureau — Le panneau de l'éditeur inclut un aperçu iframe en temps réel. Basculez entre bureau (largeur complète) et mobile (375px) sans quitter l'onglet éditeur.
• Personnaliser les couleurs, polices et espacements — Les paramètres globaux de l'email contrôlent l'arrière-plan du corps (#f4f4f4 par défaut), l'arrière-plan du contenu (#ffffff), la couleur principale, la largeur maximale (480px, 600px ou 640px) et la famille de polices (Arial, Georgia, Helvetica ou Verdana).
• Exporter un HTML propre et responsif — L'onglet HTML affiche le code source généré complet : une mise en page basée sur des tableaux conforme aux standards avec CSS inline, texte de préen-tête, solutions de repli boutons MSO VML pour Outlook et une media query responsif qui se réduit à la largeur complète sur les écrans inférieurs à 600px.
• Copier le HTML dans le presse-papiers — Le bouton "Copier HTML" copie toute la chaîne HTML générée en un clic, avec un état de confirmation "Copié !".
• Templates de démarrage prêts à l'emploi — Trois templates de démarrage se chargent instantanément : Bienvenue, Newsletter et Promo. Chacun inclut des blocs préconfigurés adaptés à son usage. Bienvenue et Newsletter utilisent votre couleur principale actuelle ; Promo utilise son propre accent rouge.
• 100% côté client — Aucun contenu d'email n'est transmis à aucun serveur. Fonctionne entièrement hors ligne une fois la page chargée.

Comment utiliser Email Template Builder

Étape 1 : Configurer les paramètres globaux

Ouvrez Bientôt disponible: Email Template Builder et localisez la carte "Paramètres email" dans le panneau gauche. Remplissez :

• Ligne d'objet — Devient la balise <title> dans le HTML exporté (visible dans certains clients email et utilisé pour l'accessibilité).
• Texte de préen-tête — La ligne d'aperçu cachée qui apparaît après l'objet dans les aperçus de la boîte de réception. Par défaut "Texte d'aperçu qui apparaît dans la boîte de réception...". Définissez-le comme un résumé convaincant d'une ligne.
• Arrière-plan du corps / Arrière-plan du contenu — Les sélecteurs de couleur permettent de saisir une valeur hexadécimale ou d'utiliser le sélecteur de couleur natif. Le corps gris clair standard (#f4f4f4) sur contenu blanc (#ffffff) correspond au modèle visuel de la plupart des grandes marques.
• Couleur principale — Utilisée automatiquement comme arrière-plan par défaut pour les nouveaux blocs d'en-tête et de bouton.
• Largeur maximale — Choisissez 480px (compact), 600px (standard, par défaut) ou 640px (plus large).
• Famille de polices — Arial (par défaut), Georgia, Helvetica ou Verdana.

Étape 2 : Charger un template ou ajouter des blocs

Option A : Charger un template de démarrage. Cliquez sur "Bienvenue", "Newsletter" ou "Promo" dans la carte "Templates de démarrage". L'éditeur charge un ensemble complet de blocs préconfigurés pour ce cas d'usage. Le template Bienvenue comprend un en-tête, un bloc de texte de salutation, un bouton CTA "Commencer", un séparateur et un pied de page. Le template Promo utilise une couleur d'en-tête et de bouton rouge codée en dur (#e53e3e) et inclut un espace réservé pour l'image. Les démarrages Bienvenue et Newsletter utilisent votre paramètre de couleur principale actuel ; le template Promo utilise son propre schéma de couleurs rouge.

Option B : Construire de zéro. Cliquez sur n'importe quel type de bloc dans la carte "Ajouter un bloc". Blocs disponibles : En-tête, Texte, Bouton, Image, Séparateur, Deux colonnes, Pied de page. Chaque nouveau bloc apparaît en bas de la liste de blocs et ouvre automatiquement son panneau d'édition.

Étape 3 : Modifier chaque bloc

Cliquez sur un bloc dans la liste "Blocs" pour ouvrir son éditeur. Les modifications se répercutent immédiatement dans l'aperçu en direct.

• Bloc en-tête : Champs de texte pour le titre et le sous-titre, plus sélecteurs de couleur d'arrière-plan et de texte.
• Bloc texte : Une zone de texte pour le contenu (les sauts de ligne créent des balises <p> séparées), un menu déroulant de taille de police (12px à 24px) et alignement gauche/centre/droite.
• Bloc bouton : Texte d'étiquette, URL de destination, couleur d'arrière-plan du bouton et couleur du texte du bouton. Le HTML généré inclut le balisage MSO VML pour qu'Outlook affiche un vrai bouton plutôt qu'un simple lien.
• Bloc image : URL de l'image (ou téléchargez un fichier local), texte alternatif et largeur (par exemple, 100% ou 400px). Les images téléchargées sont intégrées sous forme d'URIs de données Base64.
• Bloc séparateur : Sélecteur de couleur et entrée d'épaisseur (1–10px).
• Bloc colonnes : Deux zones de texte séparées pour le contenu de la colonne gauche et droite.
• Bloc pied de page : Une zone de texte pour le texte du pied de page (les sauts de ligne deviennent des paragraphes séparés), une paire de champs d'étiquette de lien et d'URL de lien (pour ajouter un lien de désabonnement, par exemple), plus des sélecteurs de couleur d'arrière-plan et de texte.

Utilisez les boutons fléchés haut/bas pour réorganiser les blocs. Utilisez l'icône corbeille pour supprimer un bloc.

Étape 4 : Aperçu et export

Passez à l'onglet Aperçu pour une vue pleine page de l'email. Utilisez le basculeur Bureau/Mobile pour vérifier la mise en page responsif à 375px.

Passez à l'onglet Code HTML pour voir le code source généré. Cliquez sur la zone de texte pour sélectionner tout le texte, ou cliquez sur "Copier HTML" pour le copier dans votre presse-papiers. Le code est prêt à être collé dans n'importe quel ESP (fournisseur de services email) comme Mailchimp, SendGrid ou HubSpot.

Exemples pratiques

Exemple 1 : Annonce de lancement de produit

Commencez avec le template de démarrage "Promo". Remplacez le texte d'en-tête par le nom de votre produit et le slogan de lancement. Mettez à jour l'arrière-plan d'en-tête #e53e3e avec votre couleur de marque en utilisant le sélecteur de couleur. Remplacez l'URL d'image espace réservé par la capture d'écran de votre produit. Modifiez le bloc de texte pour décrire l'avantage principal en une ou deux phrases. Mettez à jour l'étiquette du bouton ("Précommander maintenant") et l'URL. Définissez le texte du préen-tête sur "Présentation de [Produit] — disponible aujourd'hui." Exportez le HTML et collez-le dans votre ESP.

Exemple 2 : Newsletter hebdomadaire

Chargez le template "Newsletter". Définissez l'objet sur "Digest hebdomadaire — Semaine du 3 mars 2026". Modifiez le bloc de texte de l'article vedette avec votre article principal. Ajoutez un deuxième bloc "Deux colonnes" en dessous pour deux articles plus courts côte à côte. Ajoutez un bloc "Bouton" avec "Lire l'archive complète" lié à votre site web. Ajustez le texte du pied de page pour inclure votre lien de désabonnement et l'adresse postale physique comme requis par CAN-SPAM.

Exemple 3 : Séquence d'email de bienvenue

Utilisez le template "Bienvenue". Changez le sous-titre de l'en-tête en "Votre compte est prêt." Modifiez le texte du corps en trois paragraphes courts : ce que l'utilisateur peut faire, où trouver de l'aide et comment contacter le support. Remplacez l'URL du bouton "Commencer" par l'URL d'intégration réelle. Passez à l'onglet Aperçu, basculez en vue mobile et confirmez que tout le texte est lisible à 375px. Exportez et téléchargez dans le flux de travail d'automatisation de votre ESP.

Conseils et meilleures pratiques

Définissez votre couleur principale avant de charger un template. Les templates de démarrage appliquent votre couleur principale actuelle aux nouveaux blocs d'en-tête et de bouton. Changer la couleur principale après le chargement d'un template ne met pas à jour rétroactivement les blocs existants — le sélecteur de couleur de chaque bloc est modifiable indépendamment.

Utilisez le champ de préen-tête. Beaucoup de constructeurs l'ignorent, mais le texte de préen-tête influence directement les taux d'ouverture. Le HTML généré le cache avec display:none; ... max-height:0px; overflow:hidden — il n'apparaîtra pas visuellement dans l'email mais s'affichera dans les aperçus de la boîte de réception.

Les tailles de police inférieures à 14px s'affichent mal sur mobile. Le menu déroulant de taille de police du bloc texte va aussi bas que 12px. En pratique, utilisez 14px ou plus pour le texte du corps. Utilisez 12px uniquement pour les clauses légales ou les mentions légales du pied de page.

Testez la largeur maximale de 600px. La largeur maximale standard de 600px fonctionne bien sur tous les clients principaux. L'option 480px convient aux designs de mise en page étroite ; 640px n'est approprié que pour les clients qui n'appliquent pas leurs propres contraintes de largeur.

Les boutons VML Outlook ne nécessitent aucune étape supplémentaire. Le HTML généré inclut déjà le bloc de commentaire conditionnel MSO VML autour de chaque bouton. Si vous collez dans un ESP, assurez-vous que l'ESP ne supprime pas les commentaires HTML, car le balisage VML en dépend.

Problèmes courants et dépannage

L'aperçu en direct affiche une zone blanche vide. Cela se produit avant l'ajout de blocs. Ajoutez au moins un bloc ou chargez un template de démarrage — l'iframe se remplira immédiatement.

Le bloc d'image affiche une image cassée. L'outil affiche l'URL de l'image directement dans une balise <img>. Vérifiez que l'URL est publiquement accessible (pas derrière une authentification) et utilise HTTPS. Le texte alternatif que vous saisissez est inclus dans le HTML exporté pour l'accessibilité.

Le HTML copié affiche une mise en page cassée dans Outlook. Confirmez que le paramètre de famille de polices utilise une pile sécurisée pour le web (par exemple, Arial, Helvetica, sans-serif). Les polices web (Google Fonts, polices personnalisées) ne s'affichent pas dans Outlook. Les quatre options de police de l'outil sont des piles sécurisées pour le web.

Le bloc deux colonnes se réduit à une seule colonne sur mobile. C'est le comportement attendu des commentaires conditionnels MSO et de la mise en page en bloc en ligne. Sur les écrans inférieurs à 600px, la media query définit .email-container sur width: 100%, et les colonnes en bloc en ligne à 48% de largeur s'enveloppent naturellement. Il n'y a pas d'option pour forcer les colonnes côte à côte sur mobile.

Le template de démarrage n'utilise pas la couleur de ma marque. Vérifiez le paramètre Couleur principale dans la carte Paramètres email avant de cliquer sur un bouton de template de démarrage. Les templates lisent la couleur principale au moment du chargement — la changer après le chargement nécessite de mettre à jour manuellement le sélecteur de couleur de chaque bloc.

Confidentialité et sécurité

Email Template Builder construit et prévisualise le HTML d'email entièrement dans votre navigateur. Aucun contenu de template, ligne d'objet ou URL d'image n'est transmis à un serveur. L'aperçu en direct utilise un iframe avec sandbox="allow-same-origin" — aucun script ne s'exécute dans l'aperçu. L'outil fonctionne entièrement hors ligne une fois la page chargée, ce qui le rend sûr pour le contenu marketing confidentiel ou les documents clients.

Foire aux questions

Email Template Builder est-il gratuit ? Oui. L'éditeur de blocs complet, les sept types de blocs, les trois templates de démarrage, l'aperçu en direct et l'export HTML sont entièrement gratuits sans compte requis. Accédez à l'outil sur Bientôt disponible: /web/social/email-template-builder.

Email Template Builder fonctionne-t-il hors ligne ? Oui, une fois la page chargée. Toute la génération HTML se passe en JavaScript sur votre appareil. L'aperçu en direct charge les URL d'image depuis leur source (ce qui nécessite une connexion), mais l'éditeur, la gestion des blocs et l'export HTML fonctionnent tous hors ligne.

Mes données sont-elles en sécurité avec Email Template Builder ? Le contenu de votre email, les lignes d'objet et les choix de design ne quittent jamais votre navigateur. L'outil génère le HTML localement et n'effectue aucune requête serveur avec vos données. Il est sûr de créer des emails clients confidentiels ou du contenu de campagne propriétaire.

Quels clients email le HTML généré prend-il en charge ? L'outil génère du HTML basé sur des tableaux avec CSS inline, la méthode de mise en page avec la compatibilité la plus large avec les clients email. Il inclut des conditionnels MSO VML pour le rendu des boutons Outlook et une media query responsif pour les clients mobiles. Il est conçu pour Gmail, Outlook (2016–2024), Apple Mail et Yahoo Mail.

Puis-je ajouter plus de sept types de blocs ? L'éditeur actuel prend en charge sept types de blocs : en-tête, texte, bouton, image, séparateur, colonnes et pied de page. Vous pouvez ajouter le même type de bloc plusieurs fois pour construire des mises en page complexes — par exemple, des blocs de texte et d'image alternés, ou plusieurs blocs de bouton.

Comment ajouter un lien de désabonnement ? Ajoutez un bloc de pied de page. L'éditeur de pied de page inclut un champ dédié d'étiquette de lien et un champ d'URL de lien. Saisissez le texte du lien (par exemple, "Se désabonner") et l'URL de destination. Le HTML généré le rend comme une balise <a> cliquable sous le texte du pied de page. Vous pouvez également remplacer l'URL par la balise de fusion de désabonnement de votre ESP après export.

Qu'est-ce que le champ de texte de préen-tête ? Le texte de préen-tête est une courte chaîne (généralement 40–130 caractères) que les clients email affichent après la ligne d'objet dans la liste de la boîte de réception. Il est caché dans l'email rendu en CSS. L'outil l'inclut dans le HTML généré dans un <div> avec display:none et max-height:0px.

Puis-je enregistrer les templates que j'ai créés ? Oui. Les supporters de Glyph Widgets peuvent utiliser le PresetsPanel pour enregistrer et recharger l'état complet de l'éditeur — tous les blocs, paramètres et contenu — sous forme d'un préréglage nommé stocké dans IndexedDB local du navigateur.

Quelle largeur maximale dois-je utiliser ? 600px est la norme de l'industrie et fonctionne correctement sur tous les clients principaux. Utilisez 480px si vous souhaitez une mise en page plus étroite et focalisée. Utilisez 640px uniquement si vous avez confirmé que votre ESP cible et les clients le gèrent correctement — certaines anciennes versions d'Outlook appliquent leurs propres contraintes de largeur.

L'outil prend-il en charge les polices personnalisées ? Non. Les quatre familles de polices dans le menu déroulant de polices sont toutes des piles sécurisées pour le web : Arial, Georgia, Helvetica et Verdana. Les polices web ne sont pas prises en charge car la plupart des clients email — en particulier Outlook — ne chargent pas les fichiers de polices externes.

Outils associés

• Bientôt disponible: Email Extractor — Extrayez et validez les adresses email de n'importe quel texte, puis utilisez-les avec les templates que vous créez ici.
• Bientôt disponible: Social Meta Tags — Générez des balises Open Graph et Twitter Card pour optimiser l'apparence de vos pages d'atterrissage de campagne lors du partage sur les réseaux sociaux.
• Bientôt disponible: Hashtag Generator — Générez des hashtags pertinents pour les posts de réseaux sociaux qui génèrent du trafic vers vos formulaires d'inscription email.

Essayez Email Template Builder maintenant : Bientôt disponible: Email Template Builder de Glyph Widgets