Les modules par défaut de HubSpot

Dans cet article, vous découvrirez les modules par défaut que HubSpot met à votre disposition pour vos modèles et vos pages. Chaque type de module peut être personnalisé à l'aide d'options de style et de contenu dans l'inspecteur . Vous pouvez également ajouter un module par défaut à un modèle HTML avec son snippet HubL. Pour en savoir plus sur le développement avec des modules par défaut, consultez la documentation pour les développeurs de HubSpot.

Ajouter un module à votre modèle

Pour ajouter des modules à vos modèles de glisser-déposer, cliquez sur + Ajouter dans l'inspecteur dans l'angle supérieur droit de l'éditeur. Tous les modules par défaut et tous les modules ou groupes personnalisés enregistrés apparaîtront ici. Pour trouver un module spécifique, saisissez son nom dans la barre de recherche. Vous pouvez également cliquer sur le menu déroulant Filtrer par catégorie ou balises et sélectionner un ou plusieurs filtres.

Lorsque le module est sélectionné dans l'éditeur, vous pouvez en modifier les styles, les paramètres et le contenu dans l'inspecteur. Dans la section Habillage HTML, cliquez sur Développer pour ajouter plus de styles personnalisés dans l'éditeur de code.

Au bas de l'inspecteur, vous pouvez verrouiller le module afin que les utilisateurs ne puissent modifier le contenu par défaut lors de la modification d'un blog, d'un e-mail ou d'une page. Cliquez sur le bouton Empêcher la modification dans les éditeurs de contenu pour activer ce paramètre.

Personnaliser un module par défaut

Tous les comptes Marketing Hub Professional et Entreprise et CMS Hub Professional et Entreprise ont par défaut un dossier @hubspot dans les outils de conception. Ce dossier contient tous les thèmes et les modules par défaut, y compris les modules d'e-mail par 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 avec le bouton droit de la souris sur le module par défaut que vous souhaitez cloner, puis sélectionnez Cloner le module. 
  
  
• Dans le module cloné, modifiez le code source du module dans le panneau de modification centralisé.
• 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

Sauvegarde du désabonnement

Le modèle de désabonnement de secours s'affiche aux destinataires d'un e-mail qui cliquent sur un lien de désabonnement si HubSpot n'est pas en mesure de déterminer leur adresse e-mail. Vous pouvez personnaliser le texte d'aide qui apparaît sur votre page de désinscription de sauvegarde dans la section Contenu par défaut de ce module. 

Commentaires de blog

Veuillez noter: le module de commentaires de blog n'est pas disponible pour les modèles de page ou d'e-mail. 

Le module de commentaires de blog ajoute une section de commentaires à un modèle d'article de blog. Vous pouvez personnaliser le formulaire de commentaires de blog dans votre outil de formulaires. Le nom du formulaire fera référence au titre de votre blog. 

Contenu du blog

Veuillez noter: le module de contenu de blog n'est pas disponible pour les modèles de page ou d'e-mail. 

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 de vos articles en cliquant sur Edit Post Template et modifier le balisage de votre page d'annonce en cliquant sur Edit Listing Template. En savoir plus sur blog content module markup.

Abonnement par e-mail au blog

Veuillez noter: le module d'abonnement à l'e-mail du blog n'est pas disponible pour les modèles d'e-mail. 

Le module d'abonnement aux e-mails du blog permet aux visiteurs de s'abonner aux e-mails de votre blog en remplissant un formulaire. Ce module est alimenté par votre formulaire d'inscription au blog , qui peut être personnalisé dans votre outil de formulaires.

Cliquez sur le menu déroulant Select blog to display et sélectionnez le blog auquel vos visiteurs sont abonnés. Dans la zone de texte Titre à afficher au-dessus du formulaire, personnalisez le texte qui s'affiche dans le titre au-dessus du formulaire. Survolez la réponse en ligne existante et cliquez sur l'icône expand expand pour personnaliser le texte qui apparaît après que le visiteur a soumis le formulaire.

Call-to-action

Un module CTA place un CTA dans son propre module au sein de votre mise en page. Vous pouvez également insérer un CTA dans un module de texte enrichi .

Dans l'inspecteur, cliquez sur le menu déroulant CTA  et  et sélectionnez un CTA par défaut pour ce module dans votre modèle. Ou cliquez sur + Créer un nouveau CTA dans le même menu pour créer un nouveau CTA comme CTA par défaut. 

Suivez-moi

Remarque : le module "follow me" n'est pas disponible pour les modèles d'e-mail. 

