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 courriel.

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 :

• À 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.

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.

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.

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.

En savoir plus sur la création de modèles d'e-mails.

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 à :

• Page d'accueil
• À propos de nous
• Contact

Les modèles de pages du système sont marqués en interne pour leur objectif spécifique. Dans les paramètres de contenu, vous pouvez sélectionner ces modèles pour leur usage spécifique dans l'onglet 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. Doit 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. Doit 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) 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.

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.

Vous devez toujours vérifier votre travail après avoir mis à jour les modèles pour vous assurer qu'ils ont la mise en page et le fonctionnement souhaité. Le Gestionnaire de conception de HubSpot fournit un outil permettant de prévisualiser les modules et les modèles. Pour prévisualiser un modèle, ouvrez-le dans le gestionnaire de conception et cliquez sur « Aperçu » dans la barre supérieure.

Pour la plupart des modèles, l'aperçu affiche l'état par défaut du modèle, c'est-à-dire l'état que vous verriez si vous créiez une page de site web à partir du modèle sans la modifier. Il existe deux modes d'aperçu pour les modèles : « Aperçu en linge avec options d'affichage » et « Aperçu en linge sans options d'affichage ». 

L'aperçu en ligne avec options d'affichage : affiche la page dans une iframe, ce qui vous donne des outils pour tester la réactivité et voir comment les feuilles de style de domaine peuvent avoir un impact sur votre modèle.

Les modèles de blog sont uniques en ce sens que vous avez besoin d'un listing de blogs et d'articles de blog pour vous faire une idée du fonctionnement du modèle. L'aperçu du blog vous permet de choisir un blog existant pour alimenter l'aperçu avec son contenu. À partir de là, vous pouvez choisir d'afficher le listing ou la page détaillée de ce modèle de blog.

L'aperçu des modèles à l'aide de l'outil de prévisualisation des modèles peut être utile pour des ajustements visuels mineurs. 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 utiliser la préparation de contenu, un aperçu de l'ébauche ou votre compte sandbox de développeur, pour visualiser la page sans vous soucier de sa mise en ligne et que des personnes puissent la trouver et la voir.

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 standard_header_includes HubL.

 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. Déplacer jQuery peut casser le JavaScript qui en dépend. Pour tester votre site, ajoutez ?hsMoveJQueryToFooter=True à la fin de votre URL tout en affichant les pages les plus importantes de votre site web, pour vous assurer que rien ne casse.

Historiquement, jQuery était inclus par défaut parce que les fonctionnalités de HubSpot l'exigeaient auparavant. CMS Hub ne nécessite pas de jQuery. La plupart des fonctionnalités de jQuery ont maintenant des équivalents modernes en Vanilla JavaScript, et nous encourageons leur utilisation. 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 plusieurs pages de votre site, en particulier celles qui sont très interactives.

Layout.css (anciennement connu sous le nom de required_base.css) est le fichier responsable du style de la grille adaptative de HubSpot. Ce fichier est toujours inclus automatiquement dans tout modèle de glisser-déposer. Il n'est pas inclus par défaut dans les modèles codés personnalisés. Pour les développeurs qui utilisent 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. Vous pouvez consulter le fichier, ici.