Créer et modifier des modules dans le gestionnaire de conception

Créez des modules personnalisés dans le gestionnaire de conception pour ajouter des fonctionnalités avancées à votre blog, à vos pages ou à vos e-mails. Les modules personnalisés offrent un large éventail de fonctionnalités afin que le contenu puisse être entièrement personnalisé dans l'éditeur de page, d'e-mail ou de blog.

Avant de commencer

Avant de commencer à créer ou à modifier des modules personnalisés dans le gestionnaire de conception, examinez les exigences et les considérations associées. 

Compréhension des limites et des considérations

• Si vous n’êtes pas familier avec HTML, HubL et CSS, il est recommandé de travailler avec un développeur pour créer des modules dans le gestionnaire de conception.

Créer un module

1. Dans votre compte HubSpot, accédez à Contenu > Gestionnaire de conception.
2. En haut de l’outil de recherche, cliquez sur le menu déroulant Fichier et sélectionnez Nouveau fichier.

3. Dans la boîte de dialogue, cliquez sur le menu déroulant Que souhaiteriez-vous créer aujourd'hui ? et sélectionnez Module.
4. Cliquez sur Suivant.
5. Dans le champ Où souhaitez-vous utiliser ce module, sélectionnez la case à cocher à côté de chaque type de contenu où votre module sera utilisé (par exemple, Articles de blog, E-mails ou Pages de destination). 
6. Dans le champ Portée du contenu du module, sélectionnez une option (par exemple,Module local ou Module global). Si vous créez un module global, la modification du contenu de ce module actualisera chaque emplacement où le module est utilisé. 
7. Saisissez un nom de fichier pour le module.
8. Pour modifier l'emplacement du fichier du module, cliquez sur Modifier dans la section Emplacement du fichier. Dans la boîte contextuelle, sélectionnez un nouvel emplacement, puis cliquez sur Sélectionner.
9. Lorsque vous avez terminé, cliquez sur Créer.
10. Continuez à modifier le module.

Remarque : Les modules utilisés dans les e-mails n’incluent pas CSS ou JavaScript. 

Modifier un module

Après avoir créé un module dans le gestionnaire de conception, vous pouvez personnaliser sa fonctionnalité et son apparence. Nommez le module pour plus de clarté, ajoutez et configurez des champs et ajustez les options de l'éditeur de champs telles que le contenu par défaut. Définissez les conditions d'affichage et les options de répéteur, puis regroupez les champs associés pour une meilleure organisation. Vous pouvez également copier et coller des blocs de texte prédéfinis, écrire une syntaxe de module personnalisée, ajouter du texte pédagogique utile et modifier les types de modèles avec lesquels votre module peut être utilisé.

Ajouter un libellé à un module

Dans le gestionnaire de conception, ajoutez ou mettez à jour un libellé pour un module afin d’aider les utilisateurs à le trouver dans l’éditeur de contenu. Si le libellé est vide, le nom du module sera affiché par défaut.

1. Dans votre compte HubSpot, accédez à Contenu > Gestionnaire de conception.
2. Dans l’outil de recherche, cliquez pour ouvrir un module dont vous souhaitez modifier le libellé.
3. Dans l'inspecteur, saisissez un libellé.

Ajouter des champs au module

Ajoutez des champs à un module pour définir son contenu ou son style et le rendre modifiable dans l'éditeur de contenu. Découvrez-en davantage sur les types de champs disponibles. 

1. Dans votre compte HubSpot, accédez à Contenu > Gestionnaire de conception.
2. Dans l’outil de recherche, cliquez pour ouvrir un module.
3. Dans l'inspecteur, dans la section Champs, cliquez sur le menu déroulant Ajouter un champ. Sélectionnez ensuite un champ à ajouter au module.

4. Pour modifier le nom du champ, cliquez sur l'icône Modifier edit et saisissez un nouveau nom. Pour modifier le nom de la variable HubL, saisissez un nouveau nom dans le champ Nom de la variable HubL. 

