> ## 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. # Configurer un module > Découvrez comment configurer un module personnalisé.
Lorsque vous créez un module, vous disposez d'un certain nombre d'options qui ont un impact sur l'endroit où le module est visible, la façon dont il est identifié et la façon dont il est modifié. Lors du [développement local](/docs/developer-tooling/local-development/hubspot-cli/install-the-cli), les modules sont stockés sous forme de dossiers avec un suffixe `.module`. Ces dossiers contiennent les fichiers qui constituent les paramètres du module et le code utilisé pour le restituer. La configuration d'un module est conservée dans le fichier [meta.json](#meta-json), tandis que les champs sont configurés séparément dans un fichier [fields.json](https://developers.hubspot.fr/docs/guides/cms/content/modules/overview#fields-json). La plupart des configurations peuvent également être modifiées à l'aide de l'éditeur de module dans le [gestionnaire de conception](/docs/cms/start-building/introduction/developer-environment/design-manager).
Structure du dossier du module affichée localement À un niveau élevé, vous configurez les options de module localement dans le fichier `meta.json`, qui peut inclure les propriétés suivantes : | Parameter | Type | Description | Default | | ------------------------------ | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | | `icon` | Chaîne | URL d'une image à utiliser comme icône pour un module. | | | `label` | Chaîne | Label utilisé lorsque les modules sont affichés dans les éditeurs de contenu. | | | `module_id` | Nombre | Identifiant unique pour le module qui est indépendant du chemin. | | | `is_available_for_new_content` | Booléen | La valeur du bouton à bascule dans l'angle supérieur droit de l'éditeur de module dans HubSpot. Détermine si le module peut être utilisé dans le contenu. | `true` | | `global` | Booléen | Indique si le module est global ou non. | `false` | | `host_template_types` | Tableau | Un tableau `array` des types de contenu dans lesquels le module peut être utilisé. Un ou plusieurs des éléments `[ "PAGE", "BLOG_POST", "BLOG_LISTING", "EMAIL" ]`. | | | `css_assets` | Tableau | Un tableau `array` des fichiers CSS dont dépend le module. Les chemins relatifs sont pris en charge.Par exemple : `"css_assets" : [{ "path" : "../path/to/file.css" }]`. | `[]` | | `css_render_options` | Objet | Définissez si le module CSS est restitué de manière asynchrone avec `async` : `true` ou `false`. | `{"async": false}` | | `js_assets` | Tableau | Un tableau `array` des fichiers JavaScript dont dépend le module. Les chemins relatifs sont pris en charge.Par exemple : `"js_assets" : [{ "path" : "../path/to/file.js" }]`. | `[]` | | `js_render_options` | Objet | Modifie la balise JavaScript du module ajoutée à la page restituée. Les options comprennent : | `{"position":"footer"}` | | `inline_help_text` | Chaîne | Texte d'aide qui sera affiché en haut du module dans une boîte d'information bleue (limite de 300 caractères).Fournit les informations nécessaires à l'utilisation du module. Si vous avez des informations de texte d'aide spécifiques au champ à transmettre, reportez-vous à la [documentation sur le champ de texte d'aide](/docs/cms/reference/fields/module-theme-fields#properties-used-by-all-fields). | `null` | | `master_language` | Chaîne | Lorsque les [traductions sont activées](https://knowledge.hubspot.com/design-manager/create-translations-of-your-modules#:~:text=To%20create%20translations%20of%20a,the%20right%2C%20click%20Add%20translations.), le code de la langue dans laquelle les champs du module ont été écrits à l'origine.Par exemple, `en`. | | | `placeholder` | Objet | Définit le [contenu de variable](/docs/cms/reference/hubl/tags/standard-tags#editor-placeholders) pour le module. Comprend les propriétés suivantes : | | | `categories` | Tableau | Un tableau contenant jusqu'à trois [catégories de module](#add-categories).Par exemple : `"categories":["FORMS_AND_BUTTONS"]` | | | `content_tags` | Tableau | Un tableau d'[objets de balise de module](#adding-categories-and-tags) contenant le nom de balise et la `source` de `"USER"`.Par exemple : `"content_tags": [{` `"name" : "BUTTONS",` `"source" : "USER"``}]` | | Ci-dessous, découvrez-en davantage sur les options de configuration des modules individuels. ## Ajout d'une icône Les modules peuvent inclure une icône qui apparaît dans le [gestionnaire de conception](/docs/cms/start-building/introduction/developer-environment/design-manager) ainsi que dans les éditeurs de page et d'e-mail pour fournir un contexte visuel aux créateurs de contenu. Il est recommandé d'avoir différentes icônes pour les différents types de module de votre thème. [Pour les fournisseurs de marketplace](/docs/cms/marketplace/template-guidelines), ces icônes sont obligatoires. Il y a deux façons d'ajouter une icône : via le [gestionnaire de conception](#add-an-icon-using-the-design-manager) ou l'[ILC CMS](#add-an-icon-using-the-cli). Les icônes de module doivent être des fichiers `.svg` et leur taille ne doit pas dépasser 10 ko. Pour de meilleurs résultats, votre icône doit être simple et n'utiliser qu'une seule couleur. Les icônes qui utilisent plus d'une couleur seront automatiquement converties pour vous. L'icône du module qui s'affiche par défaut est une icône de clé à molette et de pinceau. Pour ajouter une icône à l'aide du gestionnaire de conception :
1. In your HubSpot account, navigate to **Marketing** > **Files and Templates** > **Design Tools**. 2. Use the left sidebar to locate the **module** you want to edit, then click the **module name**. 3. In the right sidebar of the module editor, click the **icon** next to the module title. 4. Upload/select your icon. After publishing your changes, the icon will appear within the page editors and design manager.
edit-module-icon-crop Pour ajouter une icône lors du développement local, ouvrez le fichier `meta.json` du module et ajoutez ou modifiez la valeur du paramètre `icon` pour qu'il soit au format SVG à partir du gestionnaire de fichiers. ```json theme={null} // meta.json { "global": false, "host_template_types": ["PAGE"], "icon": "http://example.com/hubfs/code.svg", "label": "Code block", "smart_type": "NOT_SMART", "is_available_for_new_content": true, "inline_help_text": "This module is for code snippets." } ``` ## Modification du libellé
Le libellé utilisé lorsque les modules sont affichés dans l'éditeur peut être modifié séparément du nom du module. Cela est utile lors du développement local, car vous pouvez avoir un nom qui a du sens pour vous tout en ayant un nom différent pour les créateurs de contenu. Localement, vous modifiez le paramètre `label` pour définir le libellé. Dans le gestionnaire de conception, un champ dans l'éditeur de module est présent en dessous du nom du module.
edit-module-label ## Transformer en module global Pour les modules normaux, le contenu de chaque instance d'un module dans une page, un e-mail ou un modèle est indépendant. Pour certains cas d'utilisation, il est utile de pouvoir faire en sorte que toutes les instances d'un module partagent le même contenu. Lors du développement local, vous pouvez rendre un module global en définissant `global` sur `true`. Vous pouvez également [convertir des modules dans un modèle de glisser-déposer en global](https://knowledge.hubspot.com/design-manager/use-global-content-across-multiple-templates#create-new-global-content-in-the-design-manager:~:text=To%20convert%20an%20existing%20local%20module%20or%20group) via le gestionnaire de conception. ## Contrôle de l'endroit où un module peut être utilisé Lors du développement local, vous pouvez contrôler les types de contenu dans lesquels un module peut être utilisé via la propriété `hostTemplateTypes`. Découvrez-en davantage sur les [types de modèles disponibles](https://developers.hubspot.fr/docs/guides/cms/content/templates/overview#template-types). Il est également possible de masquer les modules afin qu'ils ne puissent pas être ajoutés directement aux pages en définissant la valeur `false` pour `is_available_for_new_content`. Par exemple, cela peut être utile pour les modules conçus pour les menus de navigation et la recherche. Vous pouvez mettre à jour cela dans le gestionnaire de conception en cliquant sur l'option **Type de modèle** dans la barre latérale droite. edit-module-template-type ## Ajout de dépendances CSS et JavaScript En plus de l'utilisation de `module.css` et `module.js` pour ajouter des éléments CSS et JavaScript qui seront ajoutés à toutes les pages qui incluent une instance de module, les dépendances qui sont partagées entre les modules peuvent être jointes à l'aide de `css_assets` et `js_assets`. Les chemins peuvent être absolus ou relatifs au fichier `meta.json`. ```json theme={null} // meta.json { "css_assets": [{ "path": "../path/to/file.css" }], "js_assets": [{ "path": "../path/to/file.js" }] } ``` **Attention :** Lorsque vous utilisez des chemins relatifs pour référencer les dépendances, l'exécution de `hs fetch --overwrite` pour mettre à jour le module pour le développement local remplacera les chemins relatifs par des chemins absolus. À l'aide du gestionnaire de conception, vous pouvez lier des fichiers CSS et JavaScript à un module à l'aide de la section *Fichiers liés* dans la barre latérale droite de l'éditeur de module. edit-module-linked-files ## Ajouter des catégories et des balises Vous pouvez affecter des catégories et des balises aux modules pour les organiser dans les outils HubSpot : * [Catégories](#categories) : assignez des catégories à un module pour les organiser en groupes au sein de l'interface utilisateur de l'éditeur de contenu. Cela permet aux créateurs de contenu de trouver des modules plus facilement tout en créant du contenu dans HubSpot. Notez ce qui suit à propos des catégories : * Un module peut avoir jusqu'à trois catégories, qui sont prédéfinies et ne peuvent pas être personnalisées. * Actuellement, les catégories ne sont pas affichées dans l'interface utilisateur de l'éditeur de contenu. Cependant, vous pouvez attribuer des catégories lorsque la catégorisation est disponible dans les éditeurs. * Les modules non classés seront disponibles dans une catégorie *Tous*. * [Balises](#tags) : assignez des balises pour organiser les modules dans le gestionnaire de conception. Cela vous permet de trouver des modules plus facilement lors de la création de modèles. Dans le gestionnaire de conception, vous pouvez attribuer des catégories et des balises à l'aide de la section *Filtrer les balises* de la barre latérale droite dans l'éditeur de module. Découvrez-en davantage sur les catégories et les balises disponibles ci-dessous. edit-module-filter-tags Localement, vous pouvez ajouter des catégories et des balises au fichier `meta.json` d'un module comme suit : ```json theme={null} // meta.json { "label": "Custom module", "categories": ["image_and_video", "commerce"], "content_tags": [ { "name": "BUTTONS", "source": "USER" }, { "name": "CTA", "source": "USER" } ], "is_available_for_new_content": true } ``` ### Catégories Le tableau `categories` d'un module peut contenir jusqu'à trois des catégories suivantes (insensibles à la casse) : | Catégorie | Description | | ------------------- | ------------------------------------------------------------------------------------------------ | | `blog` | Modules spécifiques au blog, tels qu'un listing des publications récentes. | | `body_content` | Modules formatés pour présenter graphiquement le contenu, comme une galerie d'images. | | `commerce` | Modules spécifiques au domaine commercial, tels que les cartes de prix. | | `design` | Modules qui affectent la structure et la mise en page du contenu, tels que les accordéons. | | `functionality` | Modules qui incluent des réponses dynamiques ou un comportement sur la page, tels que des menus. | | `forms_and_buttons` | Modules qui permettent aux visiteurs du site de saisir et soumettre des données. | | `media` | Modules contenant des éléments tels que des images, des icônes, des vidéos et des bannières. | | `social` | Modules spécifiques aux réseaux sociaux, tels que le partage social. | | `text` | Modules qui ne contiennent que du texte. | ### Balises Le tableau `content_tags` d'un module peut contenir l'un des objets de balise de module suivants (sensible à la casse) : **Types de contenu :** * `ACCORDION` * `ANIMATION` * `BLOG_POST` * `BUTTONS` * `CODE` * `CTA` * `FEED` * `FORM` * `ICON` * `IMAGE` * `LISTS` * `LOGO` * `MENU` * `RICH_TEXT` * `SLIDER` * `TEXT` * `VIDEO` **Fonctions :** * `BANNER` * `BLOG` * `BRANDING` * `CALCULATOR` * `CONVERSION` * `email` * `GALLERY` * `HEADERS` * `INTERACTION` * `LAYOUT` * `MAP` * `MULTIMEDIA` * `NAVIGATION` * `PROGRESS_BAR` * `SEARCH` * `SETTINGS` * `social` * `TRANSLATION`