Balisage des modèles d'e-mails
L'article suivant porte sur la façon dont les modèles d'e-mails standard de HubSpot sont codés. Les clients de messagerie ne prennent en charge que certaines fonctionnalités 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. Pour vous faciliter la vie, les modèles d'e-mails HubSpot peuvent être créés sous forme de modèles conviviaux en glisser-déposer ou de fichiers codés.
Les modèles d'e-mails en glisser-déposer peuvent être adaptatifs ou statiques. Un modèle adaptatif s'adapte à la taille de l'écran, tandis qu'un modèle statique reste tel quel.
Les modèles sont adaptatifs par défaut, mais vous pouvez les convertir en modèles statiques en cliquant sur Modèle d'e-mail adaptatif dans le panneau de l'inspecteur et en choisissant Modèle d'e-mail statique.
Les designers ont accès à la personnalisation de certaines couleurs et polices par défaut (Paramètres > Marketing > E-mail) et à l'ajout de CSS en ligne aux modules (Icône d'engrenage du module > Modifier le CSS) dans les modèles de type glisser-déposer dans le gestionnaire de conception.
Vous pouvez toujours accéder au balisage d'une mise en page de modèle en le clonant en HTML (Actions > Cloner en HTML). Les modèles codés vous permettent de personnaliser complètement le balisage de l'e-mail, à condition d'inclure les variables ci-dessous.
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é.
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> dans <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 en ligne, puis ajoutées aux éléments ciblés. Tout code ajouté à une balise de style avec l'ID 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"].
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 adaptatives 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.
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.
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.
Merci d'avoir partagé votre avis.
Ce formulaire est destiné à recueillir les avis sur la documentation pour les développeurs. Si vous souhaitez faire part de votre avis sur les produits HubSpot, veuillez le partager sur le forum des idéesde la communauté.