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: janvier 27, 2022

Disponible avec :

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

Les développeurs peuvent créer des modèles de blog, de page web, de page de renvoi et d'e-mail à partir de zéro en utilisant le langage HTML. Vous pouvez également cloner une mise en page de modèle par glisser-déposer en HTML, puis la personnaliser comme un modèle codé.

Les types de contenu qui peuvent utiliser les modèles codés personnalisés dépendent de vos abonnements Marketing Hub et CMS Hub : 

 

Aucun abonnement Marketing Hub

OU

Marketing Hub Starter

Marketing Hub Pro/Entreprise

OU

Anciens comptes Marketing Hub Basique

 

Aucun abonnement CMS Hub

Modèles codés personnalisés non disponibles

Modèles codés personnalisés disponibles pour les blogs, les pages de renvoi et les e-mails

 

CMS Hub Starter

Modèles codés personnalisés disponibles pour les blogs et les pages de site web

Modèles codés personnalisés disponibles pour les blogs, les pages de renvoi, les pages de site web et les e-mails

 

CMS Hub Pro/Entreprise

Modèles codés personnalisés disponibles pour les blogs, les pages de renvoi et les pages de site web

Modèles codés personnalisés disponibles pour les blogs, les pages de renvoi, les pages de site web et les e-mails

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