Dernière modification : 28 août 2025
Il est essentiel de comprendre les modules pour pouvoir comprendre HubSpot CMS et sa puissance. Les modules sont des composants réutilisables qui peuvent être utilisés dans des modèles ou ajoutés à des pages via des zones de glisser-déposer et des colonnes flexibles. En plus d’utiliser les modules fournis par HubSpot, les développeurs peuvent créer leurs propres modules pour tout, des témoignages aux galeries de photos. Les modules sont créés à l’aide des outils de développement locaux ou en utilisant le Gestionnaire de conception. Un module est composé de deux parties :
  1. Une interface utilisateur créée par une liste de champs que les utilisateurs verront lors de l’édition d’une instance de module.
  2. Un fragment de modèle HTML+HubL avec CSS et JS associés qui définissent comment le HTML sera généré

​
Voici un exemple

Pour mieux comprendre ce qu’est un module, examinons un module simple, « Membre de l’équipe ». Le module se compose d’une photo, du nom du membre de l’équipe, de son titre et d’une courte biographie. Il ressemble à une partie d’une page Web du CMS :
Instance du module membre de l'équipe

​
L’interface utilisateur pour l’édition

Le développeur construit l’interface utilisateur (IU) des modules en utilisant des champs. Le développeur choisit ensuite les champs à utiliser en fonction du type de module à construire, des données nécessaires et de l’expérience d’édition. Dans ce cas, le module comprend :
  1. un champ d’image, pour la photo d’un membre de l’équipe
  2. deux champs de texte, pour le nom et la fonction du membre de l’équipe
  3. et un champ de texte enrichi, pour une courte biographie.
Lorsqu’un créateur de contenu modifie un module, l’interface utilisateur est construite sur la base des champs que le développeur a ajoutés au module et de la façon dont chaque champ est configuré.
Éditeur du module membre de l'équipe

​
Comparaison du module et de l’instance de module

Il existe deux termes fréquemment utilisés concernant les modules. Il est important de comprendre la différence entre les deux.
  • Module -  : blocs de construction réutilisables qui peuvent être ajoutés aux modèles et aux pages.
  • Instance de module -  : les modules individuels rendus sur la page. Ils peuvent avoir des valeurs de champ distinctes et, par conséquent, avoir un aspect différent des autres instances de module du même module.

​
Fields.json

Les champs d’un module sont définis en JSON comme un tableau d’objets. Chaque champ a un nom, un type et une valeur par défaut. D’autres propriétés sont également disponibles en fonction du type de champ qui contrôle l’expérience d’édition. 
// fields.json
[
  {
    "name": "team_member_photo",
    "label": "Team Member Photo",
    "required": true,
    "responsive": true,
    "resizable": true,
    "type": "image",
    "default": {
      "src": "",
      "alt": ""
    }
  },
  {
    "name": "team_member_name",
    "label": "Team member name",
    "required": true,
    "type": "text",
    "default": "Joshua Beck"
  },
  {
    "name": "team_member_position",
    "label": "Team member position",
    "required": true,
    "type": "text",
    "default": "CEO, Co-Founder"
  },
  {
    "name": "team_member_bio",
    "label": "Team member bio",
    "required": true,
    "type": "richtext",
    "default": "<p>Joshua has over 20 years of experience in the tech industry. He helped start this company in 2015 with the mission of helping people grow. In his spare time he loves hanging out with his kids, going to the beach, and cooking.</p>"
  }
]
Pour en savoir plus sur tous les champs disponibles, voir Champs de module et de thème.

​
Utilisation des données du champ du module pour rendre le HTML

Les valeurs de chaque champ sont disponibles dans le fragment HTML+HubL d’un module via une variable module. Les données de chaque champ sont accessibles via les propriétés de la variable du module. En utilisant le module membre de l’équipe comme exemple, le nom du membre de l’équipe est accessible via {{ module.team_member_name }}. 
<section class="team-member">
  <img class="team-member__image" src="{{ module.team_member_image.src }}" alt="{{ module.team_member_image.alt }}">
  <h3 class="team-member__name">{{ module.team_member_name }}</h3>
  <p class="team-member__position">{{ module.team_member_position }}</p>
  <div class="team-member__bio">{{ module.team_member_bio }}</div>
</section>

​
Utilisation des modules dans les modèles

Les modules sont ajoutés aux modèles en utilisant la balise module, module_block ou dnd_module et en indiquant le chemin d’accès au module comme paramètre. Les valeurs par défaut des champs d’un module peuvent également être remplacées au niveau du modèle en ajoutant des paramètres à la balise du module qui correspond au nom du champ, comme le montre la deuxième partie de l’exemple ci-dessous. 
{% module "unique_identifier" path="/modules/team-member.module" %}

{# override default values in a module instance #}

{% module "unique_identifier"
  path="/modules/team-member.module",
  team_member_name="Brian Halligan",
  team_member_position="CEO"
%}
Les modules ne peuvent pas être imbriqués les uns dans les autres. La plupart du temps, lorsque vous voulez le faire c’est pour des raisons de mise en page. Les sections dans les zones de glisser-déposer sont souvent la meilleure solution.

​
Les modules sont un excellent outil dans la boîte à outils d’accessibilité

Les modules sont utilisés sur tout un site Web, parfois sur plusieurs pages, voire de nombreuses fois sur une page. C’est pourquoi l’élaboration du HTML, de la CSS et du JS de votre module en tenant compte de l’accessibilité peut avoir un grand impact sur l’utilisation de votre site par les personnes handicapées ou non.

​
Les modules peuvent faciliter la localisation

De la même manière que pour l’accessibilité, élaborer des modules afin que tout le contenu du module soit basé sur des champs permet de le localiser ultérieurement. Par exemple, vous pouvez avoir un module « Articles à la une ». Au lieu de coder en dur le texte « Articles à la une », utilisez un champ de texte ou de texte enrichi. Le texte peut ensuite être modifié dans d’autres langues. Pour en savoir plus sur la localisation sur le CMS, allez à multi-langue.

​
Pour commencer

Pour commencer, consultez notre tutoriel Démarrer avec les modules.

​
Aller plus loin