Passer au contenu principal

Produits pris en charge

Dans cet article, découvrez comment sont codés les modèles d’e-mails standard de HubSpot. Lorsque vous créez des modèles d’e-mails personnalisés, n’oubliez pas que les clients d’e-mail ne prennent en charge que certaines fonctions HTML et CSS. C’est pourquoi le codage de modèles d’e-mails dont le rendu est cohérent d’un client à l’autre requiert une bonne dose d’expérience et de patience. Consultez la base de connaissances de HubSpot pour savoir comment créer des mises en page de modèles dans l’application ou comment enregistrer un e-mail existant en tant que modèle.

​
Variables de modèle d’e-mail obligatoires

Afin d’envoyer des e-mails avec HubSpot, vos modèles doivent inclure certaines informations. Consultez les variables HubL d’e-mail obligatoires. Lorsque vous travaillez avec des modèles codés, vous souhaiterez également utiliser des modules pour vous assurer que le contenu de chaque e-mail peut être facilement modifié.

​
hs-inline-css et data-hse-inline-css

L’une des difficultés du codage de modèles d’e-mails, quel que soit le client, est le manque de prise en charge des CSS dans un élément <style> de <head>. Pour faciliter le codage des modèles d’e-mails, les modèles d’e-mails codés de HubSpot prennent en charge une balise de style spéciale qui permet aux designers de rédiger des CSS qui seront compilées et converties en CSS intraligne, puis ajoutées aux éléments ciblés. Tout code ajouté à une balise de style avec l’ID de hs-inline-css, sera ajouté aux balises ciblées. Par exemple, Microsoft Outlook applique une famille de polices par défaut à tout le texte contenu dans les balises <td>, sauf si vous spécifiiez une famille de polices en ligne pour cette colonne de tableau. L’exemple ci-dessous utilise une balise de style hs-inline-css pour ajouter une famille de polices à toutes les colonnes du tableau dans le modèle. Veuillez noter que les requêtes média doivent être incluses dans un élément <style> distinct, car elles ne peuvent pas être mises en ligne. Remarque : l’attribut data-hse-inline-css d’une balise <style> dans la section Modifier > Modifier l’en-tête des modèles en glisser-déposer remplace hs-inline-css pour atteindre le même objectif. Dans des fichiers codés, l’une ou l’autre de ces méthodes peut être utilisée (tant qu’il n’y a qu’un seul élément style#hs-inline-css par modèle). Vous pouvez avoir plusieurs éléments style[data-hs-inline-css="true"].

​
Modèle d’e-mail adaptable

La mise en page par défaut du modèle d’e-mail de HubSpot utilise le balisage ci-dessous. Ces mises en page adaptatives comprennent des requêtes média qui rendent les images et les tableaux adaptatifs. Les mises en page adaptables utilisent des variables de couleur et de police associées à Paramètres > Marketing > E-mail.
Lorsque vous travaillez avec la mise en page adaptative de HubSpot, tout élément <td> dont la classe comprend le texte « colonne » sera rendu adaptatif.

​
Modèle d’e-mail statique

Les modèles statiques de HubSpot utilisent un balisage différent et n’incluent pas les requêtes média qui rendent l’e-mail adaptatif. Les mises en page statiques utilisent également des variables de couleur et de police associées à Paramètres > Marketing > E-mail.

​
Partir de zéro

Lorsque vous créez un e-mail .html à partir de zéro dans le gestionnaire de conception, HubSpot génère automatiquement le balisage ci-dessous.
Dernière modification le 10 février 2026