Utiliser des images dans le contenu HubSpot

Vous pouvez ajouter des images à des modules de texte enrichi ou à des modules d'image dans le contenu de HubSpot. Les modules de texte enrichi prennent en charge plusieurs types de contenu (images, texte, CTA, etc.), tandis que chaque module d'image ne peut contenir qu'une seule image. 

Remarque : Les modules de texte et de texte enrichi personnalisés dans l'éditeur d'e-mails en glisser-déposer ne peuvent pas contenir d'images. 

Ajouter des images

• Accédez à votre contenu :

  • Pages de site web : Depuis votre compte HubSpot, accédez à Marketing > Site web > Pages de site web.
  • Pages de destination : Depuis votre compte HubSpot, accédez à Marketing > Pages de destination.
  • Blog : Depuis votre compte HubSpot, accédez à Marketing > Site web > Blog.
  • Base de connaissances : Depuis votre compte HubSpot, accédez à Service client > Base de connaissances.

• • E-mail : Depuis votre compte HubSpot, accédez à Marketing > E-mail.
• Passez le curseur de votre souris sur votre contenu et cliquez sur Modifier. 

Remarque : seuls les fichiers d'images.png,.ico,.bmp,.jpg, et.gif peuvent être ajoutés aux e-mails de marketing

• Insérer une image : 
  • Pour ajouter une image à un module de texte enrichi, cliquez sur le module de texte enrichi , puis sur l'icône d'image insertImage ici dans la barre d'outils de texte enrichi.
  • Pour ajouter une image à un module d'image, cliquez sur le module d'image, puis sur Remplacer dans l'éditeur de barre latérale au-dessus de l'image de variable. 
• Sélectionner une image : 
  • Pour insérer une image existante, cliquez sur l'image dans le panneau de droite.

• • Pour charger une nouvelle image de votre ordinateur ou via l'URL de fichier, cliquez sur Ajouter une image dans le panneau de droite. Pour créer une nouvelle image avec les outils d'édition de Canva, cliquez sur Design with Canva. Cliquez ensuite sur l'image pour l'insérer.

Avant d'insérer une image, vous pouvez optimiser l'image pour le temps de chargement ou la résolution en cliquant sur Détails sur l'image dans le panneau de droite. Cliquez ensuite sur le menu déroulant Optimisation d'image et sélectionnez une option d'optimisation : 

• • Élevée : l'image se charge à une résolution plus élevée, mais avec un temps de chargement plus long.
  • Par défaut : l'image sera optimisée à la fois pour la résolution et le temps de chargement.
  • Faible : l'image se charge à une résolution inférieure, mais avec un temps de chargement réduit. Découvrez-en davantage sur l'optimisation des pages pour le temps de chargement dans notre documentation pour les développeurs. 

Modifier des images

Une fois que vous avez ajouté une image à votre contenu, vous pouvez modifier sa taille, ajouter du texte alternatif, ajouter un lien ou définir son comportement de chargement. 

Modifier une image dans un module de texte enrichi 

• Accédez à votre contenu :

  • Pages de site web : Depuis votre compte HubSpot, accédez à Marketing > Site web > Pages de site web.
  • Pages de destination : Depuis votre compte HubSpot, accédez à Marketing > Pages de destination.
  • Blog : Depuis votre compte HubSpot, accédez à Marketing > Site web > Blog.
  • Base de connaissances : Depuis votre compte HubSpot, accédez à Service client > Base de connaissances.
  • E-mail : Depuis votre compte HubSpot, accédez à Marketing > E-mail.
• Passez le curseur de votre souris sur votre contenu et cliquez sur Modifier. 
• Dans l'éditeur de contenu, cliquez sur l'image pour afficher la barre d'outils d'édition d'images.
• Modifier l'image : 
  • Pour ajuster la façon dont le texte s'enroule autour de l'image, cliquez sur les icônes d'alignement inline . 

• • Pour ajuster la taille de l'image, cliquez sur les flèches de largeur et de hauteur ou entrez une valeur en pixels . 
  • Pour ajuster l'espacement autour de votre image, cliquez sur le menu déroulant Spacing , puis entrez des valeurs en pixels autour des bords de l'icône de l'image.
• Pour supprimer une image d'un module de texte enrichi, cliquez sur l'image , puis sur l'icône de la corbeille delete . 

• Pour remplacer une image dans un module de texte riche, cliquez sur l'image , puis cliquez sur l'icône replace replreplace et ajoutez une nouvelle image.

• Pour établir un lien avec l'image, ajouter un texte alt ou définir le comportement de chargement, cliquez sur l'image , puis cliquez sur l'icône du crayon edit:
  • Pour ajouter un lien vers l'image, cliquez sur le menu déroulant Lien vers dans la boîte contextuelle et sélectionnez une catégorie de lien. Dans le champ ci-dessous, saisissez la destination du lien. Découvrez-en davantage sur les différents types de liens.

