Avertissement : cet article est le résultat de la traduction automatique, l'exactitude et la fidélité de la traduction ne sont donc pas garanties. Pour consulter la version originale de cet article, en anglais, cliquez ici.
Design Manager

Créer et modifier des modules

Dernière mise à jour: novembre 12, 2020

Disponible avec :

Hub Marketing Professional, Enterprise
Hub CMS Professional, Enterprise
Ancienne version Hub Marketing Basique

Dans le gestionnaire de conception, vous pouvez créer des modules codés personnalisés pour ajouter des fonctionnalités personnalisées ou avancées à votre blog, à vos pages ou à vos e-mails. L'éditeur de module dispose de trois panneaux d'éditeur pour rédiger du code HTML et HubL, CSS et JavaScript. 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. Vous pouvez créer des modules personnalisés à partir de zéro ou ajouter des modules préconçus à votre compte depuis le marketplace de HubSpot.

Remarque : La création de modules nécessite une connaissance du code HTML, CSS, HubL et du gestionnaire de conception HubSpot. Il est recommandé de travailler avec un designer pour créer des modules codés.


Créer un module

  • Depuis votre compte HubSpot, accédez à Marketing > Fichiers et modèles > Outils de conception.
  • En haut de l'outil de recherche, cliquez sur le menu déroulant Fichier et sélectionnez Nouveau fichier.

new-file

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

création-module-fichier

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

Remarque : 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é. Découvrez comment travailler avec du contenu intelligent dans un module global.
  • Donnez au module un nom de fichier, puis cliquez sur Créer.

créer-votre-nouveau-module

Libeller votre module

Le libellé du module apparaît dans le gestionnaire de conception et l'éditeur de contenu lors de l'ajout du module à votre page ou à votre e-mail. Vous pouvez rechercher un module dans le gestionnaire de conception et l'éditeur de contenu par son nom de module ou son libellé. Si le champ est laissé vide, le module affichera le nom du module.

design-manager-label-module

Ajouter des champs à votre module

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

module-ajouter-champ

  • Modifiez le nom de votre champ en cliquant sur l'icône Crayon edit à côté du nom du champ. Pour modifier le nom de la variable HubL, apportez vos modifications dans le champ de texte Nom de variable HubL

Ajouter un contenu par défaut au 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.

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.

options-contenu-champ

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 de l'infobulle : ajoutez un texte d'aide au champ pour donner aux utilisateurs du contexte ou des instructions. Ce texte d'aide apparaîtra dans une infobulle lorsqu'un utilisateur accèdera au champ pendant la modification. 

    custom-module-help-text
  • Texte d'aide en ligne : ajoutez un texte d'aide au champ pour donner aux utilisateurs du contexte ou des instructions. Ce texte d'aide apparaîtra sous le champ lorsqu'un utilisateur modifiera le module.

design-manager-module-field-options

Définir les conditions d'affichage du champ

Vous pouvez personnaliser un champ de module uniquement si un autre champ répond à certains critères avec des conditions d'affichage du champ.

  • Dans la section Conditions d'affichage, cliquez sur la variable HubL et 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.

conditions-affichage-champ

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.

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 champs d'images apparaîtront dans le module, jusqu'à 5 champs d'image maximum. Un utilisateur verra 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.

options-répéteur-champs

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.

Découvrez-en davantage sur la répétition des champs et les boucles dans la documentation du designer.

Regrouper des champs de module

Après avoir créé des champs, vous pouvez les regrouper afin de les organiser selon leur pertinence. Les groupes de champs peuvent être utilisés pour créer une logique de champ personnalisée. Découvrez-en davantage sur les groupes de champs de module

Pour regrouper des champs de module :

  • Cliquez sur Groupe dans la barre latérale droite de l'éditeur de module.

    design-manager-group-fields
  • Sélectionnez les champs que vous souhaitez regrouper.
  • Cliquez sur Créer un groupe.

Copier et coller vos blocs de texte

  • Lorsque vous souhaitez intégrer l'un de vos champs personnalisés dans votre module, copiez et collez le bloc de champ dans l'éditeur 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 et, puis sélectionnez Copier le bloc de texte.
  • Cliquez sur l'emplacement où vous souhaitez ajouter le champ dans l'éditeur HTML et HubL, puis collez le bloc de texte en appuyant sur Ctrl + ou sur Cmd + V.

copier-coller-bloc-champ

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 + HubLCSS et JS. Découvrez-en davantage sur l'éditeur de code du module et la référence syntaxe de module dans la documentation pour les concepteurs.

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. Le texte d'aide ne peut plus dépasser 300 caractères. 

design-manager-help-text

Lorsqu'un utilisateur modifie le module dans un éditeur de contenu, le texte d'aide apparaîtra ci-dessus.

page-editor-module-help-text

Prévisualiser votre modèle

Vous pouvez afficher la façon dont votre module apparaîtra et fonctionnera dans un éditeur de contenu en cliquant sur le bouton Aperçu dans l'angle supérieur droit de 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.

module-aperçu

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. Dans l'angle supérieur droit, cliquez sur Publier les modifications.

publier-module

Rendre votre module disponible pour les modèles

  • Cliquez sur le bouton Rendre disponible pour les modèles en haut de l'éditeur pour permettre l'ajout de ce module à vos modèles.

interrupteur-contenu

  • Désactivez cette option pour 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.

mise à disposition-module

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é customModules.
  • Faites glisser et déposez le module dans votre modèle.

ajouter-personnalisation-module

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.

  • Depuis votre compte HubSpot, cliquez sur l'icône Marketplace marketplace dans la barre de navigation principale.
  • 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.
  • 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.