Créer un modèle codé personnalisé

Les développeurs peuvent créer des modèles de blog, de page de site web, de page de destination et d’e-mail à partir de zéro en utilisant HTML + HubL. 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é.

Découvrez-en davantage sur la conception de ressources personnalisées dans la documentation des développeurs. 

Avant de commencer

Avant de commencer à utiliser cette fonction, assurez-vous de bien comprendre les mesures à prendre à l'avance ainsi que les limites de la fonction et les conséquences potentielles de son utilisation.

Comprendre les exigences

• Vérifiez que vous disposez des autorisations Outils de conception pour créer et modifier des modèles dans le gestionnaire de conception.
• Il est également recommandé de disposer  des autorisationsParamètres du contenu global et du thème et Paramètres du site web si vous devez modifier les ressources web globales et les paramètres de blog/site web.

Comprendre les limites et les considérations

• Un abonnement Marketing Hub Pro ou Entreprise est requis pour créer des modèles d’e-mails.  Les comptes Content Hub peuvent créer des e-mails à l’aide de l’éditeur d’e-mails glisser-déposer.
• Les modèles codés personnalisés peuvent utiliser de nombreuses variables prédéfinies. Certaines de ces variables sont obligatoires pour créer des e-mails et des pages, tandis que d’autres sont facultatives. Consultez cet article pour en savoir plus sur l’ajout de variables HubL d’e-mail, de site web et de page de destination obligatoires. 

Créer un nouveau fichier HTML + HubL

• Dans votre compte HubSpot, accédez à Contenu > Gestionnaire de conception.
• En haut de la colonne de gauche, cliquez sur le  menuFichier et sélectionnez Nouveau fichier.

• Dans la boîte de dialogue Nouveau fichier , cliquez sur le menu déroulant Que souhaiteriez-vous créer aujourd’hui ? et sélectionnez HTML + HubL, puis cliquez sur Suivant. 

• Dans la boîte de dialogue Configurez votre nouveau modèle HTML + HUBL , saisissez les détails de votre nouveau fichier :
  • Sélectionnez l’une des options Que construisez-vous ? :
    • Modèle : définit la mise en page et la structure du contenu qui sera affiché sur les pages de site web, les pages de destination, les articles de blog ou les e-mails. 
    • Modèle partiel : code réutilisable ou un bloc de texte prédéfini pouvant être inclus dans plusieurs autres modèles. 
  • Cliquez sur le menu déroulant Type de modèle et sélectionnez un type pour le modèle codé personnalisé (page, article de blog/listing, e-mail ou page système). Découvrez-en davantage sur les types de modèles.
  • Dans le champ Nom de fichier , saisissez un nom de fichier.
  • Pour mettre à jour l’emplacement du fichier, cliquez sur Modifier dans la section Emplacement du fichier et sélectionnez un dossier.
• Cliquez sur Créer.

Ajouter HTML + HubL à votre modèle

Une fois votre nouveau fichier configuré, vous serez dirigé vers l’éditeur de code pour ajouter votre code personnalisé et prévisualiser son affichage sur une page en ligne.

Ajouter HTML + HubL

• Saisissez le code HTML pour votre modèle. Découvrez-en davantage sur l’ajout de fichiers CSS et JavaScript à votre modèle codé personnalisé. 
• 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.

Ajouter le HubL requis

Les modèles codés personnalisés nécessitent des variables HubL spécifiques pour fonctionner. Si l'une de ces variables est manquante, un message d'erreur apparaîtra lorsque vous tenterez de publier le modèle. 

• Les modèles de page et de blog nécessitent les variables suivantes :
  • {{standard_footer_includes}}
  • {{standard_header_includes}}
• Les modèles d’e-mails nécessitent que les variables suivantes soient conformes à la législation CAN-SPAM. 
  • {{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}}

Cloner un modèle en HTML

Outre la création de modèles à partir de zéro, vous pouvez cloner en HTML des modèles de glisser-déposer pour blogs, pages de site web et pages de destination.

• Pour créer une version codée d'un modèle existant :
  • Dans votre compte HubSpot, accédez à Contenu > Gestionnaire de conception.

• • Dans la barre latérale gauche, ouvrez le modèle que vous souhaitez cloner.
  • Cliquez sur le menu déroulant Actions et sélectionnez Cloner en HTML. Le fichier HTML sera créé dans le même dossier que le fichier d'origine.

Prévisualiser et publier votre modèle

Une fois votre modèle créé, vous pouvez prévisualiser son affichage sur une page, puis le publier.

• Dans l’angle supérieur droit, cliquez sur Aperçu.
• Si vous sélectionnez Aperçu en ligne avec options d’affichage, vous pouvez prévisualiser votre modèle tel qu’il apparaît sur d’autres appareils en sélectionnant le paramètre prédéfini Viewport.
• Si vous sélectionnez Aperçu sans options d’affichage, vous pouvez uniquement prévisualiser l’apparence de votre modèle sur les navigateurs.
• Lorsque vous avez terminé vos modifications, cliquez sur Publier les modifications dans l’angle supérieur droit.

• En cas d'erreur de code, un message d'erreur apparaît. Vérifiez plus d’informations sur ces erreurs dans la console d’erreur sous l’éditeur de code :
  • Dans le message d’erreur en haut de la page, cliquez sur Console d’erreur pour ouvrir la console située sous l’éditeur de code. 
  • Vous pouvez également accéder au bas de l’éditeur de code et cliquer sur Afficher les détails.