Personnaliser le contenu par défaut du champ

Dans la section Options de contenu, ajoutez du contenu par défaut qui apparaît lorsque le module est utilisé dans des modèles et des éditeurs de contenu. Les options de contenu par défaut varient selon le type de champ.

1. Dans votre compte HubSpot, accédez à Contenu > Gestionnaire de conception.
2. Dans l’outil de recherche, cliquez pour ouvrir un module.
3. Dans l'inspecteur, dans la section Champs, passez le curseur sur un champ et cliquez sur Modifier.
4. Dans la section Options de contenu, ajoutez ou modifiez des options de contenu par défaut. Les options de contenu par défaut disponibles dépendent du type de champ sélectionné.

Par exemple, en ajoutant un type de champ Date et heure à un module, vous pouvez sélectionner une date et une heure par défaut. Vous pouvez également saisir un intervalle de temps par défaut.

Définir les options de l'éditeur de champ

Dans la section Options de l'éditeur, vous pouvez rendre un champ obligatoire et empêcher la modification dans l'éditeur de contenu. Vous pouvez également personnaliser le texte d'aide. 

1. Dans votre compte HubSpot, accédez à Contenu > Gestionnaire de conception.
2. Dans l’outil de recherche, cliquez pour ouvrir un module.
3. Dans l'inspecteur, dans la section Champs, passez le curseur sur un champ et cliquez sur Modifier.
4. Dans la section Options de l'éditeur, pour rendre le champ obligatoire, activez l'option Rendre ce champ obligatoire. Cela empêchera les utilisateurs de laisser le champ vide dans l'éditeur de contenu.
5. Pour empêcher la modification du contenu d'un champ, activez l'option Empêcher la modification dans les éditeurs de contenu. Le contenu du champ peut toujours être personnalisé dans le gestionnaire de conception au niveau du modèle. Cette option n'est pas disponible pour les modules globaux.
6. Pour ajouter du contexte ou des instructions sur la façon d'utiliser le champ, saisissez du texte dans le champ Texte d'aide de l'infobulle ou dans le champ Texte d'aide en ligne.
   • Texte d'aide de l'infobulle : ce texte apparaîtra dans une infobulle lorsqu'un utilisateur survolera l'icône d'information infoCircleIcon dans l'éditeur de contenu.
   • Texte d'aide en ligne : ce texte apparaîtra en dessous du champ lorsqu'un utilisateur modifiera le module dans l'éditeur de contenu.

Définir les conditions d'affichage du champ

Dans la section Conditions d’affichage , utilisez les conditions d’affichage de champ pour définir un champ de module afin qu’il n’apparaisse que si un autre champ répond à certains critères.

