hubspot web design

21 modules du CMS HubSpot à avoir dans sa bibliothèque

Marion Leffondré
Marion Leffondré

18/08/2022 • 8 min

Un homme crée de modules sur HubSpot

Vous souhaitez créer un site internet pour votre entreprise, mais vous ne savez pas comment structurer votre contenu ? HubSpot propose une bibliothèque de modules personnalisables pour créer un site internet de conversion. Certains modules sont des “must have” pour son site web. Découvrez dans cet article 21 modules du CMS HubSpot à avoir dans sa bibliothèque.

Quels sont les modules du CMS HubSpot indispensables pour son site web ?


Le CMS HubSpot est un outil performant pour créer des pages web dédiées à la conversion. Découvrez comment il fonctionne et quels sont les enjeux des modules d’une page web.

Qu’est-ce qu’un module de page web ?

Les modules sont des éléments graphiques représentés sous forme de bloc qui vont venir construire une page d’un site internet. Une page représente donc un enchaînement de blocs pertinents pour l’expérience utilisateur de l'individu qui la consulte. C’est pourquoi les modules doivent être réfléchis pour avoir un site internet performant.

Plusieurs templates de modules sont disponibles dans la bibliothèque du CMS HubSpot.

Exemples de modules du CMS HubSpot


Le système “drag and drop” du CMS HubSpot

Plusieurs systèmes de gestion de contenu proposent désormais un moyen très simple de construire ses pages web : le drag and drop. Aussi appelé glisser-déposer en français, il permet de sélectionner n’importe quel module et de le placer à l’endroit de son choix pour structurer le contenu. Par exemple, si l’on veut construire une page pour expliquer une solution, on va venir glisser-déposer un module d’image puis ajouter un module de texte avec le même procédé.

Viser l’autonomie sur la modération de son site web

En bref, les modules sont des blocs prédéfinis pour faciliter l’intégration de contenus. Ce système de drag and drop est bien pratique et maintenant présent sur de nombreux outils. Cette technique simplifie l’accès au web et prône une approche “no code” : créer des éléments web sans connaître les langages informatiques. En somme, devenir autonome dans la gestion de son site web et la modération de ses contenus.

Toutefois, pour créer une identité vraiment unique, il est possible de personnaliser soi-même les différents modules sur HubSpot. De cette manière, vous créez un thème et un branding spécifiques à votre marque. Nous allons voir ensemble quels sont les modules indispensables pour avoir un site web dédié à la conversion.

Évaluez votre site internet  Réalisez un audit gratuit et automatique des performances de votre site  internet en quelques secondes  J’obtiens mon score

La liste des 21 modules du CMS HubSpot à avoir dans sa bibliothèque

HubSpot propose une bibliothèque de modules pertinents pour créer vos pages web de toutes pièces. Découvrez ici 21 modules types à avoir si vous souhaitez créer un site internet performant et apporteur d’affaires.

Les indispensables pour créer une page web performante

Comme un repas qui commence par l’entrée et se termine par le dessert, le contenu d’une page web commence par un header ou en-tête, et se termine par un footer ou pied de page. Ce sont des éléments indispensables des modules du CMS HubSpot à avoir dans sa librairie.

Le header ou en-tête

On peut utiliser différents headers pour un même site web. Les headers permettent aux visiteurs de naviguer sur un site web, nous pouvons choisir quel type de navigation adopter en fonction des actions que nous voulons faire faire à nos prospects.

Par exemple, on distingue le header d’une page d'accueil de celui d’une page d'atterrissage. Le but de cette dernière est de convertir un contact en client. On va donc retirer tous les éléments perturbateurs à ce passage à l’action en créant un header très simple et sans afficher la barre de navigation.

Exemple de header différent pour une homepage et une landing page avec Woopen :

Exemple de header pour Woopen


Le module de navigation du CMS HubSpot pour structurer l’information de son site

