Vue d'ensemble du CMS Hub

Cette section est conçue pour vous aider à comprendre les principaux aspects du système de gestion du contenu (CMS) de HubSpot et y créer de superbes sites web. Pour en tirer le meilleur parti, une compréhension de niveau professionnel des bases du développement web, notamment HTML, JavaScript et CSS, est attendue.

Si vous êtes novice quant au CMS Hub, nous vous suggérons de commencer par le tutoriel de démarrage rapide et d'y revenir lorsque vous en aurez besoin.

Le CMS Hub est conçu pour aider les entreprises à développer leur présence web en mettant l'accent sur la création et la gestion de contenu pour les spécialistes du marketing. Le contenu du site web, la collecte de lead et les analytics sont intégrés au CRM de HubSpot, ce qui permet de créer facilement des expériences personnalisées pour les visiteurs et d'intégrer ces expériences au reste de l'activité.

La tâche principale des développeurs du CMS Hub est de travailler en tant que facilitateurs de contenu plutôt qu'en tant que créateurs de contenu. Ainsi, le CMS Hub été conçu pour équilibrer les besoins des développeurs et ceux des créateurs de contenu grâce à son système de thèmes et de modules ainsi qu'à ses zones de glisser-déposer.

Un site CMS Hub bien conçu doit être développé en étroite collaboration avec vos créateurs de contenu afin de comprendre leurs besoins, et nécessitera ensuite moins de support et de maintenance de la part d'un développeur. Au fur et à mesure que vous créez sur HubSpot CMS, prévisualisez continuellement l'expérience de création de pages pour les créateurs de contenu. Cela leur permet de travailler de manière aussi indépendante que possible sur le site.

HubSpot se charge de l'hébergement et de la maintenance du CMS. Ainsi, vous n'avez pas à vous soucier de la gestion des plug-ins, des mises à jour, de l'hébergement, de la mise à l'échelle ou de la sécurité. Le compromis ici est que le système impose un peu plus de restrictions sur ce que vous pouvez faire d'autre que les CMS autohébergés. Par exemple, vous ne pouvez pas modifier ou étendre les principes fondamentaux du système manuellement ou via des plug-ins, ni manipuler le rendu de bas niveau, ni accéder et modifier directement le contenu des bases de données.

Le contenu conçu par les développeurs (par exemple, les thèmes, les modèles, les modules, JavaScript et les CSS) est créé dans un système de fichiers pour développeurs, tandis que le contenu des pages (pages, articles de blog) est conçu et construit dans un puissant éditeur WYSIWYG et les fichiers multimédias (images créées par le créateur de contenu, PDF, etc.) sont stockés dans un gestionnaire de fichiers basé sur une application web.

Lorsqu'une page est rendue, HubSpot achemine la demande vers l'un des nombreux serveurs en fonction du domaine, rend la page sur nos serveurs et la met en cache dans un réseau de diffusion de contenu si possible.

Le CMS Hub permet de créer plusieurs types de contenu. L'interface utilisateur pour les créateurs de contenu est légèrement différente en fonction du type de contenu, ce qui a des conséquences dont vous devez tenir compte en tant que développeur. 

Les pages de site web et de destination sont créées indépendamment les unes des autres, mais toutes reposent sur des modèles. Pour les créateurs de contenu, le processus de création d'une page de destination ou de site web est presque identique. La distinction entre ces deux types de pages est la suivante : les pages de site web sont conçues pour présenter des informations faisant partie de votre site web et destinées à être trouvées de manière organique, tandis qu'une page de destination est généralement associée à une offre ou à une campagne de marketing spécifique (par exemple, liée à un e-mail marketing envoyé à une liste spécifique de contacts). 

Dans l'interface utilisateur destinée aux spécialistes du marketing, l'analytics et l'organisation de ces types de pages sont également organisées séparément, car les pages de destination ont souvent des objectifs de conversion spécifiques.

