Il s’agit d’un aperçu de tous les modules par défaut disponibles pour les modèles de mise en page dans l’outil de gestionnaire de conception. Chaque type de module peut être personnalisé avec des options de style et de contenu dans l’inspecteur. Après avoir ajouté des modules à votre modèle, découvrez comment chacun de ces modules standard peut être utilisé dans votre contenu.
Pour ajouter des modules à vos modèles de glisser-déposer, cliquez sur + Ajouter dans l’inspecteur sur le côté droit de l’éditeur. Tous les modules par défaut et tous les modules ou groupes enregistrés apparaîtront ici. Utilisez la barre de recherche pour rechercher un module spécifique. Vous pouvez également utiliser le menu déroulant pour filtrer les composants par type, catégorie ou balises.
Les styles de module, les paramètres et le contenu peuvent être modifiés dans l’inspecteur lorsque le module est sélectionné dans l’éditeur. Cliquez sur Développer pour ajouter plus de styles personnalisés dans l’éditeur de code.
Au bas de l’inspecteur, vous avez la possibilité de verrouiller le module afin que le contenu ne puisse être modifié dans un blog, un e-mail ou un éditeur de page. Sélectionnez l’option Empêcher la modification dans les éditeurs de contenu pour activer ce paramètre.
Vous pouvez utiliser un module Menu avancé pour ajouter des options de navigation à votre contenu et aux modèles. Les arborescences de menus sont créées et gérés directement dans les paramètres du contenu.
Dans le gestionnaire de conception, il est possible de personnaliser les fonctionnalités suivantes des modules Menu avancés :
La page de désabonnement alternative s’affiche lorsque HubSpot ne parvient pas à identifier l’adresse e-mail du destinataire d’un e-mail qui cherche à se désabonner. Ce module vous permet de personnaliser le texte d’aide qui s’affiche sur cette page dans la section Contenu par défaut.
Le module Commentaires du blog permet d’insérer une section dédiée aux commentaires sur le modèle d’article de blog. Vous pouvez personnaliser le formulaire de commentaires de blog dans l’outil Formulaires. Le nom du formulaire fera référence au titre de votre blog. Ce module est compatible uniquement avec les modèles de blog.
Le module Contenu du blog contient le balisage HTML/HubL des articles de blog et des pages de listing du blog. Vous pouvez modifier le balisage des articles en cliquant sur Modifier le modèle d’article, ou modifier le balisage des listings en cliquant sur Modifier le modèle de listing.
Apprenez-en davantage sur le balisage des modules de contenu du blog. Il est toujours possible de rétablir le code d’origine en remplaçant ce module par un nouveau module Contenu du blog.
Les visiteurs peuvent utiliser le module Abonnement par e-mail au blog pour s’abonner aux e-mails de notification de votre blog en remplissant un formulaire simple. Ce module comprend un grand nombre de formulaires d’abonnement à votre blog qui peuvent être configurés et personnalisés dans l’outil Formulaires.
Utilisez le menu déroulant Sélectionner le menu déroulant pour sélectionner le blog auquel vos visiteurs sont inscrits. Vous pouvez personnaliser le texte qui s’affiche dans le titre au-dessus du formulaire en utilisant la zone de texte de l’inspecteur. Passez le curseur de la souris sur la réponse incluse existante et cliquez sur l’icône Développerexpand pour personnaliser le texte qui s’affiche après qu’un visiteur a soumis un formulaire.
Note:le module d’abonnement aux e-mails de blog n’est pas pris en charge dans les modèles d’e-mails.
Un module Call-to-action (CTA) est utile lorsque vous voulez que le CTA se trouve seul dans votre mise en page. Vous pouvez également insérer un CTA dans un module de texte enrichi.
Dans l’inspecteur, utilisez le menu déroulant CTA pour sélectionner un CTA par défaut pour ce module dans votre modèle. Vous pouvez également cliquer sur + Créer un nouveau CTA pour ouvrir le tableau de bord des CTA lorsqu’il est possible de créer un nouveau CTA.
Lorsqu’une colonne flexible est ajoutée à un modèle de page HubSpot, vous pouvez ajouter, supprimer et réorganiser les modules, au niveau de la page dans l’éditeur de contenu. Cette fonctionnalité permet aux concepteurs de créer moins de modèles, tout en permettant aux équipes marketing de personnaliser chaque page en fonction de leurs besoins.
Note : ce module n’est pas disponible sur les modèles de blog , de pages système ou d’e-mails.
Lorsque vous ajoutez un module flexible à votre modèle, vous pouvez glisser-déposer d’autres modules pour créer un groupe de colonnes flexibles. Vous pouvez également faire un clic droit sur un groupe statique existant et choisir Rendre la colonne flexible.
Note : une fois qu’une colonne flexible a été personnalisée pour une page spécifique dans l’éditeur de contenu, les modifications apportées à la colonne flexible dans le modèle ne seront pas reflétées sur cette page. Cela garantit que le contenu personnalisé n’est pas écrasé.
Vous pouvez utiliser le module Suivez-moi pour aider les visiteurs à entrer en contact avec votre entreprise sur les réseaux sociaux. Contrairement au module Partage sur les réseaux sociaux, le module Suivez-moi redirige directement les visiteurs vers les sites de réseaux sociaux associés.
Lorsque vous ajoutez un module Suivez-moi, vous pouvez personnaliser l’en-tête du module qui s’affiche au-dessus des icônes des réseaux sociaux.
Vous pouvez définir les réseaux sociaux à afficher dans ce module dans la section Suivez-moi des paramètres des réseaux sociaux (Depuis votre compte HubSpot, accédez à Marketing > Réseaux sociaux.).
Note : le module Suivez-moi utilise des icônes par défaut pour chaque réseau social. Si vous souhaitez utiliser vos propres icônes de réseaux sociaux personnalisées, vous pouvez créer une version personnalisée du module.
Le module E-mail de suivi offre des options de mise en forme et des paramètres supplémentaires pour les modèles d’e-mails. Au lieu de refléter les paramètres des réseaux sociaux que vous utilisez, ce module peut être personnalisé avec les pages sociales que vous souhaitez. Vous pouvez également ajuster la forme de l’icône, son modèle de couleur et son alignement dans le module. Vous pouvez également ajouter un compte de réseau social personnalisé et télécharger votre propre icône dans l’éditeur si votre marque est active sur une plateforme de réseaux sociaux autre que les réseaux sociaux répertoriés.
Pour modifier les réseaux sociaux qui s’affichent dans ce module, cliquez sur l’icône + Ajouter dans la section Réseaux sociaux de l’inspecteur. Ensuite, passez le curseur de la souris au-dessus et cliquez sur l’icône crayon edit ou Corbeille icône delete pour apporter des modifications.
En cliquant sur l’icône Crayon edit, vous avez la possibilité de sélectionner le réseau social qui doit s’afficher et de définir le point auquel il doit être relié. Si vous sélectionnez Icône personnalisée, vous verrez d’autres options permettant de définir une image personnalisée pour ce réseau. Cliquez sur Remplacer pour choisir une image à partir du gestionnaire de fichiers ou télécharger une nouvelle image stockée sur votre ordinateur.
Après avoir effectué les sélections, utilisez la navigation de type fil d’Ariane en haut de l’inspecteur pour revenir aux autres options du module.
Le module Formulaire permet aux utilisateurs d’ajouter un formulaire à une page. Il permet de recueillir les coordonnées des visiteurs qui consultent votre site web. Il est disponible sous forme de module qui peut être ajouté au contenu et aux modèles créés avec des pages de destination, des pages de site web et des pages de blog.
Note : les formulaires ne peuvent pas être ajoutés aux modèles d’e-mails.
Le module Formulaire permet de :
Vous pouvez utiliser un module En-tête pour afficher une ligne de texte dans une balise de titre HTML. Vous pouvez personnaliser le texte du contenu En-tête et utiliser le menu déroulant pour choisir la balise de titre (H1-H4) qui sera présentée.
Vous pouvez ajouter un module Espacement horizontal à vos modèles pour ajouter un espace vide permettant de personnaliser la mise en page de vos modules de contenu. Ce module crée une balise div vide qui peut être utilisée pour espacer les éléments sur une page.
Les modules Image vous permettent d’ajouter des images à une page ou à un e-mail dans un emplacement spécifique. Vous pouvez sélectionner des images dans le gestionnaire de fichiers ou télécharger une nouvelle image lorsque vous ajoutez du contenu par défaut ou lorsque vous travaillez dans l’éditeur de contenu. Ce module est utile pour la mise en forme ou la création d’une image d’une façon particulière pour votre modèle, et il vous permet ensuite changer d’image sans modifier sa mise en forme.
Les options suivantes peuvent également être personnalisées :
Le module Galerie d’images permet d’ajouter rapidement un élément visuel dynamique à une page HubSpot. Dans l’inspecteur, vous pouvez personnaliser les options suivantes :
Le module Sélecteur de langue permet aux visiteurs de vos pages de destination et de vos pages de site web de basculer d’une langue à l’autre des pages. Il est possible de personnaliser la manière dont les noms des langues traduites s’afficheront sur ce module.
Lorsque ce module est intégré à votre modèle de page, apparaît à la consultation uniquement si au moins une page traduite a été publiée pour cette page. Apprenez-en davantage sur l’utilisation du contenu multilingue dans le logiciel HubSpot.
Le module Logo intègre automatiquement le logo de votre entreprise à partir des paramètres du contenu. Si vous souhaitez modifier ce logo, vous pouvez cliquer sur l’option Remplacer le logo par défaut pour cette page pour télécharger une nouvelle image pour cette page uniquement. Vous pouvez également cliquer sur Modifier dans les paramètres de contenu pour mettre à jour le logo de votre entreprise pour tout votre contenu.
Le module Logo sera automatiquement lié au domaine de votre entreprise, mais il est possible de saisir une URL unique du lien pour remplacer cette option par défaut.
Le module Corps principal de l’e-mail est un module de texte enrichi standard intégré par défaut à tous les modèles d’e-mail. Il contient la zone de texte enrichi principale au sein de laquelle les équipes marketing vont composer l’e-mail. Il est possible de personnaliser le contenu par défaut pour le corps de l’e-mail sur un modèle donné.
Outre les OPTIONS DE STYLE standard, ce module peut être personnalisé avec des couleurs, des bordures et espacements par défaut. Utilisez le cercle coloré pour choisir une couleur du sélecteur de couleurs ou saisissez la valeur hexadécimale dans le champ de texte. Vous pouvez également utiliser les champs de texte pour définir une largeur en pixels pour la bordure du module, l’espacement intérieur et l’espacement extérieur.
Les Modules créés dans l’éditeur de code vous offrent la possibilité d’utiliser HTML, CSS, JavaScript et HubL pour ajouter des fonctionnalités avancées à vos modèles, tout en permettant aux équipes marketing de modifier le contenu du module dans les éditeurs sans toucher le code. Ces composants seront libellés avec une icône de module customModules de personnalisation de l’icône module dans le localisateur et l’inspecteur. Pour en savoir plus sur l’utilisation des modules au code personnalisé sur le Forum pour les designers.
Ce module comprend les jetons nécessaires à inclure dans tous les modèles d’e-mail afin d’envoyer un e-mail commercial conformément à la législation. La mise en forme de cette section peut être modifiée. Toutefois, il n’est pas possible d’enregistrer un modèle d’e-mail sans le module Adresse de l’entreprise ou les balises HubL nécessaires.
Outre les options standard de style, ce module peut être personnalisé avec des couleurs par défaut, des bordures et des espacements. Cliquez sur le cercle coloré pour choisir une couleur du sélecteur de couleurs ou saisissez la valeur hexadécimale dans le champ de texte. Vous pouvez également utiliser les champs de texte pour définir une largeur en pixels pour la bordure du module, l’espacement intérieur et l’espacement extérieur.
Le module Une ligne de texte permet aux créateurs de contenu d’insérer une ligne de texte sur une page ou dans un e-mail. Il sert à ajouter des champs de texte simples, dont la mise en forme ne peut être modifiée.
Le module Pied de page affiche les informations de propriété intellectuelle, ainsi que l’année en cours et le nom de l’entreprise. Il n’y a aucun champ de contenu modifiable pour ce module dans le gestionnaire de conception, car le nom de l’entreprise est intégré automatiquement dans la section Pied de page des paramètres de l’e-mail.
Le module Invite de mot de passe est destiné aux modèles système de demande de mot de passe. Si une page est protégée par un mot de passe, la page d’invite de mot de passe s’affiche. Le texte du bouton de soumission, ainsi que le texte à afficher en cas de mot de passe incorrect peuvent être personnalisés.
Le module Filtrage des articles permet d’afficher une liste d’articles de blog associés à un sujet, un mois ou un auteur donné. Il n’est pas compatible avec les modèles d’e-mail.
Il est possible de personnaliser les paramètres suivants dans les options par défaut du module :
Le module Listing des articles permet d’afficher une liste des articles les plus récents ou les plus populaires d’un blog HubSpot. L’ordre des articles de blog que vous verrez affichés dans ce module sont les articles de blog avec le plus de vues du plus grand au moins. Il n’est pas compatible avec les modèles d’e-mail.
Il est possible de personnaliser les contenus par défaut suivants dans l’inspecteur :
Le module Texte enrichi est le module le plus utilisé parmi les outils de contenu HubSpot. C’est celui qui offre le plus d’options personnalisables : mise en forme du texte, insertion d’images, de liens, de CTA, et plus. Les comptes Hub Marketing Pro et Entreprise peuvent utiliser des modules de texte enrichi pour ajouter du contenu intelligent à une page.
Ce module permet de créer des zones de contenu modifiables pour les équipes marketing. Si vous souhaitez ajouter un contenu par défaut pour ce module, cliquez sur Développer ou cliquez à n’importe quel endroit sur le contenu prévisualisé pour ouvrir un éditeur de texte enrichi.
Le module Listing RSS permet d’afficher des résumés d’articles publiés sur un blog HubSpot ou un flux RSS externe. Il n’est pas compatible avec les modèles d’e-mail (des e-mails RSS sont par contre disponibles).
Les modules Listing RSS peuvent être personnalisés pour filtrer un blog spécifique et même une balise spécifique. Cliquez sur l’option correspondante pour indiquer si une image en vignette, un nom d’auteur, un récapitulatif ou une date de publication doit s’afficher pour chaque article.
Après avoir activé ces paramètres, vous pouvez personnaliser les informations suivantes :
Le module En-tête de section permet d’afficher une balise de titre h1 et un paragraphe de sous-titre. Il permet notamment de donner un titre à la section principale d’une page.
Le module Menu simple permet aux utilisateurs de créer un menu pour une page donnée, directement dans l’éditeur de contenu. Ce module permet de créer un menu simple pour un modèle spécifique. Dans l’inspecteur, cliquez sur Modifier le menu pour ajouter des éléments de menu, des liens et donner un style au menu par une navigation horizontale ou latérale.
Le module Partage sur les réseaux sociaux permet de partager facilement votre contenu sur les réseaux sociaux et les e-mails. Cliquez sur le bouton de réseau social correspondant pour inclure les réseaux sélectionnés sur votre page ou votre e-mail. Le lien de partage s’insère automatiquement avec les balises HubL requises pour partager votre contenu. Dans les e-mails, le module utilisera l’URL de la version web de cet e-mail dans le lien de partage.
Note : le module de partage sur les réseaux sociaux utilise des icônes par défaut pour chaque réseau social. Si vous souhaitez utiliser vos propres icônes de réseaux sociaux personnalisées, vous pouvez créer une version personnalisée du module.
Le module Préférences d’abonnement est un module spécial, compatible uniquement avec les modèles système des préférences d’abonnement.
Il permet de personnaliser la page affichée lorsqu’un visiteur accède à ses préférences d’abonnement ou souhaite se désabonner des communications par e-mail.
Il s’agit d’un module de texte enrichi disponible sur les modèles système de confirmation de la mise à jour des abonnements, et vous permet de personnaliser la page affichée lorsque le destinataire des e-mails met à jour ses paramètres d’abonnement.
Le module Afficher en tant que page web donne aux destinataires des e-mails l’option d’ouvrir la version de page web d’un courriel. L’apparence des e-mails HTML pouvant varier d’un client de messagerie à l’autre, cette option permet donc aux destinataires d’afficher la version originale de l’e-mail dans leur navigateur.