Voici un module essentiel pour créer un site internet facilement accessible pour les utilisateurs. Le menu est un élément primordial pour que vos visiteurs puissent accéder à la bonne ressource en un clin d'œil. Le but étant de proposer la bonne ressource à la bonne personne en un minimum de clics à effectuer.

Le méga-menu est en cela un bon moyen pour y parvenir, ainsi vous pouvez catégoriser vos ressources sous différents thèmes pertinents pour vos prospects et clients. Voici un exemple de bon méga-menu par OptiMonk :

Exemple du menu de OptiMonk


Le footer ou pied de page

Le footer sert à rediriger les visiteurs qui arrivent au bout de leur lecture sur une page. Ainsi, au lieu de remonter en haut de la page, ils peuvent directement accéder aux autres ressources de votre site internet. Ce module, bien que nécessaire, est parfois négligé, alors qu’il permet d’améliorer considérablement l’UX de votre site internet.

Une fois les headers et footers constitués, il ne faut pas oublier un élément important pour vous différencier sur le web. Nous allons parler de la hero section, ce module sert à donner une première bonne impression à votre site. C’est avec une hero section impactante que les visiteurs sont encouragés à naviguer dessus pour en apprendre davantage sur votre entreprise.

 

La hero section pour marquer les esprits

La hero section est le module parfait pour exprimer sa créativité design. Que ce soit une image, une vidéo, une illustration 2D ou 3D, vous pouvez en mettre plein les yeux à vos prospects pour un effet "wouah". Il existe différents types de hero section, elles seront différentes selon la nature des pages. Par exemple, pour une page d'atterrissage on peut ajouter un formulaire pour convertir les contacts en clients dès le premier module de la page.

Exemple de hero section pour Padok security avec une illustration :

Exemple de module avec la hero section de Padok Security


Les modules d’image et texte pour structurer le contenu

Parce qu’un site web se travaille autant sur le fond que la forme, les modules de texte et d’images sont très utiles pour structurer votre contenu. Pendant l’expérience de lecture, les utilisateurs vont d’abord regarder les images, puis le texte. C’est pourquoi il est important d’ajouter des images contextuelles pour illustrer ses propos.

Voici quelques exemples de modules d’images et de texte sur le CMS HubSpot à avoir dans sa bibliothèque :

Les modules carrousel et galerie d’images de l’Institut Artline

Pour ce module, les visiteurs peuvent faire défiler les différentes productions artistiques des élèves de l’institut d’art. Un bon moyen de montrer le savoir-faire de ses étudiants.

Carrousel d'images de l'institut Artline


Les modules blog post et rich text

Voici un exemple de présentation de texte et images pour l'École Hôtelière de Lausanne, où l’on retrouve une photo pour illustrer et une courte description.

Exemple de module texte et image EHL

Plusieurs formats à adopter pour votre contenu : les podcasts et la vidéo

En plus des modules de texte et image, vous pouvez également avoir un module pour mettre en avant vos vidéos et podcasts ou documents audio. Ces formats sont de plus en plus utilisés et viennent dynamiser votre contenu pour informer d’une autre manière.


Les modules spécifiques à valeur ajoutée pour votre site

Certains modules seront utilisés de manière très spécifique pour votre site web.
Voici une liste de modules à créer pour mettre en avant votre contenu de manière ciblée en fonction de votre audience.

Les listes de contenus

Ces modules sont utilisés pour répertorier un grand nombre de ressources ensemble. Par exemple, il sert à mettre les ressources d’un blog à disposition d’un visiteur pour qu’il puisse les retrouver dans un module centralisé.

Voici un exemple de liste d'éléments pour Business at OECD :

Exemple de module liste d'éléments Business at OECD
Le module de tabs pour mettre en avant ses plus beaux projets clients

