Vue d'ensemble des modules de thème personnalisés

Dernière mise à jour: January 9, 2018

Disponible avec :

Marketing Hub Basique, Professional, Enterprise

Les modules personnalisés sont des fonctionnalités spéciales qu'un développeur peut créer pour votre site avec des éléments HTML, CSS, JavaScript et HubL. Ils sont pratiques car les créateurs de contenu peuvent aisément les personnaliser sans avoir à en modifier le code. Les thèmes HubSpot comportent plusieurs modules personnalisés réutilisables qui sont standard dans les modèles de vos pages d'accueil, À propos et Contactez-nous, et qui peuvent être ajoutés à vos modèles HubSpot de base.

Ils incluent les modules personnalisés suivants :

Les thèmes HubSpot par défaut ne sont disponibles que dans les nouveaux comptes HubSpot. Si vous souhaitez qu'un thème HubSpot standard soit installé dans un compte existant, suivez ces instructions pour vérifier que votre compte est compatible.

Module FAQ

Le module de la Foire Aux Questions permet de répondre aux questions que les visiteurs se posent sur votre entreprise. Le module FAQ personnalisé se compose d'une zone de texte Questions, d'un éditeur de texte enrichi pour le champ Réponses et d'une option permettant de développer ou de masquer le module.

FAQ Module

