HubSpot CMS vue d'ensemble

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 dans HubSpot CMS, nous vous suggérons de commencer par le tutoriel de démarrage rapide et d'y revenir lorsque vous en aurez besoin.

Comment HubSpot CMS fonctionne-t-il ?

HubSpot CMS est un CMS SaaS (software-as-a-service) conçu pour aider les entreprises à développer leur présence sur le web, en mettant l'accent sur les capacités des spécialistes du marketing. Il est conçu pour être utilisé sur des sites web d'entreprise où des créateurs de contenu non techniques doivent être en mesure de construire, de mesurer et d'itérer sur le contenu de manière indépendante tout en travaillant dans le cadre de conception, de style et de fonctionnalité que vous pouvez mettre en place en tant que développeur. Le contenu, la collecte de lead et les analytics sont également intégrés au CRM de HubSpot, ce qui permet aux spécialistes du marketing 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 de HubSpot CMS est de travailler en tant que facilitateurs de contenu plutôt qu'en tant que créateurs de contenu. Les sites web d'entreprise sont plus performants lorsque le contenu est actuel et optimisé. Les développeurs doivent supprimer autant de friction que possible tout en établissant des normes de sécurité si nécessaire. HubSpot CMS été conçu pour équilibrer les besoins des développeurs et ceux des créateurs de contenu grâce à son système de modules, ses colonnes flexibles et ses zones de glisser-déposer. Cela signifie moins de travail ennuyeux de mise à jour des copies pour vous en tant que développeur, et des utilisateurs créateurs de contenu plus heureux.

Les modèles et les modules sont à l'intersection entre les développeurs et les spécialistes marketing

Les avantages clés et les primitives du système reflètent cette philosophie : un site HubSpot CMS 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.

Animation montrant un utilisateur créant une page glisser-déposer

Comme HubSpot se charge de l'hébergement et de la maintenance du CMS, cela signifie que 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.

Pages de site web : pages de destination, blogs et courriels

HubSpot CMS permet aux spécialistes du marketing de créer plusieurs types de contenu. L'interface utilisateur (IU) pour les créateurs de contenu est légèrement différente selon le type de contenu. Cela a des implications dont les développeurs doivent être conscients. 

Les modèles et les modules sont associés à un ou plusieurs des types de contenu mentionnés ci-dessous. Les développeurs peuvent restreindre leur utilisation à des types de contenu spécifiques.

Pages de site web et page de destination

Le site web et les pages de destination sont construits indépendamment les uns des autres. Les pages sont basées sur des modèles, et des modifications peuvent être apportées localement à cette page ainsi qu'au modèle. 

Les fonctionnalités offertes aux créateurs de contenu sont très similaires pour les pages de sites web et les pages de destination. 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.

Blogs

Les blogs dans HubSpot CMS, d'autre part, ont deux vues chacune : 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. Un portail HubSpot (terme utilisé pour désigner une instance individuelle de HubSpot) peut avoir plus d'un blog, mais le modèle utilisé pour un article individuel ne peut pas être spécifié pour chaque article. Les modèles utilisés pour la page de liste des blogs et la page des articles de blog, ainsi que l'outil permettant de créer de nouveaux blogs, sont définis dans l'interface utilisateur de HubSpot sous Paramètres > Site web> Blog.

Courriels

L'outil de messagerie HubSpot Custom (ou « classique ») est construit sur la même plateforme que le CMS, de sorte que les modèles et les modules peuvent également être inclus dans les e-mails utilisés avec cet outil. Les e-mails construits à l'aide de l'outil de messagerie par glisser-déposer ne peuvent pas utiliser de modèles personnalisés.

Système de fichiers développeur

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, qui est relié à une base de données en arrière-plan. 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.

Il faut garder à l'esprit que, en arrière-plan, ces fichiers ne sont pas stockés exactement de la même manière sur le disque dans HubSpot ; ils sont associés à des entrées dans 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/. Toutefois, nous vous suggérons d'organiser vos ressources comme nous l'avons fait dans l' exemple de code boilerplate pour le CMS. La présentation de vos ressources vous semblera familière si vous avez travaillé avec d'autres outils de développement standards.

Thèmes, modèles, modules et champs

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. (Par exemple, des chiffres, des chaînes de caractères, du texte enrichi, des images, etc.) Les développeurs peuvent 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.

Thèmes

Si vous avez travaillé avec d'autres CMS, les principes de base des thèmes vous seront familiers. 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 pour les spécialistes du marketing. Ces ressources peuvent comprendre des modèles, des modules, des fichiers CSS, des fichiers JavaScript, des images, etc.

Les thèmes permettent aux développeurs de 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.

Éditeur de thèmes

Modèles

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 arbitraire, 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.

N'oubliez pas que lorsque vous créez des modèles, vous créez également l'expérience d'édition pour la personne qui créera des pages à partir de vos modèles. Cette personne peut être un collègue de travail, un client ou peut-être même vous-même. Dans tous les cas, assurez-vous que l'expérience d'édition est facile et intuitive.

Elle inclut :

  • 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 (voir la section suivante à ce sujet) 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.
  • 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 construits soit avec HTML + HubL, soit avec une interface de type glisser-déposer dans le gestionnaire de conception. Si vous démarrez un nouveau projet, nous vous suggérons d'utiliser des modèles codés, car ils vous offrent plus d'options de workflow en tant que développeur et supportent les zones de glisser-déposer.

Code VS avec HTML et modèle HubL ouvert

Modules

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.

HubSpot CMS 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, mais vous voudrez 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.

Format du module dans l'éditeur

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.

Pour en savoir plus, consultez la vue d'ensemble du système de modules.

Champs

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.

Comme pour les autres objets dans HubSpot CMS, faites attention à l'expérience d'édition que vous créez lorsque vous élaborez des champs dans un module ou un thème, y compris la façon dont vous pouvez utiliser les groupes de champs pour établir une hiérarchie claire.

Le langage HubL

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

HubL n'est cependant pas un langage de programmation. Les CMS comme Wordpress ont une frontière quelque peu ambiguë entre la création de modèles et la logique back-end. Cette ambiguïté ouvre la porte à une grande variété d'approches de la construction de modèles. Cette flexibilité présente des avantages et des inconvénients que nous n'aborderons pas ici. En règle générale, HubSpot CMS est plus normatif. 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 exploiter 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.


Cet article vous a-t-il été utile ?
Ce formulaire est destiné à recueillir les avis sur la documentation pour les développeurs. Si vous souhaitez faire part de votre avis sur les produits HubSpot, veuillez le partager sur le forum des idéesde la communauté.