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

Il s'agit d'une vue d'ensemble de tous les modules par défaut disponibles pour les modèles de glisser-déposer dans les outils de conception. Chaque type de module peut être personnalisé avec des options de style et de contenu dans l'inspecteur. Vous pouvez également ajouter un module par défaut à un modèle HTML avec son bloc de texte HubL. 

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 Pro et Entreprise et CMS Hub Pro et Entreprise ont un dossier @hubspot dans les outils 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. 
  
  
• 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 alternatif s'affiche lorsque les destinataires d'un e-mail cliquent sur le lien de désabonnement si HubSpot ne parvient pas à identifier leur adresse e-mail. Vous pouvez personnaliser le texte d'aide qui s'affiche sur la page de désabonnement alternative dans la section Contenu par défaut de ce module. 

Commentaires du blog

Remarque : Les commentaires de blog ne sont pas compatibles avec les modèles de page ou d'e-mail. 

Le module Commentaires du blog permet d'insérer une section dédiée aux commentaires sur un 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. 

Contenu du blog

Remarque : Le module Contenu du blog n'est pas compatible avec 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 Modifier le modèle d'article, et modifier le balisage de votre page de listing en cliquant sur Modifier le modèle de listing. Apprenez-en davantage sur  le balisage des modules de contenu du blog.

Abonnement par e-mail au blog

Remarque : Le module d'abonnement aux e-mails de blog n'est pas compatible avec les modèles d'e-mail. 

Le module d'abonnement aux e-mails de blog permet aux visiteurs de s'abonner aux e-mails de notification de votre blog en remplissant un formulaire. Ce module comprend un grand nombre de formulaires d'abonnement à votre blog, qui peuvent être personnalisés dans l'outil Formulaires.

Cliquez sur le menu déroulant Sélectionner un blog à afficher et sélectionnez le blog auquel vos visiteurs sont inscrits. Dans la zone de texte Titre à afficher au-dessus du formulaire, personnalisez le texte qui s'affiche dans le titre au-dessus du formulaire. Placez le curseur sur la réponse incluse existante et cliquez sur l'icône Développer expand pour personnaliser le texte qui s'affiche après qu'un visiteur a soumis un formulaire.

Call-to-action

Un module Call-to-action (CTA) place un CTA dans son propre module dans 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   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 en tant que CTA par défaut. 

Colonne flexible

Des colonnes flexibles peuvent être ajoutées à des modèles de page pour vous permettre d'ajouter, de supprimer et de réorganiser les modules dans l'éditeur de contenu. 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 sélectionner Créer une colonne flexible.

Suivez-moi

Remarque : Le module Suivez-moi n'est pas compatible avec les modèles d'e-mail. 

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.

Remarque : 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. Vous pouvez ajuster la forme de l'icône, ses couleurs  et  son alignement dans le module. Vous pouvez également ajouter un compte de réseau social personnalisé et charger votre propre icône dans l'éditeur.

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. Placez ensuite le curseur sur le nom d'un réseau social et cliquez sur l'icône Modifier edit o u sur l' icône Supprimer delete pour apporter des modifications.

Cliquez sur l'icône Modifier edit pour sélectionner le réseau social qui doit s'afficher et l'URL qui y renvoie. 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 de l'outil Fichiers ou charger une nouvelle image depuis votre ordinateur.

Formulaire

Remarque : Le module de formulaire n'est pas compatible avec 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 : envoyez jusqu'à trois e-mails de suivi aux visiteurs qui soumettent le formulaire.

En-tête

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

Espacement horizontal

le module d'espacement horizontal crée une balise div qui espace les éléments sur une page.

Image

Un module d'image ajoute une image unique à 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. Découvrez-en davantage sur les paramètres personnalisables du module Galerie. 

Sélecteur de langue

Remarque : Le module Sélecteur de langue n'est pas compatible avec 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 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 : 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.

Ce module apparaîtra uniquement sur les pages en ligne dont plusieurs traductions ont été publiées. 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 de votre site web. 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 de l'ensemble du contenu de votre site web, cliquez sur Modifier le logo par défaut de ce domaine.

Le module Logo sera automatiquement lié au domaine de votre entreprise. Pour remplacer cette option par défaut et renvoyer à une autre page, saisissez une URL de lien unique. 

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. Vous pouvez personnaliser le contenu par défaut du 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 le cercle coloré et sélectionnez une couleur du sélecteur de couleur, ou saisissez une valeur hexadécimale dans le champ de texte pour définir les 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 Menu ajoute des options de navigation à votre contenu et à vos modèles. Les menus sont créés et gérés directement dans les paramètres de votre site web. 

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 dans 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 le  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 dans le  menu,  lesquelles sont liées à  la page  consultée : affichez les éléments de menu liés à la page consultée.
   • 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 max. : sélectionnez le nombre maximal de menus contenant des éléments enfants pouvant être affichés.
4. Orientation : indiquez si les éléments de menu s'affichent horizontalement ou verticalement.
5. Activer les lanceurs : sélectionnez cette case à cocher pour afficher les éléments de menu enfants lorsque vous placez le curseur de la souris sur l'élément parent. Désélectionnez cette case à cocher pour toujours afficher les éléments de menu enfants.

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 à vos utilisateurs de modifier le contenu du module dans l'éditeur de contenu sans modifier le code. Ces composants seront libellés avec une icône Module customModules dans le localisateur et l'inspecteur. Pour en savoir plus sur l'utilisation de modules au code personnalisé, consultez notre documentation pour les développeurs.

Adresse de l'entreprise

Le module Adresse de l'entreprise comprend les jetons nécessaires à inclure dans tous les modèles d'e-mail afin d'envoyer des e-mails marketing conformément à la législation. Le style de ce module peut être modifié. 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é et sélectionnez une couleur du sélecteur de couleur, ou saisissez une valeur hexadécimale dans le champ de texte pour définir les 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 d'insérer une ligne de texte dans l'éditeur de contenu. 

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

Remarque : Le module d'abonnement aux e-mails de blog n'est pas compatible avec 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 aux e-mails de blog n'est pas compatible avec 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 Texte enrichi est le module le plus utilisé parmi les outils de contenu HubSpot. Il prend en charge les options de modification pour différents composants, tels que du texte, des images et des CTA.

Pour ajouter du contenu par défaut à ce module, cliquez sur Développer ou cliquez sur le contenu prévisualisé pour ouvrir un éditeur de texte enrichi.

Listing RSS

Remarque : Le module Listing RSS n'est pas compatible avec les modèles d'e-mail. Utilisez plutôt un e-mail 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.

Les modules Listing RSS peuvent afficher un blog ou une balise spécifique. Cliquez sur le bouton correspondant 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 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.

En-tête de section

Le module En-tête de section vous 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. 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 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 compatible uniquement avec les modèles système des préférences d'abonnement. 

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 Confirmation de mise à jour de l'abonnement est un module de texte enrichi disponible sur les modèles système de confirmation de la mise à jour des abonnements. 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 Afficher en tant que page web donne aux destinataires des e-mails la possibilité d'ouvrir la version web d'un e-mail.