Les blogs HubSpot ont deux vues : une pour la page de listing et une pour la page d'article individuel, puis chaque article de blog est alimenté dans chacune d'elles. Vous pouvez définir un blog pour qu'il partage le même modèle pour les articles de blog et les pages de listing ou utiliser des modèles distincts pour la page de listing et les articles de blog. Les articles de blog doivent partager le même modèle. Découvrez-en davantage sur le balisage des modèles de blog ainsi que sur la création et la gestion de blogs dans HubSpot.

Les e-mails peuvent être créés de plusieurs façons dans HubSpot :

• E-mail classique : l'outil d'e-mails classique repose sur la plateforme CMS. Vous pouvez donc créer des modèles et des modules d'e-mail de la même manière que des pages de site web et de destination. Vous pouvez également créer des modèles d'e-mail codés pour avoir un contrôle total sur le balisage.
• E-mail en glisser-déposer : les e-mails créés avec l'éditeur en glisser-déposer ne peuvent pas utiliser de modèles personnalisés, mais les créateurs de contenu pourront créer des mises en page et des contenus grâce à l'interface de glisser-déposer de HubSpot.

Outre la création de contenu de page via les éditeurs intégrés à l'application ou le codage en dur dans les modèles, vous pouvez utiliser des sources de données structurées pour alimenter du contenu de page dynamique avec HubL. Vous pouvez utiliser les sources de données suivantes pour alimenter vos pages :

• HubDB : stockez des données dans les cellules de tableaux HubDB.
• Fiches d'informations du CRM : stockez des données dans des fiches d'informations du CRM, telles que des contacts, des entreprises ou des objets personnalisés.

La création de pages dynamiques à l'aide de contenu structuré vous permet de créer, de modifier et de supprimer des pages web et du contenu de page en mettant à jour directement les sources de données. À l'image d'un blog HubSpot, un ensemble de pages dynamiques comprendra une page de listing unique pour afficher les instances de votre source de données, puis une page distincte pour chaque instance individuelle. À l'aide de HubL, vous pouvez configurer entièrement les données affichées par les pages.

Par exemple, vous pouvez créer un tableau HubDB qui stocke une ligne d'informations pour chaque membre d'une équipe de vente. En utilisant ce tableau HubDB, HubSpot peut ensuite générer une page de listing pour afficher les détails clés de chaque ligne de tableau (comme un nom et une image pour chaque représentant commercial) ainsi qu'une page distincte pour chaque représentant commercial afin d'afficher plus d'informations (comme leur biographie et leur numéro de téléphone). Si un représentant commercial est ensuite promu vers une autre équipe, vous pouvez supprimer sa ligne du tableau HubDB. HubSpot supprimera automatiquement sa page détaillée et le supprimera de la page de listing. 

Les principales ressources (modèles, thèmes et modules, ainsi que les fichiers JavaScript, CSS et images qui les prennent en charge) sont créés dans un système de fichiers pour développeurs. Vous pouvez voir ce système de fichiers soit dans le panneau de gauche du gestionnaire de conception, soit dans les dossiers synchronisés localement à l'aide des outils de développement local. Dans le système de fichiers, les actifs peuvent se référer les uns aux autres avec des chemins absolus ou relatifs.

En arrière-plan, ces fichiers sont mappés aux entrées d'une base de données. C'est pourquoi l'accès au système de fichiers du développeur se fait par le biais des outils CLI de HubSpot plutôt que par un accès direct SSH ou FTP, et certaines fonctionnalités du système de fichiers auxquelles vous pouvez vous attendre, comme les permissions et les liens symboliques, ne sont pas offerts dans le système de fichiers du développeur.

Cette approche diffère de celle des CMS traditionnels, mais signifie que les références cassées entre les fichiers ou les erreurs de syntaxe sont détectées au moment de la publication plutôt qu'au moment de l'exécution, ce qui vous offre une protection supplémentaire contre les défaillances accidentelles lorsque le site web est visité en direct.

Le CMS découvrira les modèles dans le système de fichiers et les présentera aux créateurs de contenu lorsqu'ils créeront de nouvelles pages. La structure du système de fichiers dépend donc de vous. Il n'est pas nécessaire que les modules se trouvent dans un dossier /modules/ ou que JavaScript se trouve dans un dossier /js/. Cependant, il est recommandé d'organiser vos ressources de la même manière que le code d'exemple du boilerplate du CMS. 

