Créer et modifier des modules

Rédigé par HubSpot Support | 7 Jul 2020 à 4:00:00

Vous pouvez utiliser l'éditeur de module dans le gestionnaire de conception pour créer des modules pour ajouter des fonctionnalités personnalisées ou avancées à votre blog, page ou E-mail, tout en permettant aux marketeurs de personnaliser le contenu du module dans l'éditeur de contenu.

L'éditeur de module dispose de trois éléments d'édition pour HTML et HubL, CSS et JavaScript. Inclure les trois éléments vous permet d'utiliser les modules de manière constante dans différents portails que vous gérez ou sur plusieurs modèles. Exemples de ce que vous pouvez créer avec l'éditeur de module :

  • Galeries d’images ou diaporamas personnalisés
  • Liste d’événements
  • Une liste des employés contenant des photographies et des bios
  • Section permettant à l’utilisateur d'activer les classes CSS pour contrôler sa présentation

Note :la création de modules nécessite des connaissances sur le code HTML, CSS, HubL et le gestionnaire de conception de HubSpot. Il appartient à l'utilisateur d'inclure les feuilles de style nécessaires et les fichiers JavaScript pertinents dans n'importe quelle page à l'aide de modules créés personnalisés. Il est recommandé de travailler avec un designer pour créer des modules.

Créer un module

  • Depuis votre compte HubSpot, accédez à Marketing > Fichiers et modèles > Outils de conception.
  • En haut de la recherche, cliquez sur Fichier > Nouveau fichier.

  • Dans la boîte de dialogue qui s'affiche, cliquez sur Module.

  • Choisissez si vous souhaitez utiliser ce module dans les modèles de page, les modèles de blog et/ou les modèles d'e-mails.

Note : il existe des différences techniques entre ces types de modules qui les rendent incompatibles. Par exemple, CSS et JavaScript seront désactivés si vous sélectionnez des modèles d'e-mails pour la compatibilité des e-mails.

  • Sélectionnez si vous voulez que la portée du contenu du module soit un module local ou un module global. Si vous créez un module global, modifier le contenu de ce module actualisera chaque emplacement où le module est utilisé.
  • Donnez au module un nom de fichier, puis cliquez sur Créer.

Ajouter des champs à votre module

  • Dans l'inspecteur du module sur la droite, cliquez sur le champ Ajouter un champ  menu déroulant Dans la section Champs, sélectionnez un champ à ajouter à votre module.

  • Vous pouvez modifier le nom de votre champ en cliquant sur l'icône Crayon figurant à côté du nom du champ, ainsi qu'éditer le nom de la variable HubL.

Ajouter un contenu par défaut au champ

Dans la section Options du contenu, vous pouvez ajouter un contenu par défaut à votre champ. Ce contenu par défaut apparaîtra lorsque le module sera utilisé dans des modèles et des éditeurs de contenu et les options de contenu par défaut varieront selon le type de champ.

Dans l'exemple ci-dessous, le type de champ est un champ image, les options par défaut sont donc de sélectionner une image par défaut et de masquer les contrôles de taille.

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

Dans la section options de l'éditeur, vous pouvez activer les options suivantes :

  • Rendre ce champ obligatoire : l'utilisateur ne pourra pas laisser ce champ vide.
  • Évitez la modification dans les éditeurs de contenu: le contenu du champ ne peut être modifié par les utilisateurs finaux lorsque le module est sélectionné dans l'éditeur de contenu. Le contenu du champ est toujours modifiable au niveau du modèle. Cette option n'est pas disponible pour les modules globaux, qui ne peuvent être modifiés au niveau de la page.
  • Texte d'aide : ajouter un texte d'aide au champ pour donner aux utilisateurs du contexte ou des instructions.

Définir les conditions d'affichage du champ

Vous souhaitez afficher un champ uniquement à un utilisateur uniquement si un autre champ répond à certains critères.

  • Dans la section Conditions d'affichage, cliquez sur la variable HubL  menu déroulant  menu pour sélectionner un champ de module, puis cliquez sur le menu déroulant n'est pas vide pour choisir la condition de ce champ.
  • Si vous sélectionnez la condition est égal à, saisissez une valeur ou un équivalent.

Dans l'exemple ci-dessous, les conditions d'affichage sont fixées pour un champ image. La condition est que la valeur dans image_titre (un champ texte) doit être égale à Photographie afin que le champ image apparaisse dans le module.

Les conditions d'affichage seront automatiquement activées une fois que vous avez défini une condition. Pour désactiver les conditions d'affichage, cliquez sur l'interrupteur à droite de Conditions d'affichage.

En savoir plus sur les conditions d'affichage des champs dans la documentation du designer.

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

Enfin, vous pouvez définir des options de répéteur de champ. Les répéteurs sont des champs et des groupes pouvant créer plusieurs objets et les afficher à l'aide d'une boucle.

  • Dans la section Options du répéteur, sélectionnez un minimum et/ou  un maximum nombre d'instances requises de ce champ.
  • Vous pouvez également définir un compte d'objet par défaut, qui sera le nombre de cas de champ qui apparaîtront par défaut dans le module.

