Vue d'ensemble des modèles
Les modèles définissent la mise en page de vos pages, e-mails et thèmes HubSpot. Un modèle se compose de modules et de partials, et peut faire référence à d'autres ressources telles que des feuilles de style et des fichiers JavaScript. Les modèles peuvent être créés soit à l'aide de HubSpot CLI, soit dans le Gestionnaire de conception de HubSpot. Pour les créateurs de contenu, le modèle est la première chose qu'ils sélectionneront, à la création d'une page ou d'un e-mail.
Découvrez ci-dessous comment créer un modèle, les différents types de modèles et ce qui est inclus dans vos modèles.
Vous pouvez créer un modèle soit dans HubSpot, soit en utilisant le CLI.
- Pour créer un modèle à l'aide du CLI, exécutez la commande suivante :
| Parameter | Description |
|---|---|
name
| Le nom du modèle |
dest
| Le chemin du répertoire local dans lequel vous voulez créer le modèle. S'il n'est pas inclus, le modèle sera créé dans le répertoire dans lequel vous vous trouvez actuellement. |
- À l'aide des touches flèches, accédez au type de modèle que vous souhaitez créer, puis appuyez sur la touche Entrée.
Le modèle sera alors créé localement. Lorsque vous souhaitez rendre le modèle disponible pour une utilisation dans votre compte HubSpot, charger le modèle sur votre compte. Vous pouvez également utiliser la commande consulter pour télécharger automatiquement tous les nouveaux fichiers et les modifications apportées aux fichiers existants dans le répertoire de travail actuel et les répertoires enfants.
Après avoir mis à jour un modèle, vous pouvez le prévisualiser pour vous assurer qu'il s'affiche et agit comme vous l'attendez. Il existe plusieurs façons dans HubSpot de prévisualiser un modèle :
- Prévisualisation d'un modèle dans le gestionnaire de conception : idéal pour les vérifications visuelles rapides ou lorsque vous devez prévisualiser un article de blog/une liste/un modèle combiné.
- Création d'une nouvelle ressource à partir d'un modèle : idéal pour tester l'éditeur en glisser-déposer et l'expérience de création de contenu.
Aperçu avec le gestionnaire de conception
Prévisualiser des modèles à l'aide du gestionnaire de conception peut être particulièrement utile pour des vérifications visuelles rapides. L'aperçu du modèle vous permet également de configurer des options d'affichage, telles que les dimensions de viewport.
Pour prévisualiser un modèle dans le gestionnaire de conception :
- Dans votre compte HubSpot, accédez à Marketing > Fichiers et modèles > Outils de conception.
- À l'aide de l'explorateur de fichiers de la barre latérale de gauche, cliquez sur le modèle que vous souhaitez prévisualiser.
- Dans l'angle supérieur droit, cliquez sur Aperçu.
- Sélectionnez Aperçu en ligne avec options d'affichage pour afficher un aperçu du modèle avec des options pour tester la réactivité et les paramètres de domaine tels que les feuilles de style. Cette option affiche la page dans un iFrame. Cela vous permet également de choisir entre les blogs et l'article de blog ou la vue de liste pour les modèles de blog.
- Sélectionnez Aperçu sans options d'affichage pour prévisualiser le modèle sans options supplémentaires.
Aperçu avec une nouvelle page
Pour modifier les zones de glisser-déposer, les valeurs des paramètres par défaut des modules ou d'autres changements importants, il est préférable de créer une page de site web, un blog, un article de blog ou un e-mail en utilisant le modèle. Vous pouvez ensuite essayer différentes valeurs de champ de module et tester ce à quoi ressemblera votre modèle une fois en ligne et l'optimiser pour offrir la meilleure expérience au créateur de contenu. Vous pouvez publier ces ressources ou les laisser en mode brouillon à des fins de test.
En outre, vous pouvez utiliser la préparation de contenu ou un compte sandbox de développeur pour créer et afficher des ressources sans avoir d'impact sur un compte de production.
Les modèles peuvent être utilisés pour différents types de contenu, tels que des pages de site web et des articles de blog. Dans les modèles codés, vous désignez le type de modèle en ajoutant une annotation en haut du fichier.
Découvrez ci-dessous les différents types de modèles et les annotations que vous pouvez utiliser pour désigner chaque type.
Remarque : Un créateur de contenu peut échanger le modèle d'une page contre un autre modèle du même type, selon qu'il possède ou non des balises dnd_area.
- Les modèles construits avec l'éditeur visuel de mise en page par glisser-déposer peuvent être remplacés par d'autres modèles par glisser-déposer ou par des modèles codés avec ou sans les balises
dnd_area - Les modèles codés avec des balises dnd_area ne peuvent être échangés que contre d'autres modèles codés avec des balises
dnd_area. - Les modèles codés sans balises
dnd_areane peuvent être échangés que contre d'autres modèles codés sans balisesdnd_area.
Les modèles de page correspondent au type de modèle le plus ouvert. Ils peuvent servir de page web ou de page de destination, quelle qu'en soit la forme. Les mises en page ne sont pas pré-remplies avec des composants. Les modèles de page codés sont préremplis avec un balisage sommaire comprenant des balises HubL suggérées pour les méta-informations, le titre, notamment les en-têtes et pieds de page obligatoires. Les exemples de pages qui utilisent généralement un modèle de page incluent, mais ne sont pas limités à :
Les modèles d'e-mails sont utilisés par l'outil e-mail. Ils sont soumis aux exigences les plus strictes, car ils doivent être affichés dans de nombreux clients de messagerie différents et se conformer aux meilleures pratiques pour garantir une bonne délivrabilité. Les modèles d'e-mails HTML et HubL et ceux du gestionnaire de conception par glisser-déposer sont préremplis de composants de base lors de leur création. Les modèles avec ce templateType sont uniquement visibles pour la sélection de modèles lors de la création d'un e-mail.
Afin de rester conformes à la norme CAN-SPAM, les modèles d'e-mails comportent un ensemble de variables obligatoires qui doivent être incluses.
Les modèles d'e-mail disposent également d'une fonctionnalité intégrée permettant d'ajouter inline-css aux éléments <style> avec un nom de classe ou un attribut de données spécial. L'insertion de CSS dans les e-mails est une méthode utilisée pour obtenir une meilleure prise en charge dans les clients de messagerie. Heureusement, la plupart des clients de messagerie connus prennent désormais en charge la css intégrée, qui n'est toutefois pas représentatif de vos destinataires spécifiques. Faites preuve de discernement et faites ce qui est juste pour vos destinataires.
Les partials sont des fichiers de modèle qui peuvent être inclus dans d'autres fichiers codés. Contrairement aux partials globaux, les partials peuvent être modifiés individuellement sans impact sur les autres instances du partial.
Découvrez-en davantage sur les partials.
Découvrez-en davantage sur les partials globaux et le contenu global.
Lors de la création d'un blog, les modèles de blog ont une structure similaire à celle des modèles de page standards. La différence essentielle est qu'ils peuvent être sélectionnés dans les paramètres de contenu comme modèles de blog, alors que les modèles de page ne le peuvent pas. Les modèles créés avec blog_listing, blog_post ou blog, templateType n'apparaissent pas lorsqu'un utilisateur crée une page web, dans l'écran de sélection des modèles. Les modèles de blog ont en fait deux formes, les pages de listing de blog et les pages de détail des articles de blog.
Le modèle de listing de blogs est le modèle que les utilisateurs verront lorsqu'ils accèderont à l'URL du blog. Ce modèle est généralement utilisé pour répertorier les résumés, les titres et les images en vignette de tous les articles du blog. Il affiche également une pagination pour accéder aux articles les plus anciens.
Le modèle d'article de blog est le modèle que les utilisateurs verront lorsqu'ils consulteront un article individuel dans le blog. Ces modèles affichent généralement le contenu complet de l'article.
Un seul modèle de blog peut gérer la mise en page des pages de listing et pages de détails, mais le plus souvent, ces dernières sont séparées dans des modèles distincts. Les modèles combinés apparaîtront dans les paramètres du blog comme pouvant être sélectionnés à la fois pour les options de listing et d'article de blog. Si vous créez un modèle destiné à être utilisé uniquement pour des articles ou des listings, vous devez utiliser blog_post ou blog_listing.
Pour simplifier le développement et l'expérience de création de contenu, il est recommandé d'utiliser les templateTypes distincts blog_post et blog_listing plutôt que des modèles combinés.
Les modèles de pages du système sont marqués en interne pour leur objectif spécifique. Dans les paramètres de contenu de votre compte, vous pouvez sélectionner ces modèles pour leur usage spécifique dans l'onglet de système.
Les pages d'erreur peuvent être définies dans les paramètres de contenu comme des pages 404 ou 500. Les deux modèles utilisent le même templateType. Les modèles créés avec ce templateType n'apparaissent pas sur l'écran de sélection des modèles lorsqu'un utilisateur crée une page web.
La page de gestion des inscriptions par e-mail Répertorie tous les types d'abonnement disponibles auxquels un utilisateur peut s'inscrire ou se désinscrire. Requis pour contenir la balise HubL {% email_subscriptions "email_subscriptions" %}. Voir le modèle des pages de gestion des inscriptions dans le cms-theme-boilerplate.
Un modèle de système pour les pages de désabonnement aux e-mails. Requis pour contenir la balise HubL {% email_simple_subscription "email_simple_subscription" %}. Voir le modèle de désabonnement alternatif des emails dans le cms-theme-boilerplate.
Un modèle de système pour les pages de confirmation de désabonnement aux e-mails C'est là que les utilisateurs sont envoyés lorsqu'ils se rendent à l'URL générée par la variable {{ unsubscribe_link_all }}. Voir le modèle de confirmation d'abonnement dans le cms-theme-boilerplate.
Les modèles d'invite de mot de passe fournissent une page de marque que les créateurs de contenu peuvent afficher pour demander un mot de passe avant qu'un visiteur puisse voir le contenu réel de la page. Les modèles d'invite de mot de passe sont définis via les paramètres de contenu. Comment rendre une page sur HubSpot protégée par un mot de passe. Voir l'invite de la page protégée par mot de passe dans le boilerplate.
Un modèle de système pour la fonctionnalité de listing de recherche de site intégrée au CMS. Voir le modèle de page de résultats de recherche dans le boilerplate.
Les comptes HubSpot disposant de la fonctionnalité d'adhésion (CMS Hub Entreprise uniquement) peuvent créer des pages sur leurs sites auxquelles seuls les utilisateurs appartenant à des listes spécifiques dans le CRM peuvent accéder. Cela permet aux visiteurs du site d'avoir des comptes avec des identifiants de connexion. Ces modèles vous permettent de contrôler l'apparence de ces pages.
Seuls les modèles HTML et HubL peuvent être des modèles de contrôle d'accès.
Il s'agit de la page de connexion qui s'affiche lorsqu'un utilisateur tente d'accéder à un contenu dont l'accès est contrôlé par la fonctionnalité d'adhésion. Contient généralement le module {% member_login "member_login" %}. Voir l'exemple de modèle de connexion des membres dans le boilerplate.
Il s'agit de la page d'enregistrement des utilisateurs qui permet aux utilisateurs de créer un compte pour voir le contenu auquel les utilisateurs de cette liste peuvent accéder. Contient généralement la balise HubL {% member_register "member_register" %}. Voir l'exemple de modèle d'inscription des membres dans le boilerplate.
Il s'agit de la page de réinitialisation du mot de passe. Les utilisateurs indiquent leur nouveau mot de passe sur cette page. Contient généralement la balise HubL {% password_reset "password_reset" %}. Voir l'exemple de modèle de réinitialisation du mot de passe de membre dans le boilerplate.
Il s'agit de la page de demande de réinitialisation du mot de passe. Affichage d'un formulaire pour demander un e-mail de réinitialisation du mot de passe. Contient généralement la balise HubL {% password_reset_request "password_reset_request" %}. Voir l'exemple de modèle de demande de réinitialisation du mot de passe de membre dans le boilerplate.
Il y a certains fichiers JavaScript et CSS qui sont attachés aux modèles CMS. Certains fichiers sont automatiquement inclus et ne peuvent être supprimés, tandis que d'autres peuvent être inclus de manière facultative. Pour en savoir plus sur l'ordre dans lequel les feuilles de style sont attachées au contenu du CMS, consultez cet article.
jQuery est inclus de manière facultative dans la balise d'en-tête des modèles HubSpot. S'il est inclus, il est rendu comme faisant partie de la variable HubL standard_header_includes.
Dans Paramètres > Site web > Pages, vous pouvez changer la version de jQuery pour 1.11.x, ou la version 1.7.1 ou la désactiver complètement. Vous pouvez également choisir d'inclure un script jQuery Migrate pour assurer la rétrocompatibilité avec les anciens navigateurs. Vous pouvez déplacer jQuery vers le pied de page pour améliorer les performances de la page, mais cela peut corrompre JavaScript si vous vous en servez. Il est recommandé de tester cela avant le déplacement en ajoutant ?hsMoveJQueryToFooter =True à la fin des URL des pages de votre site web.
Alors que jQuery était historiquement inclus par défaut, CMS Hub ne nécessite actuellement pas jQuery. La plupart des fonctionnalités de jQuery ont maintenant des équivalents Vanilla JavaScript modernes, et il est recommandé de les utiliser à la place. Si vous devez utiliser jQuery, nous vous encourageons à désactiver la version par défaut dans les paramètres et à utiliser la dernière version chargée au-dessus de la balise </body>.
Pour vérifier si la suppression de jQuery sur votre site aura des conséquences, ajoutez ?hsNoJQuery=true à la fin de l'URL lorsque vous consultez votre site, en particulier les pages très interactives.
Anciennement connu sous le nom required_base.css, ce fichier détermine le style de la grille réactive de HubSpot. Ce fichier est automatiquement inclus dans tout modèle de glisser-déposer, mais n'est pas inclus par défaut dans les modèles codés personnalisés. Si vous utilisez les balises dnd_area dans les modèles HTML et HubL codés, il n'est pas nécessaire de charger le fichier layout.css, mais une version de celui-ci est incluse dans le boilerplate du thème CMS pour faciliter une mise en route rapide.
En plus de la grille CSS adaptative, le fichier comprend des classes qui peuvent être utilisées pour afficher et masquer des éléments dans différentes fenêtres d'affichage. Pour en savoir plus, consultez le fichier directement.
Le code de suivi HubSpot est ajouté automatiquement à tout modèle HubSpot, à l'exception des modèles d'email, avec la variable HubL standard_footer_includes. Le code de suivi charge un fichier JavaScript analytique nommé your_HubID.js (exemple : 158015.js). Ce code de suivi est directement intégré à la fonctionnalité RGPD de HubSpot.
Merci d'avoir partagé votre avis.