1. Dans votre compte HubSpot, accédez à Contenu > Gestionnaire de conception.
2. Dans l’outil de recherche, cliquez pour ouvrir un module.
3. Dans l'inspecteur, dans la section Champs, passez le curseur sur un champ et cliquez sur Modifier.
4. Dans la section Conditions d'affichage, cliquez sur le menu déroulant Variable HubL et sélectionnez une variable. 
5. Cliquez sur le deuxième menu déroulant et sélectionnez une option (par exemple, Est égal à ou N'est pas vide). D'autres champs de condition peuvent être nécessaires, selon l'option sélectionnée. Par exemple, si vous sélectionnez Est égal à, un champ de valeur supplémentaire est obligatoire.
6. Par défaut, les conditions d'affichage sont automatiquement activées une fois qu'une condition est configurée. Pour désactiver les conditions d'affichage, désactivez l'option Conditions d'affichage.

Définir les options de répéteur de champ

Dans la section Options de répéteur , découvrez les options de répéteur pour les champs et les groupes. Lorsque les options du répéteur sont activées, plusieurs objets sont créés et affichés via une boucle for.

1. Dans votre compte HubSpot, accédez à Contenu > Gestionnaire de conception.
2. Dans l’outil de recherche, cliquez pour ouvrir un module.
3. Dans l'inspecteur, dans la section Champs, passez le curseur sur un champ et cliquez sur Modifier.
4. Dans la section Options du répéteur, saisissez un nombre dans les champs Minimum et Maximum (facultatif). Cela définira le nombre minimum de fois où le champ apparaîtra dans le module, jusqu'à la valeur maximale. 
5. Pour définir le nombre de fois qu'un champ doit s'afficher par défaut, saisissez un nombre dans le champ Nombre d'objets par défaut.
6. Par défaut, les options de répéteur sont automatiquement activées une fois configurées. Pour désactiver les options de répéteur, désactivez l'option Options du répéteur.

Par exemple, les options de répéteur d'un champ d'image sont modifiées pour afficher au moins trois et jusqu'à cinq champs d'image. Une valeur de quatre champs d'image est configurée par défaut. Dans l'éditeur de contenu, un utilisateur verra quatre champs d'image par défaut et pourra ajouter un champ d'image supplémentaire ou supprimer un champ d'image existant.

Grouper des champs de module

Après avoir créé des champs, regroupez-les pour les organiser par pertinence. Les groupes de champs peuvent être utilisés pour créer une logique de champ personnalisée. Regroupez jusqu’à quatre champs. Découvrez-en davantage sur les groupes de champs de module. 

1. Dans votre compte HubSpot, accédez à Contenu > Gestionnaire de conception.
2. Dans l’outil de recherche, cliquez pour ouvrir un module.
3. Dans l'inspecteur, dans la section Champs, cliquez sur le menu déroulant Actions et sélectionnez Groupe.
4. Sélectionnez un ou plusieurs champs à regrouper, puis cliquez sur Créer un groupe.

Ajouter un texte d'aide à votre module

Dans la section Options de l'éditeur, ajoutez le texte d'aide pour donner du contexte aux utilisateurs lors de la modification du module. Ce texte s’affichera au-dessus des champs de votre module. 

1. Dans votre compte HubSpot, accédez à Contenu > Gestionnaire de conception.
2. Dans l’outil de recherche, cliquez pour ouvrir un module.
3. Dans l'inspecteur, dans la section Options de l'éditeur, saisissez du texte dans le champ Texte d'aide en ligne.

Gérer les types de contenu et la disponibilité pour un module

Ajoutez ou supprimez les types de contenu pour lesquels les utilisateurs peuvent utiliser un module, comme les articles de blog ou les pages de destination. Vous pouvez également activer ou désactiver la disponibilité d'un module dans les modèles et les pages.

1. Dans votre compte HubSpot, accédez à Contenu > Gestionnaire de conception.
2. Dans l’outil de recherche, cliquez pour ouvrir un module.
3. Pour modifier les types de contenu d'un module, cliquez sur les types de contenu sous le nom du module dans l'inspecteur en haut à droite.

1. • Dans la boîte de dialogue, sélectionnez ou désélectionnez la case à cocher à côté de chaque type de contenu où votre module sera ou ne sera pas utilisé (par exemple, Articles de blog, E-mails ou Pages de destination). 
   • Lorsque vous avez terminé, cliquez sur Mettre à jour la catégorie.

4. Pour gérer la disponibilité d'un module dans les modèles ou les pages, activez l'option Rendre disponible pour les modèles et les pages en haut à droite. Pour tester la fonctionnalité du module ou désactiver la disponibilité dans les modèles et les pages, désactivez l'option Rendre disponible pour les modèles et les pages. 

Remarque : L'activation de l'option Rendre disponible pour les modèles ou les pages ne supprimera pas le module des modèles ou des pages existants.

Copier et coller des blocs de texte prédéfinis

Lorsque vous incorporez un champ dans un module, copiez et collez-le bloc de texte prédéfini dans la section module.html (HTML + HubL) de l’éditeur de module.

1. Dans votre compte HubSpot, accédez à Contenu > Gestionnaire de conception.
2. Dans l’outil de recherche, cliquez pour ouvrir un module.
3. Dans l'inspecteur, survolez un champ de module et cliquez sur le menu déroulant Actions dans la section Champs. Puis, sélectionnez Copier le bloc de texte. 
4. Dans l'éditeur de module, collez le bloc de texte prédéfini du champ à l'emplacement souhaité dans la section module.html (HTML. + HubL). Vous pouvez utiliser le raccourci clavier Cmd+V ou Ctrl+V. 

Rédiger la syntaxe du module

Lorsque vous modifiez votre module, écrivez la syntaxe dans l’éditeur de module pour les sections module.html (HTML + HubL), module.css et module.js. Découvrez-en davantage sur l'éditeur de module et la vue d'ensemble des modules.

Prévisualiser et publier un module

Une fois que vous avez terminé de modifier un module, y compris l’ajout de champs et l’écriture de la syntaxe du module, prévisualisez et publiez le module. 

1. Dans votre compte HubSpot, accédez à Contenu > Gestionnaire de conception.
2. Dans l’outil de recherche, cliquez pour ouvrir un module.
3. Pour prévisualiser un module, cliquez sur Aperçu dans l'angle supérieur droit. Vous serez dirigé vers un nouvel onglet de navigateur pour prévisualiser le module. Cet aperçu est synchronisé avec l'éditeur de module et sera automatiquement actualisé au fur et à mesure des modifications.
4. Pour publier un module, cliquez sur Publier les modifications. 

Ajouter un module à un modèle

Après avoir publié un module, utilisez-le dans tous les modèles en l’ajoutant à un modèle glisser-déposer ou à un modèle codé personnalisé dans le gestionnaire de conception. Pour ajouter des modules dans l'éditeur de contenu, découvrez-en davantage sur l'ajout et la modification de modules dans l'éditeur de contenu.

1. Dans votre compte HubSpot, accédez à Contenu > Gestionnaire de conception.
2. Dans l’outil de recherche, cliquez pour ouvrir un modèle.
3. Pour ajouter un module à un modèle de glisser-déposer dans l'éditeur de mise en page, cliquez sur l'onglet + Ajouter en haut de l'inspecteur.
   • Dans le champ Rechercher, saisissez le nom du module. Pour affiner votre recherche aux modules personnalisés, cliquez sur le menu déroulant Filtrer par catégorie ou balises et sélectionnez Modules personnalisés.
   • Cliquez sur l'icône de glisser-déposer dragHandleIcon et déplacez le module vers la position souhaitée dans l'éditeur de mise en page.
4. Pour ajouter un module à un modèle codé personnalisé :
   •  Effectuez un clic droit ou Ctrl+clic sur le module dans l'outil de recherche, puis sélectionnez Copier le bloc de texte prédéfini . Vous pouvez également cliquer pour ouvrir le module, puis dans la section Utilisation du modèle de l'inspecteur, cliquez sur Copier le bloc de texte prédéfini.
   • Dans le modèle codé personnalisé, collez le bloc de texte prédéfini dans l'éditeur de code.
5. Lorsque vous avez terminé, cliquez sur Publier les modifications dans l'angle supérieur droit.

Exemple : créer un module de compte à rebours

1. Créez un module dans le gestionnaire de conception et nommez-le « Compte à rebours ».
2. Dans l'inspecteur, dans la section Champ, cliquez sur le menu déroulant Ajouter un champ.

• • Sélectionnez le champ Date et heure. Saisissez le nom « Date et heure de l'événement ». Le champ de nom de variable HubL sera mis à jour sur event_date_and_time.

• • Sélectionnez le champ Couleur. Saisissez le nom « Couleur de police de la minuterie ». Le champ de nom de variable HubL sera mis à jour sur timer_font_color.

Remarque : Les noms de variables HubL doivent correspondre aux noms de variables inclus dans la section de code module.html (HTML + HubL) ci-dessous.

3. Dans l’éditeur de module, copiez et collez le code suivant dans la section appropriée :

4. Lorsque vous avez terminé, prévisualisez et publiez le module.
5. Continuez d'ajouter le module à un modèle.