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é

Dernière mise à jour: avril 25, 2019

Disponible avec :

Hub Marketing Professional, Enterprise
Basique
HubSpot CMS

Dans l'outil Gestionnaire de conception, les concepteurs peuvent créer des modèles avec HTML depuis zéro. Il est également possible de cloner une mise en page de modèle HubSpot et de la personnaliser en tant que modèle codé.

Cet article explique comment 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 à l'aise à travailler sur le code, utilisez l'un des modèles prêts à l'emploi de votre compte HubSpot ou consultez le HubSpot Marketplace de modèles pour acheter des modèles prédéfinis.

Remarque : un modèle codé personnalisé ne sera pas adaptatif par défaut. Travaillez avec un concepteur professionnel pour vous assurer que votre modèle est adaptatif pour différentes tailles d'écran.

Créer un nouveau fichier HTML et HUBL

  • Depuis votre compte HubSpot, accédez à Marketing > Fichiers et modèles > Outils de conception.
  • Créer un nouveau fichier en cliquant sur Fichier > Nouveau fichier. Il peut être nécessaire de cliquer sur l'icône de dossier folder pour développer le menu.
  • Dans la boîte de dialogue, cliquez sur HTML et HUBL.
Éditeur de code
  • Saisissez les détails de votre nouveau fichier :
    • Sélectionnez Modèle ou Modèle partiel
    • Sélectionnez le type de modèle que vous codez (page, blog ou e-mail).
    • Donnez un nom à votre fichier.
  • Cliquez sur Créer.

Ensuite, rédigez le code HTML pour votre modèle de page ou 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 signalée par un message d'erreur lorsque vous essaierez de publier des modifications. La console d'erreur située en bas de l'éditeur de code affiche les détails de l'erreur ou de l'avertissement, ainsi que des suggestions de correction de ces erreurs et avertissements.

error-console

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

Lorsque vous avez terminé, cliquez sur Publier les modifications pour publier le modèle ou le fichier HTML.

Ajouter les balises HubL obligatoires

Dès que le code HTML de la structure est écrit, vous verrez un message d'erreur s'afficher s'il manque des balises HubL obligatoires dans le code et que 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 sur les balises de modules HubL.

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

Les jetons de législation obligatoires peuvent être intégrés de deux façons :

1. En incluant un jeton qui fait appel à la section de désabonnement sur base législative : « {{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 ce à quoi « {{unsubscribe_section}} » pourrait ressembler :

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 donne la souplesse nécessaire pour ajouter du texte autour des jetons et des liens et les formater 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 en HTML vous permet d'accéder à son code HTML/HubL. C'est une excellente façon de revenir au code d'un modèle HubSpot que vous avez conçu.

Pour créer une version codée d'un modèle existant :

  • {{ local.navDesignManager }}
  • Cliquez sur Actions > Cloner en HTML dans l'outil de recherche. Le fichier HTML s'ouvre dans un nouvel onglet du gestionnaire de conception. Son nom correspond au nom du modèle original avec l'ajout du terme copy.
Capture d'écran d'un article de l'Aide HubSpot