Ignorer et passer au contenu principal
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.

Créer et modifier des modules

Dernière mise à jour: juin 28, 2023

Disponible avec le ou les abonnements suivants, sauf mention contraire :

Marketing Hub Pro, Entreprise
CMS Hub Starter, Pro, Entreprise
Ancienne version Marketing Hub Basique

Dans le gestionnaire de conception, vous pouvez créer des modules codés 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 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 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. HubSpot recommande 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, cliquez sur le menu déroulant Que souhaiteriez-vous créer aujourd'hui ? et sélectionnez Module.

build-a-module

  • Cliquez sur Suivant.
  • Cochez la case à côté de chaque type de contenu où votre module sera utilisé : pages, articles de  blog, listes de blog, e-mails ou citations. Les modules utilisés dans les modèles d'e-mails ne peuvent pas inclure de code CSS ou JavaScript. 

Remarque : les modules personnalisés pour une utilisation dans les e-mails ne peuvent être créés que dans  les comptes avec un 

  • Indiquez si ce module sera 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é. 
  • Saisissez un nom de fichier pour votre module, puis cliquez sur Créer.

créer-votre-nouveau-module

Libeller votre module

Par défaut, l'éditeur de contenu référencera un module à l'aide du nom qui lui a été attribué dans le gestionnaire de conception. Si vous souhaitez que votre module utilise un nom différent dans l'éditeur de contenu, vous pouvez le faire en saisissant un libellé. 

design-manager-label-module

Ajouter des champs à votre module

Ajoutez des champs au module pour définir le contenu ou le style du module et le modifier dans l'éditeur de contenu. Découvrez-en davantage sur les types de champs disponibles dans notre documentation pour les développeurs. 

  • Dans l'inspecteur du module sur la droite, cliquez sur le menu déroulant Ajouter un champ  menus déroulants  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 disponibles par défaut consistent donc à sélectionner une image par défaut et à 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 déterminant de quelle façon les utilisateurs peuvent modifier le module dans l'éditeur de contenu :

  • Rendre ce champ obligatoire : l'utilisateur ne pourra pas laisser ce champ vide dans l'éditeur de contenu.
  • Empêcher la modification dans les éditeurs de contenu : le contenu du champ ne peut être modifié dans l'éditeur de contenu mais reste modifiable au niveau des modèles. 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 utiliser des conditions d'affichage des champs afin qu'un champ de module s'affiche uniquement si un autre champ répond à certains critères.

  • Dans la section Conditions d'affichage, cliquez sur la variable HubL  menus déroulants  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 un champ de texte nommé image_titre doit être égale à Photo de visage 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

Vous pouvez définir des options de répéteur de champ dans la section Options du répéteur. Les répéteurs sont des champs et des groupes pouvant créer plusieurs objets et les afficher à l'aide d'une boucle for.

  • 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 du répéteur, cliquez sur l'interrupteur à droite des options du répéteur.

Champs de module de groupe

Après avoir créé des champs, vous pouvez regrouper jusqu'à quatre champs 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 un champ dans le 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  menus déroulants , 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 l'é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 et rédigé votre syntaxe de module, 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 dans l'angle supérieur droit 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

Après avoir publié un module, vous pouvez l'utiliser sur vos pages en l'ajoutant à un modèle.

Pour ajouter un module à un modèle de glisser-déposer :

  • 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.
  • Glissez et déposez le module dans le modèle.

ajouter-personnalisation-module

Pour ajouter un module à un modèle codé, pouvez-vous copier et coller l'extrait de module dans le modèle :

  • Pour copier l'extrait de module à partir de l'éditeur de module, en bas de la barre latérale de droite, cliquez sur Copier l'extrait.

    module-éditeur-copie-snippet0
  • Pour copier l'extrait de module depuis la barre latérale de gauche du gestionnaire de conception :
    • Dans le menu latéral de gauche, localisez le module personnalisé.
    • Cliquez avec le bouton droit sur le module, puis sélectionnez Copier le bloc de texte. Vous pouvez également sélectionner le module, puis cliquer sur Actions dans le coin supérieur gauche et sélectionner Copier l'extrait.

      custom-module-copy-snippet00
  • Dans le modèle codé, collez le bloc de texte au besoin.

    code-template-paste-snippet0

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 Marketplaces marketplace dans la barre de navigation principale, puis sélectionnez Marketplace des ressources.
  • Dans la section Produits de filtrage à gauche, cliquez sur le menu déroulant Tous les produits sous Catégorie et sélectionnez Modules. Vous pouvez filtrer les modules disponibles selon les éléments suivants :
    • Prix : 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)
    • Compatible avec : le ou les types de modèle dans lesquels le module peut être utilisé
    • Fournisseur : le ou les fournisseurs qui offrent le module
  • Placez le curseur sur le module de votre choix et cliquez sur Afficher les détails.
  • Cliquez sur Obtenir un module gratuitement ou Acheter le module pour € dans l'angle supérieur droit.
    • 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.
Cet article vous a-t-il été utile ?
Ce formulaire n'est utilisé que pour recueillir du feedback sur la documentation. Découvrez comment obtenir de l'aide sur HubSpot.