Vous pouvez utiliser le follow me  Suivez-moi  pour aider vos 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 spécifier quels réseaux sociaux apparaissent dans ce module dans la section Follow Me de vos paramètres sociaux .

Remarque : le module Follow Me utilise des icônes par défaut pour chaque réseau social. Si vous souhaitez utiliser vos propres icônes sociales personnalisées  , vous pouvez créer une version personnalisée du module. 

Formulaire

Veuillez noter: le module de formulaire n'est pas disponible pour les modèles d'e-mail. 

Le module Formulaires vous permet d'ajouter un formulaire à votre page ou à votre blog afin de récupérer les coordonnées des visiteurs de votre site web.

Pour ce module, vous pouvez personnaliser les paramètres suivants : 

1. Titre de formulaire : saisissez le titre du formulaire qui s'affichera sur la page ou le blog.
2. Formulaire : sélectionnez un formulaire HubSpot existant qui doit s'afficher sur la page ou ajoutez un nouveau formulaire.
3. Quel contenu voulez-vous qu'un visiteur voie après avoir envoyé votre formulaire ? : choisissez de rediriger une personne qui soumet le formulaire vers une autre page ou d'afficher un message de remerciement en ligne sur la même page.
4. Message de remerciement : personnalisez votre message de remerciement en ligne.
5. Envoyer les notifications pour les soumissions de formulaire à des adresses spécifiques au lieu de celles par défaut : envoyez des e-mails de notification depuis l'outil Formulaires à des adresses spécifiques. Cela remplacera tout destinataire des notifications défini dans l'outil Formulaires. 
6. Ajouter au workflow : ajoutez à un workflow les visiteurs qui soumettent le formulaire (Marketing Hub Pro ou Entreprise uniquement).
7. Envoyer un e-mail de suivi : envoyer jusqu'à trois e-mails de suivi aux visiteurs qui soumettent le formulaire.

Rubrique

Un module d'en-tête affiche une ligne de texte dans une balise HTML heading. Saisissez le texte de l'en-tête par défaut dans la case Contenu de l'en-tête. Cliquez sur le menu déroulant Header type pour sélectionner la balise d'en-tête (H1-H4).

Image

Un module image ajoute une seule image à un contenu. Découvrez-en davantage sur les options de modification des modules d'image. 

Galerie d'images

Le module Galerie ajoute une série d'images en rotation à un seul module. En savoir plus sur les paramètres personnalisables du module de galerie d'images. 

Sélecteur de langue

Veuillez noter: le module de changement de langue n'est pas disponible pour les modèles d'e-mail. 

Le module Sélecteur de langue permet aux visiteurs de basculer d'une version traduite d'une page ou d'un blog à une autre. Cliquez sur le menu déroulant Mode d'affichage pour personnaliser l'affichage des noms de vos langues traduites :

• Pagelang : le nom de chaque langue apparaîtra 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é/Localized : 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 traduite en français, lorsque vous cliquez sur le sélecteur de langue, vous verrez apparaître English et Français comme noms de langue.
• Hybride : une combinaison des deux. Par exemple, si vous consultez la version anglaise d'une page traduite en français, lorsque vous cliquez sur le sélecteur de langue, vous verrez apparaître les noms anglais et français (French).

Ce module apparaîtra uniquement sur les pages en ligne dont plusieurs traductions ont été publiées. En savoir plus sur le travail avec contenu multilingue dans HubSpot.

Logo

Le module Logo introduit automatiquement le logo de votre entreprise à partir des paramètres de votre site . Pour utiliser un autre logo, cliquez sur le bouton Remplacer le logo par défaut pour cette page pour activer le chargement d'une nouvelle image pour cette page uniquement. Pour modifier le logo par défaut pour tout le contenu dans les paramètres de votre site Web, cliquez sur Modifier le logo par défaut dans ce domaine.

Votre module logo sera automatiquement lié au domaine de votre entreprise. Pour remplacer cette valeur par défaut et créer un lien vers une autre page, saisissez une URL unique pour le lien . 

Grille du logo

Le module logo grid vous permet de disposer plusieurs logos de différentes dimensions dans une grille cohérente. Vous pouvez personnaliser la couleur d'arrière-plan, le rapport d'aspect, la taille de la grille, la taille de l'espacement et la hauteur maximale du logo. 

Corps principal de l'e-mail

Le module principal du corps de l'e-mail est un module de texte riche standard qui est inclus par défaut dans chaque modèle d'e-mail. Vous pouvez personnaliser le contenu par défaut de  pour le corps de l'e-mail sur un modèle spécifique.