• • Dans le champ Alt text , entrez text pour décrire l'image aux moteurs de recherche et aux lecteurs d'écran. Vous pouvez également ajouter un texte alt aux images dans l'outil de fichiers . L'ajout d'un texte alt améliorera l'accessibilité à et le référencement de votre site. Pour en savoir plus sur l'accessibilité des sites web, consultez notre documentation pour les développeurs . 

• Pour définir le comportement de chargement d'image et personnaliser le type de lien d'image pour les moteurs de recherche, cliquez sur Avancé. 
  • Pour définir le comportement de chargement d'image, cliquez sur le menu déroulant Chargement d'image et sélectionnez une option : 
    • Lazy : l'image se charge uniquement lorsque le visiteur atteint cette partie de la page. Cela réduit le temps nécessaire au chargement de votre page et améliore le SEO. Par défaut, les images se chargeront avec ce paramètre. 

• • • Paramètres par défaut du navigateur : le comportement de chargement de l'image est déterminé par les paramètres du navigateur du visiteur. 
    • Eager : l'image se charge en même temps que la page. 

• • Pour personnaliser le type de lien d'image, dans la section Type de lien, sélectionnez un ou plusieurs attributs : 
    
    • Régulier : ce lien n'est pas sponsorisé. 
    • No follow : ce lien n'est pas associé à votre site web.
    • Sponsorisé : ce lien est un lien sponsorisé ou une publicité.
    • Contenu généré par l'utilisateur : Ce lien mène à un contenu généré par l'utilisateur, tel qu'un commentaire de blog ou une discussion de forum. 
• Cliquez sur Appliquer pour appliquer les modifications à l'image.

• Pour mettre en œuvre vos modifications, cliquez sur Publish ou Update dans le coin supérieur droit, puis cliquez sur Publish ou Update dans la boîte de dialogue. 

Modifier une image dans un module d'image

• Accédez à votre contenu :

  • Pages de site web : Depuis votre compte HubSpot, accédez à Marketing > Site web > Pages de site web.
  • Pages de destination : Depuis votre compte HubSpot, accédez à Marketing > Pages de destination.
  • Blog : Depuis votre compte HubSpot, accédez à Marketing > Site web > Blog.
  • E-mail : Depuis votre compte HubSpot, accédez à Marketing > E-mail.
• Passez le curseur de votre souris sur votre contenu et cliquez sur Modifier. 
• Dans l'éditeur de contenu, cliquez sur le module d'image . 
• Pour supprimer l'image actuelle, cliquez sur Supprimer dans la section Image de l'éditeur de barre latérale. Cela supprimera l'image actuelle du module d'image, mais ne supprimera pas le module de la page. 

• Pour remplacer l'image actuelle, cliquez sur Remplacer dans la section Image de l'éditeur de barre latérale, puis ajoutez une nouvelle image. 
• Dans le champ Alt text , entrez text pour décrire l'image aux moteurs de recherche et aux lecteurs d'écran. Vous pouvez également ajouter un texte alt aux images dans l'outil de fichiers . L'ajout d'un texte alt améliorera l'accessibilité à et le référencement de votre site. Pour en savoir plus sur l'accessibilité des sites web, consultez notre documentation pour les développeurs . 

Remarque : ajouter un texte alt à une image n'ajoute pas de texte titre. Le texte alternatif affecte le référencement dans les moteurs de recherche et l'accessibilité, tandis que le texte de titre apparaît lorsqu'un visiteur passe le curseur de sa souris sur l'image en ligne. 

 

• Pour définir la taille de l'image sur différents appareils, cliquez sur le menu déroulant Size et sélectionnez une option:
  
  • Ajuster automatiquement : la taille de l'image s'adaptera à l'appareil sur lequel elle est visualisée. 
  • Hauteur et largeur exactes: l'image s'affichera à la même taille sur tous les appareils.
• Pour limiter la taille de l'image, cliquez sur le menu déroulant Taille maximale et sélectionnez une option : 
  • Taille originale de l'image: l'image n'apparaîtra jamais plus grande que sa taille originale. 
  • Custom: l'image n'apparaîtra jamais plus grande qu'une largeur et une hauteur spécifiques définies dans les champs width et height. 
• Pour définir le comportement de chargement des images, cliquez sur le menu déroulant Image loading  et sélectionnez une option : 
  • Paramètres par défaut du navigateur : le comportement de chargement de l'image est déterminé par les paramètres du navigateur du visiteur. 

• • Lazy : l'image se charge uniquement lorsque le visiteur atteint cette partie de la page. Cela réduit le temps nécessaire au chargement de votre page et améliore le SEO. Par défaut, les images se chargeront avec ce paramètre. 

• • Eager: l'image se charge le plus rapidement possible. 
• Pour ajouter un lien vers l'image, saisissez une URL de destination dans le champ Lien (facultatif). Sélectionnez la case à cocher Ouvrir le lien dans un nouvel onglet pour diriger le visiteur vers l'URL de destination dans un nouvel onglet du navigateur. 

• Pour mettre en œuvre vos modifications, cliquez sur Publish ou Update en haut à droite.