Si vous ajoutez un module FAQ à un modèle (comme le modèle de votre page d'accueil), vous pourrez modifier les questions et les réponses dans l'éditeur de page.

  1. Question : rédigez la question dans la zone de texte Question.
  2. Réponse de la FAQ : rédigez la réponse dans l'éditeur de texte enrichi Réponse.
  3. Développer : la case à cocher vous permet de décider si le module FAQ sera développé ou masqué par défaut.
HubSpot Help article screenshot

Membres de l'équipe

Le module Membres de l'équipe permet d'humaniser votre entreprise et d'informer les visiteurs de votre site qu'ils entrent en contact avec des êtres humains. Il se compose de sept champs : portrait, nom, intitulé de poste, biographie, lien Facebook, lien LinkedIn et lien Twitter.

HubSpot Help article screenshot
  1. Portrait : il s'agit d'un module image. Nous vous conseillons d'utiliser les photos de profils LinkedIn.
  2. Nom : cette ligne de texte vous permet d'indiquer un prénom et un nom.
  3. Intitulé de poste : cette ligne de texte sert à indiquer l'intitulé du poste des membres de votre équipe.
  4. Biographie : cet éditeur de texte enrichi permet d'entrer la biographie des membres de votre équipe.
  5. Liens vers les réseaux sociaux : il s'agit de lignes de textes où vous pouvez entrer les liens des profils de réseaux sociaux des membres de votre équipe. Veuillez utiliser ce format : https://www.facebook.com/hubspot
HubSpot Help article screenshot

Module de puits

Le module de puits est idéal pour attirer l'attention vers le contenu.  Il intègre des styles prédéfinis en fonction du type d'informations qu'il contient. Il inclut les champs suivants : type de puits, taille du puits, fonctionnalité de fermeture et éditeur de texte du puits.

Well module
  1. Type de puits : ce menu déroulant vous permet d'appliquer un style à votre puits. Le style contrôle le thème de couleur du puits, y compris la couleur de l'arrière-plan, la couleur du texte et la couleur des bordures. Les styles disponibles sont :
    • Défaut : couleur par défaut de votre thème
    • Alerte : rouge
    • Primaire : bleu
    • Succès : vert
    • Information : bleu clair
    • Simple : gris
  2. Taille du puits : ce menu déroulant vous permet d'appliquer un certain remplissage à votre puits. Les options de taille disponibles sont :
    • Petit : 20 px
    • Moyen : 24 px
    • Grand : 28 px
  3. Fonctionnalité de fermeture : cette case à cocher permet de placer une icône X dans l'angle supérieur droit du puits. Les visiteurs ont ainsi la possibilité de le fermer. Cela est utile si vous utilisez un puits pour afficher un message d'alerte.
  4. Éditeur du texte du puits : la section où vous entrez le contenu du puits.
HubSpot Help article screenshot

Avis

Le module Avis est parfait pour montrer à vos visiteurs ce que vos clients disent de vous. Il se compose des champs suivants : nom, entreprise, portrait et citation.

Testimonial module
  1. Nom : cette ligne de texte vous permet d'indiquer un prénom et un nom.
  2. Entreprise : cette ligne de texte sert à mentionner le nom de l'entreprise.
  3. Portrait : il s'agit d'un module image. Nous vous conseillons d'utiliser les photos de profils LinkedIn.
  4. Citation : la citation qui est affichée dans la bulle de texte.
HubSpot Help article screenshot

Onglets

Les onglets, ou contenus à panneaux multiples, sont parfaits pour afficher des données et spécifications de produits. On les trouve en général sur des pages produits dont le contenu est prévisible et répétitif.

Tabber module
  1. Titre de l'onglet : le texte qui apparaît dans l'onglet.
  2. Panneau de contenu de l'onglet : le contenu qui correspond à l'onglet et qui apparaît lorsque celui-ci est sélectionné.
HubSpot Help article screenshot
Le module personnalisé Onglets est conçu avec trois onglets et trois panneaux de contenus. Pour augmenter ou diminuer le nombre d'onglets et de panneaux, vous devez modifier le code HTML du module lui-même.

Tableau des tarifs

Un tableau des tarifs est idéal pour les entreprises qui fonctionnent par abonnements. Le module se compose des champs suivants : titre, tarif et fréquence (par jour, mois ou an), contenu et bouton d'abonnement.

Pricing table
  1. Titre du tableau des tarifs : le titre principal du tableau des tarifs. Vous pouvez indiquer le nom d'un abonnement, comme Light, Basique ou Pro.
  2. Tarif : la zone tarif vous permet d'indiquer un montant.
  3. Date : la zone Date sert à indiquer la fréquence du paiement (par jour, mois ou an).
  4. Éditeur de texte enrichi du tableau des tarifs : cet éditeur permet d'indiquer le contenu principal des plans tarifaires. Nous vous conseillons d'utiliser des listes à puces pour souligner les principaux avantages.
  5. Texte du bouton du tableau des tarifs : cette case vous permet d'entrer le texte qui sera affiché sur le bouton. Il s'agit souvent de « S'inscrire » ou « En savoir plus ».
  6. Libellé Populaire du tableau des tarifs : cette case à cocher permet de mettre en avant l'option tarifaire la plus populaire.
  7. Lien du bouton du tableau des tarifs : la page vers laquelle les visiteurs sont dirigés lorsqu'ils cliquent sur le bouton.
HubSpot Help article screenshot

Module icône

Les icônes sont parfaites pour attirer l'attention vers le contenu et en améliorer la lisibilité. Le module personnalisé Icône vous permet ainsi d'afficher les icônes de la bibliothèque Font Awesome grâce à des codes courts.  Ces codes courts servent dans divers modules de texte.

Icon module
  1. Module Icône : le champ où vous entrez l'icône voulue. Insérez l'icône voulue entre des guillemets, comme dans l'exemple ci-dessous : [fa icon="home"].
  2. Taille de l'icône : pour modifier la taille en pixels de l'icône. 
HubSpot Help article screenshot

Liste exhaustive des icônes disponibles :

  ajuster
  ancre
  archive
  flèches
  flèches-h
  flèches-v
  astérisque
  interdiction
  graphique-fond-clair
  code barres
  barres
  bière
  cloche
  cloche-fond-clair
  éclair
  livre
  marque-page
  marque-page-fond-clair
  mallette
  insecte
  bâtiment-fond-clair
  mégaphone
  cible
  calendrier
  calendrier-fond-clair
  appareil-photo
  appareil-photo-rétro
  lecture-carré-fond-clair-bas
  lecture-carré-fond-clair-gauche
  lecture-carré-fond-clair-droite
  lecture-carré-fond-clair-haut
  certificat
  coche
  coche-cercle
  coche-cercle-fond-clair
  coche-carré
  coche-carré-fond-clair
  cercle
  cercle-fond-clair
  horloge-fond-clair
  cloud
  cloud-télécharger
  cloud-charger
  code
  code-embranchement
  café
  engrenage
  engrenages
  commentaire
  commentaire-fond-clair
  commentaires
  commentaires-fond-clair
  boussole
  carte-crédit
  réduire
  ligne de mire
  couverts
  tableau de bord (alias)
  bureau
  point-cercle-fond-clair
  télécharger
  modifier (alias)
  points de suspension-h
  points de suspension-v
  enveloppe
  enveloppe-fond-clair
  gomme
  échange
  point-exclamation
  point-exclamation-cercle
  point-exclamation-triangle
  lien-externe
  lien-externe-carré
  œil
  œil-barré
  féminin
  avion-chasse
  film
  filtre
  flamme
  extincteur
  drapeau
  drapeau-carreaux
  drapeau-fond-clair
  flash (alias)
  flasque
  dossier
  dossier-fond-clair
  dossier-ouvert
  dossier-ouvert-fond-clair
  déception-fond-clair
  manette-jeu
  marteau
  engrenage (alias)
  engrenages (alias)
  cadeau
  verre
  globe
  groupe (alias)
  disque-dur-fond-clair
  casque
  cœur
  cœur-fond-clair
  maison
  boîte de réception
  information
  information-cercle
  clé
  clavier-fond-clair
  ordinateur-portable
  feuille
  marteau (alias)
  citron-fond-clair
  niveau-bas
  niveau-haut
  ampoule-fond-clair
  emplacement-flèche
  verrouiller
  magie
  aimant
  faire-suivre-e-mail (alias)
  répondre-e-mail (alias)
  répondre-à-tous-e-mail
  masculin
  emplacement-carte
  indifférence-fond-clair
  microphone
  microphone-barré
  moins
  moins-cercle
  moins-carré
  moins-carré-fond-clair
  mobile
  téléphone-mobile (alias)
  argent
  lune-fond-clair
  musique
  crayon
  crayon-carré
  crayon-carré-fond-clair
  téléphone
  téléphone-carré
  image-fond-clair
  avion
  plus
  plus-cercle
  plus-carré
  plus-carré-fond-clair
  éteindre
  imprimer
  pièce-puzzle
  code-QR
  question
  question-cercle
  guillemets-ouvrants
  guillemets-fermants
  aléatoire
  rafraîchir
  répondre
  répondre-tous
  retweeter
  route
  fusée
  rss
  rss-carré
  recherche
  recherche-moins
  recherche-plus
  partager
  partager-carré
  partager-carré-fond-clair
  bouclier
  panier-achat
connexion
  déconnexion
  signal
  plan-site
  sourire-fond-clair
  trier
  trier-alpha-az
  trier-alpha-za
  trier-montant-croissant
  trier-montant-décroissant
  trier-croissant
  trier-décroissant
  trier-décroissant (alias)
  trier-chiffre-croissant
  trier-chiffre-décroissant
  trier-croissant (alias)
  chargement
  carré
  carré-fond-clair
  étoile
  étoile-moitié
  étoile-moitié-vide (alias)
  étoile-moitié-pleine (alias)
  étoile-moitié-fond-clair
  étoile-fond-clair
  indice
  valise
  soleil-fond-clair
  exposant
  tablette
  compte-tours
  étiquette
  étiquettes
  tâches
  terminal
 punaise
  pouces-bas
  pouces-bas-fond-clair
  pouces-haut-fond-clair
  pouces-haut
  ticket
  multiplier
  multiplier-cercle
  multiplier-cercle-fond-clair
  teinter
  modifier-bas (alias)
  modifier-gauche (alias)
  modifier-droite (alias)
  modifier-haut (alias)
  poubelle-fond-clair
  trophée
  camion
  parapluie
  déverrouiller
  déverrouiller-haut
  non-trié (alias)
  charger
  utilisateur
  utilisateurs
  caméra-vidéo
  volume-bas
  volume-éteint
  volume-haut
  alerte (alias)
  fauteuil-roulant
  clé-molette
  coche-carré
  coche-carré-fond-clair
  cercle
  cercle-fond-clair
  point-cercle-fond-clair
  moins-carré
  moins-carré-fond-clair
  plus-carré
  plus-carré-fond-clair
  carré
  carré-fond-clair
  bitcoin (alias)
  btc
  CNY (alias)
  dollar (alias)
  EUR
  euro (alias)
  GBP
  INR
  JPY
  KRW
  argent
  RMB (alias)
  rouble (alias)
  RUB
  rouble (alias)
  roupie (alias)
  TRY
  livre-turque (alias)
  USD
  won (alias)
  yen (alias)
  angle-double-bas
  angle-double-gauche
  angle-double-droite
  angle-double-haut
  angle-bas
  angle-gauche
  angle-droite
  angle-haut
  flèche-cercle-bas
  flèche-cercle-gauche
  flèche-cercle-bas-fond-clair
  flèche-cercle-gauche-fond-clair
  flèche-cercle-droite-fond-clair
  flèche-cercle-haut-fond-clair
  flèche-cercle-droite
  flèche-cercle-haut
  flèche-bas
  flèche-gauche
  flèche-droite
  flèche-haut
  flèches
  flèches-diagonale
  flèches-h
  flèches-v
  flèche-haut
  flèche-gauche
  flèche-droite
  lecture-carré-fond-clair-bas
  lecture-carré-fond-clair-gauche
  lecture-carré-fond-clair-droite
  lecture-carré-fond-clair-haut
  flèche-haut
  chevron-cercle-bas
  chevron-cercle-gauche
  chevron-cercle-droite
  chevron-cercle-haut
  chevron-bas
  chevron-gauche
  chevron-droite
  chevron-haut
  main-bas-fond-clair
  main-gauche-fond-clair
  main-droite-fond-clair
  main-haut-fond-clair
  longue-flèche-bas
  longue-flèche-gauche
  longue-flèche-droite
  longue-flèche-haut
  modifier-bas (alias)
  modifier-gauche (alias)
  modifier-droite (alias)
  modifier-haut (alias)
  flèches-diagonale
  retour
  comprimer
  éjecter
  développer
  retour-rapide
  avance-rapide
  avance
  pause
  lecture
  lecture-cercle
  lecture-cercle-fond-clair
  pas-arrière
  pas-avant
  arrêt
  lecture-youtube
 
  adn
  android
  apple
  bitbucket
  bitbucket-carré
  bitcoin (alias)
  btc
  css3
  dribbble
  dropbox
  facebook
  facebook-carré
  flickr
  foursquare
  github
  github-alt
  github-carré
  gittip
  google-plus
  google-plus-carré
  html5
  instagram
  linkedin
  linkedin-carré
  linux
  maxcdn
  pagelines
  pinterest
  pinterest-carré
  renren
  skype
  stack-exchange
  stack-overflow
  trello
  tumblr
  tumblr-carré
  twitter
  twitter-carré
  vimeo-carré
  vk
  weibo
  windows
  xing
  xing-carré
  youtube
  lecture-youtube
  youtube-carré
 
 

Veuillez noter que la version de Font Awesome hébergée sur HubSpot n'est pas mise à jour. Si vous souhaitez utiliser une icône récente, chargez vos propres fichiers de polices dans le Gestionnaire de fichiers, puis remplacez la référence @font-face par l'URL src souhaitée.

Article précédent:

Article suivant: