Configurer un module
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, 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, tandis que les champs sont configurés séparément dans un fichier fields.json.
La plupart des configurations peuvent également être modifiées à l'aide de l'éditeur de module dans le gestionnaire de conception.
À 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 | |
css_assets
| Tableau | Un tableau Par exemple : |
[]
|
css_render_options
| Objet | Définissez si le module CSS est restitué de manière asynchrone avec |
{"async": false}
|
js_assets
| Tableau | Un tableau Par exemple : |
[]
|
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. |
null
|
master_language
| Chaîne | Lorsque les traductions sont activées, le code de la langue dans laquelle les champs du module ont été écrits à l'origine. Par exemple, | |
placeholder
| Objet | Définit le contenu de variable pour le module. Comprend les propriétés suivantes :
| |
categories
| Tableau | Un tableau contenant jusqu'à trois catégories de module. Par exemple : "categories":["FORMS_AND_BUTTONS"] | |
content_tags
| Tableau | Un tableau d'objets de balise de module contenant le nom de balise et la Par exemple : "content_tags": [{ "name" : "BUTTONS", "source" : "USER" }] |
Ci-dessous, découvrez-en davantage sur les options de configuration des modules individuels.
Les modules peuvent inclure une icône qui apparaît dans le gestionnaire de conception 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, ces icônes sont obligatoires.
Il y a deux façons d'ajouter une icône : via le gestionnaire de conception ou l'ILC CMS.
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 :
-
In your HubSpot account, navigate to Marketing > Files and Templates > Design Tools.
- Use the left sidebar to locate the module you want to edit, then click the module name.
- In the right sidebar of the module editor, click the icon next to the module title.
- Upload/select your icon. After publishing your changes, the icon will appear within the page editors and design manager.
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.
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.
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 via le gestionnaire de conception.
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. 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.
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
.
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.
Vous pouvez affecter des catégories et des balises aux modules pour les organiser dans les outils HubSpot :
- Catégories : 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 : 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.
Localement, vous pouvez ajouter des catégories et des balises au fichier meta.json
d'un module comme suit :
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. |
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
Merci d'avoir partagé votre avis.