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

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 :

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 é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 : 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.
5. 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 et  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. 

Colonne flexible

Une colonne flexible peut être ajoutée à un modèle de page HubSpot, et vous permet d'ajouter, de supprimer et de réorganiser les modules sur la page dans l'éditeur de page. Cela permet aux créateurs de page d'utiliser un seul modèle pour créer plusieurs mises en page. 

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.

Suivez-moi

Remarque : ce module est uniquement disponible pour les modèles de blog et de page.

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

Remarque : ce module est uniquement disponible pour les e-mails créés dans l'éditeur glisser-déposer. Vous pouvez repérer le module dans l'éditeur sous le nom Réseaux sociaux.

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 glisser-déposer. 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 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  icône 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.

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 une 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 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 :

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

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

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 mise à jour de l'abonnement

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.