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.
Ajouter un module à votre modèle
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.
Personnaliser un module par défaut
Tous les comptes Hub Marketing Pro et Entreprise et Hub CMS Pro et Entreprise ont un dossier @hubspot dans le gestionnaire de conception par défaut. Ce dossier contient l'ensemble de vos thèmes et modules par défaut, y compris les modules d'e-mail glisser-déposer. Ces thèmes et modules sont en lecture seule, mais peuvent être clonés si vous souhaitez les modifier. 
- Depuis votre compte HubSpot, accédez à Marketing > Fichiers et modèles > Outils de conception.
- Dans l'outil de recherche, cliquez sur le dossier @hubspot.
- Cliquez sur le module par défaut que vous souhaitez cloner, puis sélectionnez Cloner le module.
- Le volet de modification à droite affichera le code source du module, où vous pourrez ensuite le modifier si nécessaire.
- Dans l'angle supérieur droit, cliquez sur Publier les modifications pour enregistrer vos changements. Le module sera alors disponible pour la création de modèles.
Types de modules par défaut
Menu avancé
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 :
- Menu sélectionnez l'un de vos menus avancés existants dans les paramètres du contenu.
- Type de menu avancé : – sélectionnez le mode d'affichage des éléments du menu sur votre site :
- Statique – Toujours afficher les pages d'accueil dans le
menu: cela maintient le menu cohérent sur toutes les pages de navigation de votre site. - Dynamique par section – Afficher les pages dans le
menu, lesquelles sont liées àla section consultée: cela affiche les éléments du menu en rapport avec l'élément du menu principal consulté. - Dynamique par page – Afficher les pages dans le
menu, lesquelles sont liées àla page Consultée : cela affiche les éléments de menu liés à la page consultée. - Le menu de style fil d'Ariane (utilise le flux horizontal) : affiche des éléments de menu horizontalement dans un chemin relatif en haut de votre site.
- Statique – Toujours afficher les pages d'accueil dans le
- Niveaux maximum – nombre maximal de menus contenant des éléments enfants pouvant être affichés.
- Orientation : ajoute une classe de hs-menu-flux-horizontal ou hs-menu-flux-vertical dans le conteneur du wrapper du menu. Ces modules peuvent être utilisés en CSS pour styliser les menus horizontaux et verticaux. En savoir plus sur les classes ajoutées par les paramètres du module dans notre documentation de développeur.
- Activer les lanceurs : ajoute un module de lanceurs ou de pas de lanceurs au conteneur du wrapper de menu. Ces modules peuvent être utilisés dans votre CSS pour cibler les menus avec ou sans menus déroulants. En savoir plus sur les classes ajoutées par les paramètres du module dans notre documentation de développeur.
Enregistrer le désabonnement
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.
Commentaires du blog
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.
Contenu du 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.
Abonnement par e-mail au 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.
Call-to-action
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
Colonne flexible
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
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é.
Suivez-moi
Vous pouvez utiliser le module
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.
E-mail de suivi
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
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
En cliquant sur l'icône Crayon , 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.
Formulaire
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 :
- Donner un titre à un formulaire sur la page.
- Choisir le formulaire HubSpot à afficher sur la page, ou ajouter un nouveau formulaire.
- Rediriger les visiteurs ayant soumis le formulaire vers une autre page ou d'afficher un message de remerciement en ligne sur la même page.
- Personnaliser le message de remerciement en ligne
pour vos visiteurs si nécessaire. - D'envoyer des e-mails de notification à une adresse précise d'un visiteur ayant soumis un formulaire.
- D'ajouter des visiteurs ayant soumis le formulaire à un workflow (Marketing Hub Pro ou Entreprise uniquement).
- Envoyer un e-mail de suivi aux visiteurs qui soumettent le formulaire.
En-tête
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.
Espacement horizontal
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.
Image
Les modules Image vous permettent d'ajouter
Les options suivantes peuvent également être personnalisées :
- L'URL vers laquelle les visiteurs sont redirigés lorsqu'ils cliqueront sur l'image
- Le texte alternatif de l'image
- La taille de l'image.
- Pour adapter l'image en fonction de la taille du navigateur et de l'appareil, sélectionnez Ajuster automatiquement. Si vous sélectionnez cette option, vous pouvez définir la taille maximale de l'image dans la section Taille maximale. Pour utiliser la taille d'origine de l'image comme taille maximale, sélectionnez Taille d'origine de l'image. Pour définir manuellement une taille maximale, sélectionnez Personnaliser, puis configurez la largeur maximale et la hauteur maximale.
- Pour rendre l'image identique sur tous les appareils, sélectionnez Largeur et hauteur exactes.
Galerie d'images
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 :
- Cliquez sur + Ajouter dans la section Diapositive pour insérer plus de diapositives. Les diapositives peuvent être réorganisées par un glisser-déplacer pour les remettre en place. Passez le curseur de la souris sur une diapositive spécifique et cliquez sur l'icône Modifieredit pour ajouter une légende et une image.
- Utilisez le menu déroulant du Mode d'affichage pour sélectionner un diaporama standard, une navigation par vignettes ou une galerie d'images.
- Activez l'option Diapositives en boucle pour répéter les diapositives depuis le début après les avoir complètement visualisées.
- Activez l'option Avance automatique si vous voulez que les diapositives changent d'elles-mêmes.
- Si vous sélectionnez cette option, utilisez les boutons flèche pour définir le nombre de secondes entre les diapositives.
- Activez l'option Afficher les boutons de navigation pour indiquer si vous souhaitez que les visiteurs cliquent tout seuls sur les images.
- Utilisez le menu déroulant Hauteur variable pour choisir la Hauteur fixe si la galerie doit conserver la même taille pendant que vous faites défiler toutes les images. Sélectionner une Hauteur variable si vous souhaitez la redimensionner en fonction de la taille de l'image.
- Personnalisez la transition entre les diapositives en utilisant le menu déroulant pour sélectionner Diapositive ou Fondu.
- Si les images ont des légendes, vous pouvez sélectionner Toujours garder la légende sous l'image ou Superposer les légendes en haut des images.
Sélecteur de langue
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.
PageLang – signifie que les noms des langues disponibles apparaîtront dans la langue de la page actuelle. Par exemple, si vous consultez la version anglaise d'une page dotée d'une traduction en français et que vous cliquez sur le bouton Sélecteur de langue, vous verrez les mots English et French.- Localisé signifie que le nom de chaque langue s'affichera dans la langue sélectionnée pour la page. Par exemple, si vous consultez la version anglaise d'une page dotée d'une traduction en français et que vous cliquez sur le bouton Sélecteur de langue, vous verrez les mots English et Français pour les noms de langue.
- Hybride est un mélange des deux. Par exemple, si vous consultez la version anglaise d'une page dotée d'une traduction en français et que vous cliquez sur le bouton Sélecteur de langue, vous verrez les mots English et French (Français) pour les noms de langue.
Lorsque ce module est intégré
Module Logo
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.
Corps principal de l'e-mail
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.
Modules
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.
Adresse de l'entreprise
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
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.
Une ligne de texte
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.
Pied de page
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.
Invite de mot de passe
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.
Filtrage des articles
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 blog pour lequel vous souhaitez afficher les valeurs de filtrage
- Liste de valeurs permettant de filtrer les liens (sujets, mois ou auteur)
- Ordre d'affichage des valeurs (nombre d'articles ou nom)
- Titre de liste à afficher
- Nombre maximal d'articles de blog à lister
- Texte du lien permettant d'afficher des valeurs supplémentaires, le cas échéant
Listing des articles
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 apparaître dans ce module sont classés des articles de blog ayant le plus de vues à ceux qui en ont le 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 blog pour lequel vous souhaitez afficher les titres des articles
- Lister les articles de blog en commençant par le plus récent ou le plus populaire pour une période donnée
- Titre de liste à afficher
- Nombre maximal d'articles de blog à lister
Texte enrichi
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.
Listing RSS
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 :
- Afficher le nom de l'auteur : saisissez le Texte d'attribution de l'auteur que vous souhaitez utiliser au-dessus de chaque nom d'auteur. Par défaut, ce module prévoit le mot par comme texte d'attribution.
- Afficher le récapitulatif : saisissez la longueur du récapitulatif (caractères) pour chaque récapitulatif de blog. Vous pouvez également personnaliser le Texte du clic publicitaire du récapitulatif, qui représente le lien de blog sur lequel les visiteurs cliquent pour lire votre article complet. Par défaut, ce texte sera libellé par l'expression Lire plus.
- Afficher la date de publication : choisissez le Format de la date de publication pour personnaliser le format de la date et de l'heure pour chaque article. Il est également possible de personnaliser le texte d'indication de la date de publication. Par défaut, ce texte sera libellé comme suit : Publié le.
En-tête de section
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.
Menu simple
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. La modification du paramètre d'orientation du menu ajoute une classe de hs-menu-flux-horizontal ou hs-menu-flux-vertical au conteneur du wrapper du menu, qui peut ensuite être utilisé pour la stylisation dans votre CSS. En savoir plus sur les classes ajoutées par les paramètres du module dans notre documentation de développeur.
Partage sur les réseaux sociaux
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.
Préférences d'abonnement
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.
Confirmation de la mise à jour des abonnements
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.
Afficher en tant que page web
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.
