Comment créer des modules personnalisés pour ajouter des fonctionnalités de contenu avancées ?

Dernière mise à jour: August 8, 2018

Disponible avec :

Marketing Hub Basique, Professional, Enterprise

Avec le gestionnaire de conception, vous pouvez coder des modules personnalisés pour ajouter des fonctionnalités avancées à une page, tout en permettant aux équipes marketing de personnaliser facilement le contenu de ces modules. Ces modules sont compatibles avec les langages HTML, CSS, JavaScript et HubL. Voici quelques idées de modules personnalisés :

  • Galeries d'images ou diaporamas personnalisés
  • Liste d'événements
  • Module « Équipe » contenant la biographie et la photo des membres de l'équipe
  • Section permettant à l'utilisateur interne de changer de classe CSS pour personnaliser l'apparence

Note : la création de modules personnalisés nécessite de maîtriser la CSS et l'utilisation du gestionnaire de conception de HubSpot. L'utilisateur est chargé d'intégrer les feuilles de style et les fichiers JavaScript nécessaires aux pages comprenant des modules personnalisés. Pour créer des modules personnalisés, il est recommandé de travailler avec un développeur.

Instructions

Suivez les instructions ci-dessous pour créer un module personnalisé.

Accéder au gestionnaire de conception

Dans HubSpot Marketing, cliquez sur Contenu > Gestionnaire de conception.

Créer un nouveau module personnalisé

Sélectionnez le dossier Modules personnalisés dans le panneau de droite, puis cliquez sur Nouveau module personnalisé.

New custom module
Custom module select

Donner un nom au module personnalisé

Donnez un nom au module personnalisé et enregistrez-le. Veuillez noter que renommer un module personnalisé efface tout contenu saisi dans l'éditeur. Les pages contenant le module ne seront pas mises à jour avec le nouveau nom, et le contenu existant sera effacé.
Name custom module

Rédiger le balisage

Saisissez le balisage habillant les champs modifiables. Tel que mentionné ci-dessus, les modules personnalisés sont compatibles avec les langages HTML, CSS et JavaScript.

Ajouter des champs

Pour ajouter des champs que les créateurs de contenu pourront modifier, cliquez sur Ajouter un nouveau champ.

Vous pouvez ajouter de nouveaux champs en cliquant sur + Ajouter un nouveau champ. Pour déplacer ou supprimer des champs, cliquez sur Organiser les champs. À ce jour, les modules personnalisés sont compatibles avec les types de champ suivants :

  • Texte : un champ de texte peut être utilisé pour insérer du texte dans l'éditeur de contenu.
  • Texte enrichi : les zones de texte enrichi permettent aux utilisateurs de profiter des toutes les options disponibles dans l'éditeur de texte enrichi de HubSpot.
  • Choix : le champ Choix crée un menu déroulant permettant aux utilisateurs de sélectionner une valeur.
  • Booléen : un champ booléen crée une case à cocher permettant aux utilisateurs d'activer ou de désactiver certaines sections de code du module personnalisé.
  • Image : un champ d'image ajoute une image que les équipes marketing peuvent personnaliser dans l'éditeur de contenu.
Set-up-custom-field.png

Copier et coller le snippet

Pour intégrer un champ personnalisé au code, cliquez sur Copier, puis collez le snippet dans le code (Ctrl + V ou Cmd + V). Pour en savoir plus sur la syntaxe des modules personnalisés, veuillez consulter cet article.

Publier le module personnalisé

Cliquez sur Mettre à jour ou Publier pour publier le module personnalisé.

HubSpot Help article screenshot

Ajouter le module personnalisé à un modèle

Vous pouvez maintenant ajouter le module aux modèles de page de site web ou de page de destination de votre choix. Pour ajouter un module personnalisé à un modèle, cliquez sur l'icône d'engrenage d'un module, puis sur Changer de module.

Swap module

Vous pouvez filtrer la liste pour faire apparaître les modules personnalisés. Cherchez le module personnalisé souhaité, puis cliquez sur Sélectionner.

Add to template
Note : à ce jour, il est impossible d'ajouter des modules personnalisés aux modèles de blog.

Table des matières

    Article précédent:

    Article suivant: