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 fonctionnalité, assurez-vous de bien comprendre les étapes à suivre à l'avance, ainsi que les limites de la fonctionnalité et les conséquences potentielles de son utilisation.

Compréhension des 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.

Compréhension des limites et des 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 en 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. Découvrez-en davantage sur l’ajout de variables HubL obligatoires pour les e-mails, les sites web et les pages de destination. 

Créer un nouveau fichier HTML + HubL

1. Dans votre compte HubSpot, accédez à Contenu > Gestionnaire de conception.
2. En haut de l’outil de recherche, cliquez sur le menu déroulant Fichier et sélectionnez Nouveau fichier.

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

4. Dans le champ Que construisez-vous ? , sélectionnez une option :
   • 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. 
5. 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). En savoir plus sur les types de modèles.
6. Saisissez un nom de fichier dans le champ Nom du fichier .
7. Pour mettre à jour l'emplacement du fichier, cliquez sur Modifier dans la section Emplacement du fichier et sélectionnez un dossier.
8. Lorsque vous avez terminé, cliquez sur Créer.

Ajouter HTML + HubL à votre modèle

Après avoir configuré votre nouveau fichier, vous serez redirigé vers l’éditeur de code pour ajouter votre code personnalisé et prévisualiser son apparence sur une page en ligne.

Ajouter HTML + HubL

1. Saisissez le code HTML pour le modèle. Découvrez-en davantage sur l’ajout de fichiers CSS et JavaScript aux modèles codés personnalisés. 
2. Pour afficher le rendu HTML + HubL, activez l’option Afficher le résultat en haut à gauche. Un panneau s'ouvrira à droite avec l'aperçu du rendu.

Ajouter HTML + HubL requis

Les modèles codés personnalisés nécessitent des variables HTML ou HubL spécifiques pour fonctionner. Si l’une de ces variables obligatoires est manquante, un message d’erreur peut apparaître lorsque vous essayez de publier le modèle. 

• Les modèles de page et de blog nécessitent les variables suivantes :

<!-- Enter above the closing </header> tag -->
{{ standard_header_includes }}

<!-- Enter above the closing </body> tag -->
{{ standard_footer_includes }}

• Les modèles d’e-mails nécessitent que les variables suivantes soient conformes à la législation CAN-SPAM :

<!-- Enter variables above the closing </body> tag -->
{{ site_settings.company_name }}
{{ site_settings.company_street_address_1 }}
{{ site_settings.company_city }}
{{ site_settings.company_state }}
{{ site_settings.company_zip }}
{{ site_settings.company_country }}

<!-- Choose one unsubscribe variable -->
{{ unsubscribe_link }}
{{ unsubscribe_link_all }}

• Les modèles d’e-mails nécessitent le code suivant pour afficher le texte d’aperçu dans certains clients de messagerie :

<!-- Preview text (text which appears right after subject in certain email clients) -->

<div id="preview_text" style="display:none!important">{% text "preview_text" label="Preview Text <span class=help-text>This will be used as the preview text that displays in some email clients</span>", value="", no_wrapper=True %}
</div>

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.

1. Dans votre compte HubSpot, accédez à Contenu > Gestionnaire de conception.
2. Dans l’outil de recherche, cliquez sur le nom du modèle que vous souhaitez cloner.
3. 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 en ligne, puis le publier.

1. Dans votre compte HubSpot, accédez à Contenu > Gestionnaire de conception.
2. Dans l’outil de recherche, cliquez sur le nom du modèle que vous souhaitez prévisualiser ou publier.
3. Dans l’angle supérieur droit, cliquez sur le menu déroulant Aperçu et sélectionnez une option :
   • 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.
4. Lorsque vous avez terminé, cliquez sur Publier les modifications.
5. 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 à l’angle inférieur gauche de l’éditeur de code et cliquer sur Afficher les détails.