Dans l'exemple ci-dessous, le champ image est en cours de configuration. Les limites des comptes d'objet sont fixées donc au moins 3 champs d'images apparaîtront dans le module, jusqu'à 5 champs d'image maximum. Un utilisateur verra 4 champs d'images dans le module par défaut et peut choisir d'ajouter un champ d'image supplémentaire ou de supprimer un champ d'image existant.

Les options de répéteur seront automatiquement activées une fois que vous avez modifié l'une des options. Pour désactiver les options de répéteur, cliquez sur l'interrupteur à droite des options du répéteur.

En savoir plus sur la répétition des champs et les boucles dans la documentation du designer.

Copier et coller vos blocs de texte

  • Lorsque vous souhaitez intégrer un de vos champs personnalisés dans votre module, copiez et collez le bloc de champ dans le panneau d'édition HTML et HubL du module.
    • Si vous êtes dans l'inspecteur du champ, cliquez sur Copier le bloc sur la droite du nom de la variable HubL du champ.
    • Si vous êtes dans l'inspecteur du module, passez sur le champ et cliquez sur Actions  le menu déroulant , puis sélectionnez Copier le bloc de texte.
  • Cliquez sur l'emplacement où vous souhaitez ajouter le champ dans le panneau d'édition HTML + HubL, puis collez le bloc de texte en appuyant Ctrl + V ou Cmd + V.

Rédiger votre syntaxe de module

En modifiant le module, vous pouvez rédiger une syntaxe de module supplémentaire dans les panneaux d'édition HTML + HubL, CSS et JS. En savoir plus sur l'éditeur de code du module et la référence syntaxe de module dans la documentation du designer.

Prévisualiser votre modèle

Vous pouvez afficher la façon dont votre module apparaîtra et fonctionnera dans un éditeur de contenu à tout moment en cliquant sur le bouton Aperçu en haut à droite dans l'éditeur de module. L'aperçu de votre module s'ouvrira dans un nouvel onglet. Cet aperçu est synchronisé dans l'éditeur et se réactualisera automatiquement.

Publier votre module

Une fois que vous avez fini d'ajouter des champs, rédigé votre syntaxe de module et êtes satisfait de la façon dont le module apparaît et fonctionne dans l'aperçu, vous pouvez effectuer la publication de votre module. Cliquez sur Publier les modifications en haut à droite de l'éditeur de module.

Rendre votre module disponible pour les modèles

  • Activez l'interrupteur mise à disposition pour les modèlessur ON en haut de l'éditeur pour ajouter ce module à vos modèles.

  • Passer à l'option OFF si vous souhaitez apporter des modifications ou tester la fonctionnalité du module. Si cette option est désactivée, votre équipe verra une alerte que le module n'est pas disponible pour les modèles.

Ajouter un module à un modèle

  • Dans l'éditeur de mise en page du modèle, cliquez sur l'onglet Ajouter en haut de l'inspecteur de mise en page, puis recherchez votre module. Les modules personnalisés que vous avez créés peuvent être identifiés par l'icône module personnalisé  personnaliserModules .
  • Glissez et déposez le module à l'emplacement où vous souhaitez le placer dans le modèle.

Ajouter ou acheter un module depuis la place de marché

Outre la création de modules, vous pouvez ajouter ou acheter des modules personnalisés que les autres utilisateurs ou fournisseurs ont créé sur la place de marché de HubSpot.

Dans votre compte HubSpot Marketing Basique, Pro ou Entreprise, accédez à Marketing > Fichiers et Modèles > Place de marché.

Dans la section Produits de filtrage à gauche, cliquez sur le menu déroulant Tous les produits dans Catégorie et sélectionnez Modules.

Vous pouvez filtrer les modules disponibles selon :

  • Prix: sélectionnez si le module est gratuit ou payant
  • Fonction: sélectionnez le type de fonction(s) que le module contient (c'est-à-dire calculatrice, galerie, carte)
  • Fonctionne avec : sélectionnez le ou les types de modèle dans lesquels le module peut être utilisé
  • Fournisseur : sélectionnez le ou les fournisseurs qui offrent le module

Une fois que vous avez choisi un module, passez le curseur de la souris dessus et cliquez sur Afficher les détails. Sur la page des détails du module, cliquez sur Tester ce module en haut à droite pour tester la fonctionnalité du module avant de l'ajouter à votre gestionnaire de conception. Par exemple, vous pouvez ajouter votre contenu personnalisé pour voir si ce module fonctionne pour la conception de votre site.

Cliquez sur Obtenir un module gratuitement ou Acheter pour x € en haut à droite. Si le module est gratuit, il sera automatiquement ajouté à votre gestionnaire de conception. Si le module est payant, saisissez vos détails de paiement. Une fois le paiement effectué, le module sera ajouté à votre gestionnaire de conception.
Voir l'article complet