Dans le cadre du Hackathon mis en place par Hubspot pour promouvoir les thèmes sur sa marketplace, Markentive a décidé de relever le défi et de réaliser son propre thème. Si cet exercice nous a permis de tester les avantages de la création d’un site web sur le CMS Hubspot en thème, il est aussi l’occasion pour nous de partager nos quelques bonnes pratiques.
Point d’attention : Créer un thème dans HubSpot nécessite de travailler dans l’écosystème régulièrement, et de bien connaître les différentes parties du CMS (Templates, modules, CTAs, formulaires, menus, settings). Si vous ne maîtrisez pas ces prérequis, il pourra s’avérer difficile de réaliser un thème. Nous vous conseillons par ailleurs de travailler à plusieurs sur ce projet car il mêle des problématiques UX, DEV, Marketing et SEO.
L’organisation d’un thème HubSpot : fonctionnement et avantages
Comment fonctionne un thème ?
Si vous travaillez sur HubSpot, vous avez sûrement un nombre assez conséquent de templates dans votre design manager. Vous passez certainement votre temps à les dupliquer ou à les modifier pour créer de nouveaux contenus. Pas très pratique n'est-ce-pas ? Le thème HubSpot va vous permettre de regrouper et d’organiser les différents templates de votre site et/ou de votre blog, afin de pouvoir les administrer plus facilement.
Un thème HubSpot est composé de plusieurs dossiers : css, js, images, modules et templates (Vous pouvez télécharger un dossier thème par défaut en suivant cette procédure). Cette architecture est faite, non seulement pour segmenter les contenus mais aussi pour cibler plus facilement ce sur quoi vous souhaitez travailler.
Quels sont les avantages d’un thème Hubspot ?
Le cœur du thème HubSpot - et ce qui fait sa différence fondamentale avec le développement traditionnel que l’on a pu connaître jusqu’à aujourd’hui - est le fichier “fields.json”. A la racine de votre thème, ce fichier organisé sous forme d’objets va vous permettre de créer des champs au niveau global de votre thème.
Mais quelle utilité cela peut-il avoir ? Et bien, vous pouvez dorénavant gérer tous les éléments globaux de votre site à un seul endroit ! Que ce soit les tailles de vos titres ou textes, les couleurs de votre charte graphique ou encore les typographies utilisées. Tout est possible puisque c’est vous qui le mettez en place. C'est d'ailleurs l'un des principaux avantages du CMS Hubspot.
Conseil : Pensez à paramétrer vos champs globaux et votre charte graphique par défaut avant de commencer à coder vos templates. Cela évite un trop grand nombre d'allers-retours par la suite. Pensez aussi, entre autres, à mettre des champs pour gérer les espacements entre vos sections et leur taille maximum.
DnD Areas, Sections, Rows & Modules : les nouveautés du HubL
Si vous développez déjà sur HubSpot, vous connaissez sûrement le HubL, ce langage de templating inspiré du Jinja qui est monnaie courante sur la plateforme. Il est utilisé pour ajouter des conditions, gérer les champs de vos modules, ou encore afficher une variable spécifique dans vos pages.
Le thème apporte son lot de nouveautés concernant ce langage : les templates sont en HTML + HubL, ce qui signifie que le développeur a la main sur l’intégralité du développement du site web. Quant aux nouvelles variables dnd_area, dnd_section, dnd_row et dnd_module, elles vous permettent de gérer la structure de votre page, le nombre de sections, les tailles de colonnes de vos blocs, ainsi que d’appeler vos modules directement paramétrés dans vos pages. Sympa non ?
Note de l’auteur : Si la documentation HubSpot est assez complète, certains éléments ne s’y trouvent pas, nous partageons donc la solution que nous avons trouvée. Pour paramétrer vos modules directement dans un template, il faudra appeler les variables du module directement dans sa partie dnd_module.
Exemple :
Dans cet exemple, le module “Custom background element” est appelé. La variable “image” correspond au champ image du module dans lequel nous allons mettre l’image que nous voulons voir apparaître dans la page à cet endroit (gardez en tête que les modules fonctionnent aussi en JSON).
L’utilisation du thème et sa valeur ajoutée sur Hubspot
Nous en venons maintenant à l'après-développement, une fois que votre thème est prêt à être utilisé. Lorsque vous souhaitez créer une page, sélectionnez la partie thème lors du choix du template, puis choisissez le template de votre thème à utiliser.
Une fois celui-ci sélectionné, rien ne change par rapport à votre utilisation actuelle. Rien ? Mais si ! Vous avez remarqué que, grâce aux nouvelles balises HubL, vous pouvez maintenant cliquer et faire glisser n’importe quel élément de la page, que ce soit en hauteur ou en largeur, gérer la taille de vos colonnes et ajouter ou supprimer n’importe quel élément de la page à votre guise.
C’est la vraie valeur ajoutée du thème côté contenu : fini les flexibles columns où on ne pouvait bouger les modules qu’en hauteur, terminé l’édition du contenu dans la petite sidebar - Toute l’administration côté contenu a été revue pour les thèmes afin de permettre à un non-codeur de pouvoir gérer tranquillement ses pages une fois le développement terminé. Le but étant de rendre de l'autonomie aux équipes marketing, comme l'a fait ReachFive lors de sa refonte de site avec Hubspot CMS.
Conseil : Si cette fonctionnalité est très sympa et pratique pour un non-codeur, elle nécessitera de redoubler en vigilance lors de votre développement. Pensez à vos modules comme à des composants qui peuvent être bougés de n’importe quelle manière. Évitez donc toutes les valeurs non modifiables (padding, margin, …) pour que l’on ne soit pas bloqué lors de la création du contenu.
Découvrez d'ailleurs 10 exemples de site web qui utilisent Hubspot CMS.
Nous espérons que cet article vous a plu et qu’il vous aidera à réaliser vos plus beaux thèmes, et en attendant n'hésitez pas à contacter nos équipes pour tous vos projets de lancement ou de refonte de site internet.
.png)