Outre les options standard de style, ce module peut être personnalisé avec des couleurs par défaut, des bordures et des espacements. Cliquez sur la bulle de couleur et sélectionnez une couleur dans le sélecteur de couleurs ou entrez une valeur hexadécimale dans le champ de texte pour définir des couleurs par défaut. Saisissez des valeurs en pixels dans les champs de texte Largeur de bordure et Espacement intérieur pour définir un espacement par défaut. 

Menu

Le module de menu permet de naviguer dans votre contenu et vos modèles. Les menus sont créés et gérés directement dans les paramètres de votre site . 

Dans les outils de conception, vous pouvez personnaliser les fonctionnalités suivantes du module Menu :

1. Menu : sélectionnez l'un de vos menus existants à partir de vos paramètres.
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 : maintenez le menu cohérent sur toutes vos pages.
   • Dynamique par section- Afficher les pages dans  menu  lesquelles sont liées à  la section  consultée : affichez les éléments du menu en rapport avec l'élément du menu principal consulté. 
   • Dynamique par page- Afficher les pages en  menu  lesquelles sont liées à  la page  en cours de visualisation : afficher les éléments de menu liés à la page spécifique en cours de visualisation.
   • Menu de style fil d'Ariane (utilise le flux horizontal) : affichez des éléments du menu horizontalement dans un chemin relatif en haut de votre site.
3. Niveaux maximums : sélectionner le nombre maximum d'éléments du menu enfant  qui peuvent être affichés.
4. Orientation : indiquez si les éléments de menu s'affichent horizontalement ou verticalement.
5. Enable flyouts: select this checkbox to show child menu items when you hover over the parent. Décochez cette case pour toujours afficher les éléments du menu enfant.

Modules

Les modules créés dans l'éditeur de code vous permettent d'utiliser HTML, CSS, Javascript et HubL pour ajouter des fonctionnalités avancées à vos modèles, tout en permettant à vos utilisateurs de modifier le contenu du module dans l'éditeur de contenu sans changer le code. Ces composants seront libellés avec une icône de module customModules dans le finder et l'inspecteur. Pour en savoir plus sur l'utilisation des modules codés sur mesure, consultez la documentation destinée aux développeurs sur le site .

Adresse de l'entreprise

Le module de localisation des bureaux comprend les jetons requis qui doivent être inclus dans un modèle d'e-mail afin d'envoyer légalement des e-mails de marketing. Bien que vous puissiez modifier le style de ce module, vous ne pourrez pas enregistrer un modèle d'e-mail sans le module d'information sur l'emplacement des bureaux ou le site requis  HubL  tags.  

Outre les options standard de style, ce module peut être personnalisé avec des couleurs par défaut, des bordures et des espacements. Cliquez sur la bulle de couleur et sélectionnez une couleur dans le sélecteur de couleurs ou entrez une valeur hexadécimale dans le champ de texte pour définir des couleurs par défaut. Saisissez des valeurs en pixels dans les champs de texte Largeur de bordure et Espacement intérieur pour définir un espacement par défaut. 

Une ligne de texte

Le module "une ligne de texte" permet aux utilisateurs de modifier une seule ligne de texte dans l'éditeur de contenu. 

Pied de page

Le module de pied de page affiche des informations sur le copyright avec l'année en cours et le nom de votre entreprise. Le nom de l'entreprise est automatiquement repris de la section Footer des paramètres de votre e-mail .

Invite de mot de passe

Le module d'invite de mot de passe est disponible sur l'invite de mot de passe modèles de système. 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

Remarque : le module d'abonnement au blog par e-mail n'est pas disponible pour les modèles d'e-mail. 

Le module Filtrage des articles affiche une liste d'articles de blog associés à un sujet, un mois ou un auteur donné. 

Vous pouvez personnaliser les paramètres suivants de ce module dans la section Contenu par défaut : 

• Sélectionnez un blog à afficher : sélectionnez les articles de blog utilisés.
• Liste de valeurs permettant de filtrer les liens : indiquez si le module est filtré par balise, mois ou auteur.
• Ordre des valeurs permettant de filtrer les liens : indiquez si les valeurs seront organisées par ordre alphabétique ou par nombre d'articles.
• Titre de liste à afficher : saisissez le titre qui s'affichera au-dessus des articles.
• Nombre maximal de valeurs de filtre à afficher : saisissez le nombre maximal d'articles pour un filtre spécifique. Laissez ce champ vide pour afficher tous les articles. 
• Texte du lien permettant d'afficher des valeurs supplémentaires, le cas échéant : saisissez le texte qui s'affiche si une catégorie contient plus d'articles disponibles. Le texte par défaut est Voir tout. 

Listing des articles