Lesthèmes, les modèles, les modules et les champs sont les objets avec lesquels vous travaillerez le plus dans le HubSpot CMS en tant que développeur. L'utilisation efficace de ces différents objets vous permet de donner aux créateurs de contenu la liberté de travailler et d'itérer sur les sites web de manière indépendante, tout en respectant les règles de style et de mise en page que vous avez définies.

Les thèmes et les modules contiennent des champs, qui sont des paramètres de types de données spécifiques, comme des nombres, des chaînes, du texte enrichi et des images. Vous pouvez contrôler la manière dont ils sont utilisés pour le rendu de ces objets, ainsi que la manière dont ils doivent être organisés et apparaître dans l'éditeur WYSIWYG. Les créateurs de contenu peuvent définir des valeurs pour les champs dans l'éditeur WYSIWYG, qui sont appliquées au thème ou au module au moment du rendu.

Les thèmes sont les objets de premier niveau qui définissent l'aspect et la convivialité d'un site web et créent une expérience d'édition de contenu conviviale. Ces ressources peuvent comprendre des modèles, des modules, des fichiers CSS, des fichiers JavaScript, des images, etc.

Grâce aux thèmes, vous pouvez créer un ensemble de champs que les créateurs de contenu utilisent pour obtenir un contrôle stylistique global sur un site web sans avoir à modifier la CSS. Vous pouvez spécifier dans la CSS où ces contrôles sont appliqués, arranger les contrôles pour qu'ils héritent des autres, et gérer la façon dont ils sont présentés et organisés aux équipes marketing : dans l'éditeur de thème. Les créateurs de contenu utilisent l' éditeur de thème pour modifier les champs du thème, prévisualiser ces modifications par rapport aux modèles existants dans un thème et publier leurs modifications.

Ces champs du thème peuvent être définis de manière globale sur un site ou remplacés au niveau d'une page.

Les modèles définissent le balisage et le style de base d'un ensemble de pages qui utilisent un modèle. Ils peuvent contenir un HubL, du HTML et des liens vers des fichiers JavaScript et CSS, et leur utilisation peut être limitée à des types de contenu spécifiques. Vous disposez d'une flexibilité totale en ce qui concerne le balisage et le style que vous pouvez inclure dans un modèle, mais nous vous encourageons à respecter quelques bonnes pratiques et à utiliser certaines fonctionnalités clés du CMS afin de garantir que les responsables marketing puissent modifier les pages facilement. Voici quelques bonnes pratiques :

• Construire des modèles dans le cadre d'un thème et utiliser la CSS du thème, y compris les champs du thème, pour réaliser la majorité du style dans un modèle. Les créateurs de contenu pourront ainsi facilement apporter des changements de style globaux et locaux de manière cohérente sans avoir à modifier les CSS.
• L'utilisation de modules pour la majorité des composants de votre page permet de les réorganiser et de les réutiliser sur l'ensemble d'un site web. Découvrez-en davantage sur les modules ci-dessous.
• Utiliser des zones de glisser-déposer lorsque cela est possible pour le contenu des pages principales, en particulier sur les pages internes. Les zones de glisser-déposer vous permettent de définir une mise en page par défaut pour les modules qui composent une page, mais offrent aux commerçants la possibilité de modifier la mise en page et le style indépendamment.
• L'utilisation de partials globaux pour contenir du contenu partagé, comme les en-têtes et les pieds de page, dont l'apparence doit être cohérente sur l'ensemble d'un site web.

Les modèles peuvent être créés soit avec HTML + HubL, soit avec une interface de type glisser-déposer dans le gestionnaire de conception. Cependant, il est recommandé de coder les modèles car ils permettent plus de contrôle et de fonctionnalités que les modèles en glisser-déposer, comme la prise en charge des zones de glisser-déposer.

Les modules sont des composants réutilisables que vous pouvez placer sur des modèles et des pages dans HubSpot CMS. Ils comprennent des contrôles pour les spécialistes du marketing et contiennent des balises HubL/HTML, CSS et JavaScript qui, ensemble, construisent des composants réutilisables et modifiables d'un site web.

