Avertissement : cet article est le résultat de la traduction automatique, l'exactitude et la fidélité de la traduction ne sont donc pas garanties. Pour consulter la version originale de cet article, en anglais, cliquez ici.
CMS-General

Créer un modèle codé personnalisé dans HubSpot

Dernière mise à jour: November 21, 2018

Disponible avec :

Marketing Hub
marketing-basic-pro-enterprise
Professional, Enterprise
Basique
HubSpot CMS

Alors que votre créateur de modèle offre une plus grande flexibilité en termes de structure du contenu et évite aux créateurs d'écrire du HTML, le gestionnaire de conception permet également aux designers de concevoir des modèles avec HTML à partir de zéro.  

Cet article explique où coder des modèles personnalisés dans HubSpot et identifie les variables à inclure dans les modèles d'e-mails personnalisés. Si vous n'êtes pas en mesure de coder des modèles à partir de zéro, utilisez l'un des modèles prêts à l'emploi dans votre compte HubSpot ou consultez le HubSpot Marketplace de modèles pour acheter des modèles prédéfinis.

Remarque : le codage HTML des sites ou des e-mails à partir de zéro ne garantit pas automatiquement que votre modèle sera adaptatif

Créer un nouveau fichier HTML et HUBL

{{ local.navDesignManager }}

Créez un nouveau fichier en cliquant sur Actions > Nouveau fichier (il peut être nécessaire de cliquer sur l'icône du dossier pour étendre la recherche).

Dans la boîte de dialogue, cliquez sur HTML et HUBL.

Éditeur de code

Saisissez les détails de votre nouveau fichier :

  • Que concevez-vous ? Sélectionnez Modèle ou Modèle partiel
  • Type de modèle : Sélectionnez le type de modèle que vous codez (page, blog ou e-mail).
  • Nom du fichier : Donnez un nom à votre fichier.
  • Cliquez sur Créer.

Ensuite, rédigez le code HTML pour la page ou le modèle d'e-mail. L'éditeur de code HubSpot effectue des retraits automatiques, souligne la syntaxe HTML et ferme vos balises pour vous. Toute erreur dans votre code sera marquée par un message d'erreur lorsque vous essayez de publier des modifications. La console d'erreur située en bas de l'éditeur de code affiche l'erreur ou les détails de l'avertissement ainsi que des suggestions de correction de ces erreurs et avertissements.

console-erreur

Pour obtenir des ressources supplémentaires sur la conception personnalisée, vous pouvez consulter la documentation des designers de HubSpot. Il existe une documentation supplémentaire sur les options des modules codés, telles que des balises de filtre et des icônes.

Lorsque vous avez terminé, cliquez sur Publier les modifications de publication du modèle ou du fichier HTML.

Ajouter les balises HUBL obligatoires

Dès que le code HTML de la structure est écrit, un message d'erreur indiquera que les balises HUBL obligatoires sont pas présentes dans le code si vous tentez de publier le fichier. Les balises HUBL connectent le code aux paramètres et à l'éditeur de contenu de HubSpot. Découvrez-en davantage sur les variables des modèles obligatoires et les balises de modules HUBL.

Pour les modèles d'e-mails, insérez les jetons de messagerie et CAN-SPAM requis. Consulter la documentation HUBL pour en savoir plus sur les jetons CAN-SPAM.

Les jetons CAN-SPAM obligatoires peuvent être intégrés de deux façons :

1. En incluant un jeton qui fait appel à la section CAN-SPAM de désabonnement : « {{unsubscribe_section}} ». Lorsque ce jeton est utilisé, vous ne pouvez pas formater la langue ni le style du texte et des liens. Voici un exemple de la mention « {{unsubscribe_section}} » :

Vous devez ensuite ajouter individuellement les jetons suivants :

{{site_settings.company_street_address_1}}
{{site_settings.company_city}}
{{site_settings.company_state}}
{{site_settings.company_zip}}

2. En incluant le lien de désabonnement individuel obligatoire et les jetons d'adresse :
{{site_settings.company_name}}
{{unsubscribe_link}}ou {{unsubscribe_link_all}} (au moins un)
{{unsubscribe_anchor}}
{{site_settings.company_name}}
{{site_settings.company_street_address_1}}
{{site_settings.company_city}}
{{site_settings.company_state}}
{{site_settings.company_zip}}

L'utilisation individuelle des jetons permet d'ajouter de la flexibilité à l'ajout de libellés concernant les jetons et les liens et de leur format dans le style et la langue souhaités.

Cloner en HTML

Au lieu de coder un fichier de toutes pièces, vous pouvez aussi cloner l'un des modèles de HubSpot. Cloner un modèle vous permet d'accéder à son code HTML/HUBL. C'est une méthode idéale pour revenir à un modèle HubSpot que vous avez conçu.

Pour créer une version codée d'un modèle existant, cliquez sur Actions > Cloner en HTML dans l'éditeur de mise en page. Le fichier HTML s'ouvre dans un nouvel onglet du gestionnaire de conception. Son nom correspond au nom du modèle original avec une copie jointe.

Capture d'écran d'un article d'aide HubSpot