Remarque : le module d'abonnement au blog par e-mail n'est pas disponible pour les modèles d'e-mail. 

Le module Listing des articles permet d'afficher une liste des articles d'un blog HubSpot. Vous pouvez configurer le module de façon à afficher les articles les plus récents ou les plus populaires au cours du mois dernier, des six derniers mois, de l'année dernière ou depuis toujours. 

Il est possible de personnaliser les contenus par défaut suivants dans l'inspecteur :

• Sélectionner un blog à afficher : sélectionnez le blog dont vous souhaitez afficher le titre des articles.
• Lister les articles de blog par : sélectionnez de quelle façon vous souhaitez organiser les articles.
• Titre de liste à afficher : saisissez le titre qui s'affichera au-dessus des articles.
• Nombre maximal d'articles de blog à lister : saisissez le nombre maximal d'articles qui s'afficheront dans ce module. 

Texte enrichi

Le module de texte enrichi est le module de contenu le plus couramment utilisé dans les outils de contenu HubSpot. Il prend en charge les options d'édition pour différents composants, tels que le texte, les images et les CTA.

Pour ajouter du contenu par défaut pour ce module, cliquez sur Expand ou cliquez sur preview content pour ouvrir un éditeur de texte riche.

Listing RSS

Veuillez noter : le module de liste RSS n'est pas disponible pour les modèles d'e-mail. Utilisez plutôt un e-mail RSS. 

Vous pouvez utiliser un module de liste RSS pour afficher les résumés des articles d'un blog HubSpot ou d'un flux RSS externe.

Les modules de listes RSS peuvent afficher un blog ou un tag spécifique. Cliquez pour activer l'interrupteur correspondant pour indiquer si une image de présentation, le nom de l'auteur, un résumé ou la date de publication doivent être affichés avec chaque message.

Après avoir activé ces paramètres, vous pouvez personnaliser les détails suivants : 

• Afficher le nom de l'auteur : saisissez le Texte d'attribution de l'auteur qui doit s'afficher 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 en 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 : sélectionnez le Format de la date de publication pour personnaliser le formatage 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.

Titre de la section

Le module d'en-tête de section permet d'afficher une balise d'en-tête h1 avec un sous-titre de paragraphe. Ce module est idéal pour titrer 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 Editer le menu pour ajouter des éléments de menu, des liens et sélectionner l'orientation du menu. 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. Découvrez-en davantage 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 Activé ? à côté d'un réseau social spécifique pour l'inclure dans votre page ou 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.

Remarque : le module de partage social utilise des icônes par défaut pour chaque réseau social. Si vous souhaitez utiliser vos propres icônes sociales personnalisées  , vous pouvez créer une version personnalisée du module.

Préférences d'abonnement

Les modules de préférences d'abonnement ne sont disponibles que sur les préférences d'abonnement modèles de système. 

Il permet de personnaliser la page affichée lorsque le destinataire d'un e-mail accède à ses préférences d'abonnement ou se désabonne des communications par e-mail.

Confirmation de mise à jour de l'abonnement

Le module de confirmation de la mise à jour de l'abonnement est un module de texte enrichi disponible sur les modèles du système . Il vous permet de personnaliser la page affichée lorsque le destinataire d'un e-mail met à jour ses paramètres d'abonnement.

Afficher en tant que page web

Le module "view as web page" permet aux destinataires d'un e-mail d'ouvrir la page Web d'un e-mail. 

Lien WhatsApp 

Remarque : ce module est disponible uniquement pour les comptes Marketing Hubet Service Hub Professional et Entreprise.

Utilisez le module de lien WhatsApp pour permettre aux visiteurs du site Web de se connecter directement avec vous via WhatsApp. Ce module peut être ajouté aux pages du site web, aux articles de blog et aux pages de listes de blogs. Pour utiliser ce module, vous devez connecter votre canal WhatsApp à votre boîte de réception des conversations.

Le style des boutons, comme la couleur et l'espacement, peut être personnalisé dans l'onglet Styles de l'éditeur de page, et vous pouvez configurer les éléments suivants :

• Numéro WhatsApp : sélectionner un numéro WhatsApp connecté.
• Texte d'opt-in : sélectionner le texte d'opt-in et d'opt-out . 
• Afficher : choisir si le bouton affiche du texte, une icône ou les deux.
• Position de l'icône : choisir si l'icône apparaît à gauche ou à droite du texte.
• Texte du bouton : saisir le texte qui apparaît sur le bouton.
• Titre de l'icône WhatsApp : pour l'accessibilité, saisissez la description de l'icône pour les lecteurs d'écran.