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.
CMS-General

Utilisez des modules par défaut dans votre modèle

Dernière mise à jour: avril 24, 2019

Disponible avec :

Hub Marketing Professional, Enterprise
Basique
HubSpot CMS

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.

 

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 :

  1. Menu  sélectionnez l’un de vos menus avancés existants dans les paramètres du contenu.
  2. 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 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.
  3. Niveaux maximum – nombre maximal de menus contenant des éléments enfants pouvant être affichés.
  4. Orientation : met à jour du balisage HTML si vous souhaitez que les éléments de l’arborescence de votre menu s’affichent verticalement ou horizontalement sur votre site.
  5. Activer les lanceurs – cela indique si vous souhaitez afficher le menu lorsqu’un visiteur passe le curseur de la souris sur un menu contenant des éléments enfants.
Options du module Menu avancé


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.

Enregistrer le désabonnement

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.

Formulaire de commentaires de blog par défaut

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.

blog-content-1.png

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. 

Abonnement par e-mail au blog

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

Capture d’écran d’un article de support HubSpot


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

Suivez-moi

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. 

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

follow-me-email-options

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.

#custom-icon

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 :

  1. Donner un titre à un formulaire sur la page.
  2. Choisir le formulaire HubSpot à afficher sur la page, ou ajouter un nouveau formulaire.
  3. 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.
  4. Personnaliser le message de remerciement en ligne pour vos visiteurs si nécessaire.
  5. D’envoyer des e-mails de notification à une adresse précise d’un visiteur ayant soumis un formulaire.
  6. D’ajouter des visiteurs ayant soumis le formulaire à un workflow (Marketing Hub Pro ou Entreprise uniquement).
  7. Envoyer un e-mail de suivi aux visiteurs qui soumettent le formulaire.

#form-module-2

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.

Capture d’écran d’un article de support HubSpot

Image

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 :

  • L’URL vers laquelle les visiteurs sont redirigés lorsqu’ils cliqueront sur l’image
  • Le texte alternatif de l’image
  • La hauteur et la largeur de l’image

#image-module

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 :

  1. 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 Modifier pour ajouter une légende et une image.
  2. Utilisez le menu déroulant du Mode d’affichage pour sélectionner un diaporama standard, une navigation par vignettes ou une galerie d’images.
  3. Activez l’option Diapositives en boucle pour répéter les diapositives depuis le début après les avoir complètement visualisées.
  4. Activez l’option Avance automatique si vous voulez que les diapositives changent d’elles-mêmes.
  5. Si vous sélectionnez cette option, utilisez les boutons flèche pour définir le nombre de secondes entre les diapositives.
  6. Activez l’option Afficher les boutons de navigation pour indiquer si vous souhaitez que les visiteurs cliquent tout seuls sur les images.
  7. 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.
  8. Personnalisez la transition entre les diapositives en utilisant le menu déroulant pour sélectionner Diapositive ou Fondu.
  9. 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.
Capture d’écran d’un article de support HubSpot


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é à 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.


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.

Module Logo


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.

Corps de l’e-mail


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

Capture d’écran d’un article de support HubSpot


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.

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 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 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
Listing des articles


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.

Capture d’écran d’un article de support HubSpot


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.
Capture d’écran d’un article de support HubSpot


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.

En-tête de section


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.

Menu simple


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.

Préférences d’abonnement


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.

Mise à jour des préférences 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.

Capture d’écran d’un article de support HubSpot