Dernière mise à jour: juin 28, 2023
Disponible avec le ou les abonnements suivants, sauf mention contraire :
Marketing Hub
Pro
,
Enterprise
|
Content Hub
Starter
,
Pro
,
Enterprise
|
| 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
- Dans votre compte HubSpot, accédez à Contenu > Gestionnaire de conception.
- En haut de l'outil de recherche, cliquez sur le menu déroulant Fichier et sélectionnez Nouveau fichier.
- Dans la boîte de dialogue, cliquez sur le menu déroulant Que souhaiteriez-vous créer aujourd'hui ? et sélectionnez 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.
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é.
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.
- Modifiez le nom de votre champ en cliquant sur l'icône Crayon à 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.
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.
- 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.
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.
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
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.
- 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 + V ou sur 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. 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.
Lorsqu'un utilisateur modifie le module dans un éditeur de contenu, le texte d'aide apparaîtra ci-dessus.
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.
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.
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.
- 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.
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é : .
- Glissez et déposez le module dans le modèle.
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.
- 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.
- Dans le modèle codé, collez le bloc de texte au besoin.
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, cliquez sur l'icône Marketplaces dans la barre de navigation principale, puis sélectionnez Marketplace des modèles.
- 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.
