> ## Documentation Index
> Fetch the complete documentation index at: https://developers.hubspot.fr/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Marketplace des modèles | Exigences relatives aux modules
> Découvrez les exigences auxquelles les modules d
'Marketplace des modèles | Exigences relatives aux modules';
"Découvrez les exigences auxquelles les modules d'un thème doivent répondre lors de la soumission au marketplace des modèles de HubSpot.";
Découvrez les exigences pour soumettre un module dans le marketplace des modèles. Ces exigences s'appliquent à la fois aux modules d'un thème et aux modules indépendants.
## Restrictions relatives aux modules
Les modules ne doivent pas contenir la [fonctionnalité HubDB](https://developers.hubspot.com/docs), des appels à des [fonctions sans serveur](https://developers.hubspot.com/docs) ou des [champs d'objet CRM](/docs/cms/reference/fields/module-theme-fields#crm-object).
Les types de modules suivants ne doivent pas être créés en tant que modules indépendants.
* HTML
* Modules en pleine largeur
* Formulaires et formulaires à plusieurs étapes
* Modules d'espacement ou modules qui créent une structure de page hors interface utilisateur
* Modules qui dupliquent les fonctionnalités de module par défaut
* Modules commerciaux spécifiques
* Modules spécifiques aux e-mails
## Contenu du module
Découvrez les exigences relatives aux libellés des modules et au texte d'aide, aux champs et au contenu par défaut.
### Libellés de module et texte d'aide
* Les modules doivent avoir des libellés descriptifs qui précisent l'objectif du module. Le libellé *Hero banner avec défilement parallaxe* est descriptif, alors que les libellés *Hero banner* et *Galerie* ne le sont pas.
* Les libellés de module ne doivent pas contenir de chiffres, comme *Hero banner 01*.
* Les libellés de module ne doivent pas contenir de traits de soulignement.
* Les libellés de module ne doivent pas contenir d'abréviations, comme *Col* au lieu de *Colonne*.
* Les modules doivent contenir [du texte d'aide en ligne](/docs/cms/reference/modules/configuration#meta-json) (le cas échéant) pour indiquer plus en détail comment utiliser le module.
* Les modules ne doivent pas être nommés de la même manière qu'un [module par défaut](/docs/cms/reference/modules/default-modules).
* Pour les modules indépendants, le libellé du module doit correspondre au nom figurant sur le listing de modèles. Par exemple, si votre listing de modèles est *Superbe bannière avec défilement*, le libellé de votre module doit être le même.
### Contenu par défaut
* Le champ par défaut ne peut pas inclure de texte *lorem ipsum*.
* Le contenu du champ par défaut doit représenter l'objectif du champ :
* Lors de l'inclusion des champs de menu, les modules doivent utiliser par défaut l'option de contenu *Sélectionner un menu*.
* Lors de l'inclusion de champs de formulaire, les modules doivent utiliser par défaut l'option de contenu *Sélectionner un formulaire*.
* Lors de l'inclusion de champs de sélecteur de blog, les modules doivent utiliser par défaut l'option de contenu *Sélectionner un blog*.
* Si l'ajout de contenu par défaut à un module n'est pas pertinent, utilisez plutôt un [espace réservé de module](/docs/cms/reference/hubl/tags/standard-tags#editor-placeholders) pour aider le créateur de contenu à visualiser l'espace qu'il remplira.
### Icônes de module
Les modules doivent inclure une icône personnalisée attribuée au module (remplaçant l'icône par défaut). N'utilisez pas les logos d'entreprise comme icônes, tels que les logos Apple ou Amazon. Pour les modules inclus dans un thème, chaque module doit avoir une icône unique et pertinente.
Découvrez-en davantage sur les [icônes de module](/docs/cms/reference/modules/configuration#adding-an-icon).
### Modules nécessitant des comptes tiers
Pour les modules individuels, si le module nécessite un compte tiers, il doit être noté dans la description du modèle. Par exemple, si votre module utilise la plate-forme Google Maps, vous devez inclure une note : *« L'utilisation de ce module nécessite un compte Google Cloud (plateforme Google Maps). »*
## Champs de module
Consultez les conditions spécifiques pour les modules d'un thème et les modules indépendants ci-dessous :
* Pour les modules d'un thème :
* Ils doivent contenir du texte d'aide en ligne et un contenu par défaut spécifique pour certains champs.
* Au moins un [champ de logo](/docs/cms/reference/fields/module-theme-fields#logo) doit hériter des [paramètres de marque](/docs/cms/start-building/building-blocks/fields/brand-and-settings-inheritance) du compte. Si vous utilisez un champ d'image pour afficher un logo, le champ d'image n'a pas à hériter des paramètres de marque.
* Pour les modules d'un thème et des modules indépendants :
* Les noms des champs du module doivent décrire l'intention du champ. Par exemple, si un champ de texte est destiné à inclure l'intitulé du poste d'une personne, *Intitulé de poste* serait une description appropriée alors que *Intitulé* ne le serait pas.
* Tous les modules par défaut de HubSpot doivent être stylisés et doivent s'afficher correctement sur tous les modèles soumis.
### Configuration des fichiers fields.json et module.html
Pour garantir une fonctionnalité compatible entre les thèmes et les modules indépendants, les modules doivent [hériter](/docs/cms/reference/fields/overview#inherited-fields) des champs de couleur et de police en définissant `default_value_path` ou `property_value_paths`, ou les deux dans leurs fichiers `fields.json` et ajouter une référence aux champs du thème dans le fichier `module.html`. [Découvrez-en davantage sur ces exigences.](https://developers.hubspot.com/docs#module-compatibility-with-themes)
## Qualité du code du module
### Les modules doivent être autonomes
#### Modules de thème
Tous les fichiers nécessaires à votre module de thème, tels que CSS ou JavaScript, doivent être contenus dans le dossier du thème et inclus dans le répertoire du thème. Vous pouvez utiliser la fonction de fichier lié dans le gestionnaire de conception. Autrement, vous pouvez inclure les fichiers en utilisant les fonctions [require\_js()](/docs/cms/reference/hubl/functions#require-js) ou [require\_css()](/docs/cms/reference/hubl/functions#require-css) avec un chemin relatif vers le fichier.
Pour les bibliothèques courantes, telles que slick.js, vous pouvez les inclure à l'aide des fonctions `require_js()` ou `require_css()` avec une URL absolue vers le réseau de diffusion de contenu où ils sont hébergés.
N'utilisez pas d'URL absolues pour les ressources contenues dans votre portail de développement, car les références entre les portails ne seront pas résolues.
#### Modules indépendants
Pour les modules indépendants, tous les fichiers CSS et JavaScript doivent être contenus dans `module.css` ou `module.js`. Vous pouvez également inclure les fichiers à l'aide des fonctions `require_js()` ou `require_css()` avec une URL absolue vers le réseau de diffusion de contenu où ils sont hébergés. Il n'est pas possible d'utiliser la fonctionnalité de fichier lié dans le gestionnaire de conception, car elle n'est disponible que pour les modules de thème.
Étant donné que `module.js` est inclus dans le DOM avant tout fichier `require_js` ou `require_css`, le JavaScript contenu dans la section `module.js` doit être différé à l'aide de l'annotation ci-dessous :
```js theme={null}
document.addEventListener("DOMContentLoaded", function () {
// Put Javascript here
});
```
Tous les scripts et fichiers doivent être rendus dans l'en-tête du [HTML](/docs/cms/reference/hubl/functions#require-js) du module.
### Restrictions de code pour les modules indépendants
Les restrictions suivantes s'appliquent uniquement aux modules indépendants :
* Il est recommandé d'utiliser [Vanilla JS](http://vanilla-js.com/) dans la mesure du possible. L'ajout d'une bibliothèque jQuery à un site qui n'utilise pas jQuery peut potentiellement provoquer des conflits et ralentir la page du site Web.
* Si vous utilisez une bibliothèque jQuery, utilisez la fonction [require\_js()](/docs/cms/reference/hubl/functions#require-js) pour inclure la bibliothèque si jQuery est désactivé avec la case à cocher (booléen) dans les paramètres du compte afin d'éviter les conflits provenant de plusieurs bibliothèques jQuery.
```js theme={null}
{% if not site_settings.include_jquery %}
{{ require_js("https://code.jquery.com/jquery-3.7.0.min.js", "footer") }}
{% endif %}
```
### Catégories
* Tous les modules indépendants doivent avoir au moins une catégorie. Il n'est pas obligatoire d'inclure des catégories pour les modules soumis dans le cadre d'un thème, mais il est recommandé d'en inclure au moins une. Découvrez-en davantage sur l'[ajout de catégories à des modules](/docs/cms/reference/modules/configuration).
### Sélecteurs de nom de classe
* Tout sélecteur de nom de classe doit être précédé du nom du module, en remplaçant les espaces par des traits d'union. Par exemple, ci-dessous se trouve le fichier `module.html` d'un bouton intitulé `example-button`, avec chaque nom de classe et sélecteur CSS reflétant son nom.
```hubl theme={null}
{% end_require_css %}
{##### Module HTML #####}
```
### Styles et JavaScript
* Styles :
* Les modules ne doivent pas avoir de groupe de style vide.
* Le codage en dur des styles en ligne dans les modules est déconseillé. Au lieu de cela, utilisez des styles en ligne dynamiques en activant les champs pour contrôler le style.
* JavaScript :
* JavaScript doit pouvoir représenter plusieurs instances d'un module. JavaScript dans JS Pane ne sera chargé qu'une fois par page, quel que soit le nombre d'occurrences de modules.
* JavaScript doit référencer les éléments DOM par des noms de classe spécifiques pour garantir que les éléments extérieurs au module ne sont pas affectés par inadvertance.
Lors de la création de modules, vous pouvez utiliser une variable intégrée appelée `{{name}}`. Cette variable extrait l'ID d'instance du module (qui peut être utilisé dans le panneau HTML+HubL uniquement) pour favoriser le balisage CSS et JS pour les modules complexes. [Découvrez-en davantage à ce sujet dans la documentation des développeurs.](/docs/cms/reference/modules/files#require-css-block)
## Organisation des champs
Les exigences suivantes en matière d'organisation et de regroupement des champs doivent être respectées.
### Onglet Contenu
* Lorsqu'il y a au moins un contrôle au sein d'un groupe de champs, tous les contrôles doivent être regroupés en catégories libellées selon leur fonction.
* Les champs de module ajoutés à l'onglet *Contenu* doivent permettre de personnaliser le contenu d'un module. Par exemple, les contrôles d'image, d'icône, de texte alternatif et de lien.
### Onglet Styles
Les groupes de champs de style de module doivent être cohérents et suivre un modèle. Découvrez ci-dessous l'ordre recommandé pour vos groupes de champs de style. Ces groupes peuvent être soit au niveau supérieur, soit [imbriqués dans un groupe](#multi-level-grouping). Les groupes vides peuvent également être supprimés :
* [Préréglages](#presets)
* Texte
* Arrière-plan
* Bordure
* Curseur
* Angle
* Espacement
* Alignement
* Groupes de styles personnalisés qui ne correspondent pas à ce qui précède
* Avancé
Les types de champs suivants doivent être contenus dans l'onglet *Styles*, le cas échéant :
* [Alignement](/docs/cms/reference/fields/module-theme-fields#alignment)
* [Image d'arrière-plan](/docs/cms/reference/fields/module-theme-fields#background-image)
* [Bordure](/docs/cms/reference/fields/module-theme-fields#border)
* [Couleur](/docs/cms/reference/fields/module-theme-fields#color)
* [Police](/docs/cms/reference/fields/module-theme-fields#font)
* [Dégradé](/docs/cms/reference/fields/module-theme-fields#gradient)
* [Espacement](/docs/cms/reference/fields/module-theme-fields#spacing)
* [Alignement du texte](/docs/cms/reference/fields/module-theme-fields#text-alignment)
Lorsque vous déplacez des champs de l'onglet *Contenu* vers l'onglet *Styles*, découvrez comment [utiliser le mappage d'alias](/docs/cms/start-building/building-blocks/fields/alias-mapping) pour préserver le style des modules déjà utilisés sur les pages en direct.
* Les options d'animation doivent toujours être positionnées à la fin de la liste des groupes de champs.
* Les options qui permettent aux créateurs de contenu d'ajouter des extraits de code ou des CSS doivent être regroupées à la fin de la liste des groupes de champs sous un champ intitulé *Avancé*.
* Les contrôles doivent être uniformisés dans tous les modules. Par exemple, tous les éléments qui peuvent avoir un contrôle de rayon de bordure doivent proposer ce contrôle. Évitez de proposer des contrôles sur des modules qui sont absents sur d'autres.
* Les champs de module ajoutés à l'onglet *Style* doivent permettre de styliser le module. Par exemple :
* Les options de style incluent la couleur, le style de texte, l'alignement, l'espacement, la bordure et le rayon d'angle.
* Les animations incluent des effets au survol et concernant les diapositives.
* Les préréglages incluent des thèmes sombres et clairs qui sont destinés à changer de nombreux styles en même temps.
### Exemples d'organisation des champs
#### Préréglages
Les préréglages peuvent être utilisés lorsque vous souhaitez donner aux créateurs de contenu un ensemble limité d'options, souvent liées aux paramètres du thème. Par exemple, le module *Icône* inclus dans le thème Growth contient des préréglages pour les couleurs *Dark* et *Light*, ce qui permet une cohérence lorsqu'il est utilisé sur le site web.
#### Regroupement multi-niveaux
Lorsque vous décidez de garder les champs de style au niveau supérieur ou de les imbriquer, tenez compte de l'exemple suivant.
Le module *Icône* inclus dans le thème Growth répertorie tous ses styles au niveau supérieur, car il s'agit d'un composant unique. Ses options de style ont donc toutes un impact sur le composant unique.
Le module *Carte d'intervenant* inclus dans le thème Growth contient plusieurs composants : l'image de la carte et son contenu textuel. Les styles de module sont donc regroupés par composant afin que le créateur de contenu dispose d'un processus plus clair pour le style de chaque composant.
#### Regroupement de champs individuels
Le module de bouton ci-dessous contient des groupes pour les *préréglages*, le *texte*, l'*arrière-plan* et plus encore. Bien que le groupe de champs *Angle* contienne uniquement le contrôle du rayon, il est toujours regroupé pour créer une expérience de création de contenu uniforme.
