Ignorer et passer au contenu principal
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.
Design Manager

Créer un modèle codé personnalisé

Dernière mise à jour: septembre 22, 2021

Disponible avec :

Marketing Hub Pro, Entreprise
CMS Hub Starter, Pro, Entreprise
Ancienne version Marketing Hub Basique

Les concepteurs peuvent créer des modèles de site web, de page de destination et de blog à partir de zéro via HTML.  Les comptes Marketing Hub Pro et Entreprise permettent également de créer des modèles d'e-mails avec un code personnalisé. 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 créer et résoudre des modèles codés personnalisés ainsi que le HubL exigé dans vos modèles. Si vous n'êtes pas à l'aise pour travailler sur le code, utilisez l'un des modèles prêts à l'emploi de votre compte HubSpot ou consultez le Marketplace de modèles pour acheter des modèles prédéfinis.

Remarque : Un modèle codé personnalisé n'est 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.
  • Dans la barre latérale de gauche, créez 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 le menu déroulant Que souhaiteriez-vous créer aujourd'hui ? et sélectionnez HTML et HUBL.
design-manager-html-hubl
  • Cliquez sur Suivant.
  • Saisissez les détails de votre nouveau fichier :
    • Sélectionnez Modèle ou Modèle partiel. Un modèle partiel est un modèle qui peut être utilisé dans d'autres modèles. 
    • Dans le menu déroulant, sélectionnez le type de modèle que vous codez (page, blog ou e-mail).
    • Donnez un nom à votre fichier.
    • Pour mettre à jour l'emplacement du fichier, dans la section Emplacement du fichier, cliquez sur Modifier et sélectionnez le dossier auquel ajouter le fichier.
  • Cliquez sur Créer.
  • Rédigez le code HTML pour votre modèle de page ou d'e-mail.
  • Pour afficher la façon dont votre HubL apparaîtra, cliquez sur le bouton Afficher le résultat. Un panneau s'ouvrira à droite avec l'aperçu du rendu.


    design-manager-show-output
  • Dans l'angle supérieur droit, cliquez sur Aperçu pour prévisualiser l'affichage et le fonctionnement de votre modèle dans l'éditeur de contenu. Cet aperçu est synchronisé dans l'éditeur et se réactualisera automatiquement.
  • Dans l'angle supérieur droit, cliquez sur Publier les modifications.
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.

Ajouter les balises HubL obligatoires

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 modèles de site web, de page de destination et de blog nécessitent les balises suivantes :

  • {{standard_footer_includes}}
  • {{standard_header_includes}}
Les modèles d'e-mails nécessitent que les balises suivantes soient conformes à la législation CAN-SPAM. Ils peuvent être ajoutés de deux façons :
  • En incluant ce jeton qui fait appel à la section de désabonnement sur base juridique : « {{unsubscribe_section}} ». Ensuite, ajoutez ces jetons individuellement : 
    • {{site_settings.company_street_address_1}}
    • {{site_settings.company_city}}
    • {{site_settings.company_state}}
    • {{site_settings.company_zip}}
    • Avec cette méthode, vous ne pouvez pas formater la langue ni le style du texte et des liens.

  • Utilisez ces jetons individuellement :
    • {{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

Outre la création d'un modèle à partir de zéro, vous pouvez cloner l'un des modèles de HubSpot en HTML. Le clonage d'un modèle en HTML vous permet d'accéder au contenu HTML d'un modèle. 

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

  • Depuis votre compte HubSpot, accédez à Marketing > Fichiers et modèles > Outils de conception.
  • Cliquez sur Actions > Cloner en HTML dans l'outil de recherche. Le fichier HTML sera créé dans le même dossier que le fichier d'origine. Son nom correspond au nom du modèle original avec l'ajout du terme copy.
design-manager-clone-to-html