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: mars 27, 2021

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 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.
  • Sélectionnez si ce module doit être utilisé dans les modèles de page, les modèles de blog et/ou les modèles d'e-mails. Les modules utilisés dans les modèles d'e-mails ne peuvent pas inclure de code CSS ou JavaScript. 
  • 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 du module et le modifier dans l'éditeur de contenu. Découvrez-en davantage sur les types de champs disponibles.

  • Dans l'inspecteur du module sur la droite, cliquez sur le menu déroulant 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 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 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 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 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 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

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