Ce module permet de structurer le contenu sous différentes catégories afin de ne pas perdre l’utilisateur dans le flot d’informations. Par exemple, on peut prendre 3 projets clients à succès et les mettre en valeur sous le même module à l’aide de ces tabs. Ainsi, le visiteur pourra consulter un projet à la fois. Exemple de module avec les partenariats Make the Grade

Exemple d'un module tabs avec Make the Grade

Les chiffres clés pour souligner ses performances

Vous pouvez utiliser un module qui va mettre en avant vos meilleurs résultats obtenus depuis la création de votre entreprise. Ce module sert à montrer votre autorité et votre notoriété auprès des visiteurs. C’est un excellent atout pour la réassurance de vos prospects. Par exemple, un chiffre clé tel que “+200 nouveaux partenaires chaque année” montre à vos clients potentiels que vous êtes un acteur majeur de votre secteur.

Exemple d’un module chiffres clés avec Hybrigenics Services :

Module chiffre clés du site CMS HubSpot Hybrigenics

Les modules de Foires Aux Questions en accordéon

Les FAQ sont de bons moyens pour répondre aux questions récurrentes de vos prospects. Cette approche de selfcare procure un gain de temps considérable aux équipes de support. C’est en cela qu’il fait partie des modules du CMS HubSpot à avoir dans sa bibliothèque. Voici un exemple de module FAQ en forme dite d’accordéon pour Natura Trott :

Exemple de module FAQ pour NAtura Trott


Le module Maps pour renseigner sa localisation

Ajouter un module dédié à la localisation peut être pratique pour que vos visiteurs puissent se rendre facilement à votre entreprise. Vous pouvez le relier directement à Google Maps pour améliorer l’expérience utilisateur et satisfaire vos contacts.

Exemple d’un module Maps pour Hybrigenics Services :

Module de localisation Hybrigenics

La présentation des équipes pour humaniser son offre

Quoi de plus impactant pour vos prospects que de connaître les visages de vos équipes ? Ainsi, ils comprennent que de vrais experts et experts se cachent derrière votre produit ou service. Un module simple avec les photos et descriptions de poste de votre équipe permet à votre audience cible de mieux vous connaître.

Les preuves sociales pour rassurer les prospects dans leur parcours d’achat

La bannière de logos partenaires

Ce module est très répandu sur les sites internet, car il est visuellement très parlant. En effet, lorsque les visiteurs se rendent sur votre site web, ils vont comprendre que vous avez déjà travaillé avec des entreprises référentes dans leur secteur. Cela donne une première impression positive de votre offre puisque d’autres entreprises très connues dans l’esprit de vos visiteurs ont fait appel à vous. Cela active le biais cognitif de mimétisme : ce qui arrive aux autres est positif et symbole de réussite donc je vais faire comme les autres pour moi aussi réussir.

Les modules de témoignages clients

Ils servent à montrer la satisfaction de vos clients à vos prospects. Ainsi, ces derniers vont s'apercevoir que travailler avec vous apporte une valeur ajoutée saluée par vos clients. Il vous faut pour cela recueillir les avis de vos clients ambassadeurs et demander leur consentement pour le diffuser sur votre site web. Vous pouvez indiquer leur nom et fonction pour que les visiteurs puissent se rendre compte qu’il s’agit de personnes réelles et que votre approche est donc authentique.

66% des acheteurs affirment être influencés par les témoignages clients dans leur processus d’achat BtoB - emarketing

Exemple de module de témoignage pour Hybrigenics

Les modules de notes sur des sites comparateurs dans votre secteur

Rien de tel qu’un avis sur un site comparateur en ligne pour asseoir votre autorité dans votre secteur. Des sites de référencement et de comparaison d’offres peuvent être un élément à mettre en avant pour votre entreprise.

Les modules d’appel à l’action pour bien convertir vos contacts en clients potentiels

Ces modules constituent les éléments qui vont concrétiser le but de vos contenus. Ils servent à faire passer à l’action les visiteurs de votre site et ainsi faire évoluer leur cycle de vie dans le tunnel de conversion.

