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

Avec le gestionnaire de conception, vous pouvez créer des modules personnalisés 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 la page, l’e-mail ou l’éditeur de blog.

Remarque : La création de modules nécessite de connaître le langage HTML, CSS, HubL et le gestionnaire de conception de HubSpot. HubSpot recommande de travailler avec un développeur pour créer des modules codés.

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 Domaine de 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 ne peuvent être créés que dans les comptes disposant d’un abonnement Marketing Hub Pro ou Entreprise . Ils ne peuvent pas inclure de CSS ou de 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, vous pouvez ajouter ou mettre à jour un libellé pour un module afin d’aider les utilisateurs à l’identifier 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 à un 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 edit Modifier 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, vous pouvez ajouter du contenu par défaut qui apparaît lorsque le module sera utilisé dans les modèles et les é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’info-bulle ou dans le champ Texte d’aide en ligne .
   • Texte d’aide de l’info-bulle : ce texte apparaîtra dans une info-bulle 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 , vous pouvez utiliser 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 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 , vous pouvez configurer les options de répéteur pour les champs et les groupes. Lorsque les options de répéteur sont activées, plusieurs objets sont créés et affichés en bouclefor.

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 de 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.

Regrouper les champs de modules

Après avoir créé des champs, vous pouvez les regrouper pour que vos champs restent organisés par pertinence. Les groupes de champs peuvent être utilisés pour créer une logique de champ personnalisée. Vous pouvez regrouper 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 , vous pouvez ajouter un texte d’aide pour donner aux utilisateurs un contexte 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.

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, vous pouvez copier et coller l’bloc de texte prédéfini du champ 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. Passez le curseur de la souris sur un champ de module et cliquez sur le menu déroulant Actions dans la section Champs . Sélectionnez ensuite Copier le bloc de texte prédéfini. 
4. Dans l’éditeur de module, collez le champ bloc de texte prédéfini à l’emplacement souhaité dans la section module.html (HTML. + HubL). Vous pouvez utiliser le raccourci clavier Cmd+V ou Ctrl+V. 

Écrire la syntaxe du module

Lorsque vous modifiez votre module, vous pouvez écrire la syntaxe du module dans les sections module.html (HTML + HubL), module.css et éditeur de module 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, vous pouvez prévisualiser et publier 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, vous pouvez l’utiliser sur 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 dragHandleIcon glisser-déposer et déplacez le module à sa place dans l’éditeur de mise en page.
4. Pour ajouter un module à un modèle codé personnalisé :
   •  Faites 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 module.html (HTML + HubL) :

<!-- Hidden span to store the target date -->
<span id="target-date" style="display: none;"></span>

<!-- Display countdown timer -->
<div style="float: left; width: 100%; color: ;">
 <div class="time_container" style="margin-left: 30%;">
 <span id="days"></span><br>
Jours,
 </div>

<br>
Heures,
 </div>
<span id="minutes"></span><div class="time_container"><br>
Minutes, Secondes
 </div>
<div class="time_container">
<br>

 </div>
<span id="seconds"></span> </div>
<div class="time_container"><span id="hours"></span>     

4. Copiez et collez le code suivant dans la section module.css :

.time_container {
float : left ;
largeur : 10 % ;
text-align : center ;
}
. time_container span {
font-weight : bold ;
font-size : 200 %;
}

5. Copiez et collez le code suivant dans la section module.js :

Fonction pour calculer et afficher le compte à rebours
fonction updateCountdown() {
Obtenir la date cible de la span
masquée const targetDate = new Date(document.getElementById('target-date').textContent) ;
Obtenir la date
actuelle const currentDate = new Date() ;
Calcule le temps restant (en millisecondes)
const timeRemaining = targetDate - currentDate ;
Vérifiez si la date cible est dépassée
si (timeRemaining <= 0) { document.getElementById('countdown').innerText = 'Compte à rebours expiré' ;
rendre;
}
Calculer les jours, heures, minutes et secondes
restants const days = Math.floor(timeRemaining / (1000 * 60 * 60 * 24)) ;
const hours = Math.floor((timeRemaining % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)) ;
const minutes = Math.floor((timeRemaining % (1000 * 60 * 60)) / (1000 * 60)) ;
const seconds = Math.floor((timeRemaining % (1000 * 60)) / 1000) ;
Afficher le compte à rebours
document.getElementById('days').innerText = '${days}' ;
document.getElementById('hours').innerText = '${hours}' ;
document.getElementById('minutes').innerText = '${minutes}' ;
document.getElementById('seconds').innerText = '${seconds}' ;
}
Mettre à jour le compte à rebours toutes les secondes
setInterval(updateCountdown, 1000) ;
Appel initial pour mettre à jour le compte à rebours immédiatement
updateCountdown() ;

6. Lorsque vous avez terminé, prévisualisez et publiez le module.
7. Continuez d’ajouter le module à un modèle.