Les contrôles d'un module sont définis dans des champs. Pour créer un module de qualité, il faut donc tenir compte à la fois de l'apparence de la page et de l'expérience des éditeurs de contenu.

Le CMS Hub comprend des modules par défaut courants tels que des en-têtes, du texte enrichi, des images, des boutons et des CTA, que vous utiliserez comme composants fondamentaux. Vous souhaiterez sans doute aussi créer des éléments pouvant avoir des mises en page plus intéressantes qui s'intègrent dans votre thème et vos modèles. Les accordéons, les curseurs et les onglets sont des exemples courants de modules que vous pourriez vouloir construire.

Vous pouvez considérer un module comme un objet et les modules sur les pages comme des instances de cet objet, ce qui signifie que les mises à jour du HubL, de la CSS ou du JavaScript d'un module sont appliquées à toutes les instances de ce module dans les pages ou les modèles d'un portail HubSpot donné. Les modules sont également portables d'un portail HubSpot à l'autre, que vous utilisiez l'outil de copie intégré au gestionnaire de conception, que vous les vendiez sur le marché ou que vous partagiez le code directement avec des outils de développement locaux. Cela signifie que vous pouvez appliquer une seule fois une solution de conception et l'utiliser sur toutes les pages et tous les portails, et lorsque vous devez la mettre à jour, ces modifications peuvent être appliquées sur toutes les pages sans avoir à modifier plusieurs pages ou plusieurs modèles.

Les modules peuvent également être inclus dans des thèmes, ce qui vous permet d'utiliser des champs de thème pour manipuler l'aspect des modules et faire en sorte qu'ils soient affichés de manière bien visible dans l'éditeur de page, afin que les créateurs de contenu puissent accéder facilement aux modules qui s'accordent parfaitement avec les conceptions que vous avez créées.

Découvrez-en davantage dans le guide de présentation des modules.

Les champs sont les contrôles que les créateurs de contenu utilisent pour ajuster les paramètres transmis à vos thèmes et modules. Les champs sont typés, comprenant des types simples comme booléen, texte, URL, choix et fichier, mais aussi des champs plus complexes comme la police avec style ainsi que des champs spécifiques à HubSpot comme des liens vers d'autres éléments de contenu ou formulaires dans le système HubSpot.

Les champs peuvent également être placés à l'intérieur de répéteurs qui transmettront un tableau au module, par exemple cela pourrait être un carrousel d'images où vous voulez un ensemble d'images avec le texte associé `alt` transmis. Plutôt que de créer un certain nombre de champs d'image et de texte, vous pouvez créer un champ de chaque type et les placer dans un groupe répétitif.

Les champs d'un module sont spécifiés soit dans le gestionnaire de conception, soit avec cette syntaxe dans un fichier fields.json.  Les champs d'un thème doivent être spécifiés dans le fichier fields.json à la racine du thème.

HubSpot CMS utilise le langage de balisage HubSpot ou HubL (prononcer « Hubble »). HubL est l'extension de HubSpot de Jinjava, un moteur de modèles basé sur Jinja. HubL utilise une quantité considérable de balises propres à HubSpot et ne prend pas en charge toutes les fonctionnalités de Jinja. Il est exécuté entièrement côté serveur lorsqu'une page est rendue.

HubL possède les fonctionnalités que l'on attend d'un langage de modélisation simple, comme les variables, les boucles et les fonctions SI, mais il prend également en charge des macros de rendu plus complexes, la récupération de données et le mappage avec des balises, des fonctions et des filtres. 

Si vous atteignez les limites de ce qui est possible avec HubL, HubSpot fournit des API pour créer des solutions plus personnalisées. Les comptes CMS Hub Entreprise peuvent utiliser des fonctions sans serveur permettant une programmation côté serveur plus sophistiquée. 

Lorsque vous continuez à développer HubSpot CMS, vous pouvez vous référer à la référence du langage HubL pour plus de détails sur les caractéristiques spécifiques du langage.