Le formulaire de contact

Le formulaire de la page contact de votre site web est la porte d’entrée aux clients potentiels pour votre entreprise. Il doit être clair et facilement accessible pour que vos prospects puissent vous joindre en toute simplicité. Ce module peut comprendre plusieurs champs, suivant le nombre d’informations personnelles que vous souhaitez demander à vos visiteurs. Il doit respecter la politique confidentialité et être conforme à la RGPD.

Voici des exemples de modules pour un formulaire de contact classique avec Business at OECD et multistep avec Hybrigenics Services :

Exemple de module formulaire simple et multi-step

La bannière CTA pour un lead magnet

Ajouter une bannière qui appelle à l’action est un bon moyen d’inciter directement le visiteur à cliquer pour consulter d’autres ressources. Cette bannière peut être placée au milieu d’un article de blog, pour proposer une ressource utile au lecteur, tel qu’un livre blanc. Elle peut également être utilisée en fin de page pour appeler à l’action à la suite d’un contenu à valeur ajoutée pour le lecteur. C’est aussi un bon moyen d’attirer l’attention du lecteur sur une ressource particulière.

Rappel : Un lead magnet a pour objectif de diffuser un contenu à forte valeur ajoutée en échange de données personnelles sur les prospects. Cela peut être un livre blanc, un guide, un rapport statistique, une checklist, un code promotionnel, etc.

La bannière souscription à la newsletter

Cette bannière permet aux visiteurs de s'inscrire rapidement et en quelques clics à la newsletter de votre entreprise. Cela est un bon moyen de récupérer les informations de prospects qui semblent intéressés par votre contenu. Ils sont prêts à souscrire à vos campagnes d’email marketing pour en apprendre davantage sur votre expertise ou les tendances de votre secteur par exemple.

Voici un exemple de bannière avec le système de paiement Alma :

Exemple de module abonnement newsletter par Alma

L’agenda de prise de rendez-vous

Un autre module très pratique pour inciter à passer à l’action, c’est le module agenda. Ainsi, vos prospects n’ont plus qu’à réserver un créneau directement dans l’agenda de vos consultants. Ce module permet de passer directement à la planification d’un rendez-vous plutôt que de répondre d’abord à une demande de contact. Le visiteur a donc directement un créneau réservé sans avoir besoin d’attendre une réponse de votre entreprise.

Le module de social sharing

Ce module est destiné à représenter les différents réseaux sociaux sur lesquels votre entreprise est active. Ainsi, vous pouvez rediriger vos prospects vers d’autres types de contenus externes à votre site internet. Ils pourront s’abonner à vos comptes et recevoir régulièrement du contenu dans leur fil d’actualité.


Vous l’aurez compris, il existe certains modules du CMS HubSpot indispensables à avoir dans sa bibliothèque. De la hero section jusqu’à la présentation des équipes, ne laissez rien au hasard. Ces modules constituent les éléments de base pour construire un véritable site web dédié à la conversion. Découvrez dès à présent comment choisir la bonne colorimétrie pour votre site internet.
Photo de

Marion Leffondré | Inbound Marketer chez Make the Grade

Passionnée par le marketing et l'univers du digital, je crée des contenus qui répondent aux enjeux de la croissance B2B. Générer naturellement de nouveaux contacts qualifiés dans votre CRM est l'un de mes principaux objectifs. Mes expériences à l'international m'ont permis d'acquérir une ouverture d'esprit pratique pour trouver de nouvelles idées.

Continuer la lecture

5 janvier 2023 •

sales

La checklist indispensable pour élaborer un sales playbook performant

5 janvier 2023 •

crm

Stratégie RevOps : qu'est-ce qu'une organisation en flywheel ?

3 janvier 2023 •

marketing

6 étapes indispensables pour aligner ses équipes Sales et Marketing