Avertissement : cet article est le résultat de la traduction automatique, l'exactitude et la fidélité de la traduction ne sont donc pas garanties. Pour consulter la version originale de cet article, en anglais, cliquez ici.
CMS-Pages-Editor

Ajouter des images à un module de galerie d'images

Dernière mise à jour: janvier 28, 2019

Disponible avec :

Marketing Hub Professional, Enterprise
Basique
HubSpot CMS

Utilisez un module de galerie d'images pour afficher des images sur votre site. Découvrez comment ajouter des diapositives à un module Diaporama et personnaliser vos paramètres de style.

  • Dans votre compte HubSpot, accédez à votre blog, à vos pages de destination ou à des pages de votre site web.
  • Placez le curseur sur la page ou l'article contenant le module de diaporama que vous souhaitez mettre à jour, puis cliquez sur Modifier.
  • Cliquez directement sur le module de diaporama dans l'éditeur de contenu ou cliquez sur l'icône de module dans le menu latéral de gauche et sélectionnez le module Galerie d'images dans la liste des modules. 
  • Cliquez sur + Ajouter une image pour insérer une nouvelle diapositive dans votre galerie d'images.
  • Placez le curseur sur une diapositive et cliquez sur l'icône de crayon edit pour ajouter une diapositive et modifier sa légende et son URL :
    • Cliquez sur Sélectionner une image pour sélectionner une image sur votre ordinateur ou dans votre gestionnaire de fichiers.
    • Saisissez le Texte alternatif que vous souhaitez inclure. 
    • Activez l'option Afficher la légende si vous souhaitez afficher une légende sous l'image. Utilisez ensuite l'éditeur de texte enrichi pour saisir votre légende.
    • Si vous souhaitez associer cette image à une page web, ajoutez l'URL du lien.
    • Une fois vos sélections effectuées, cliquez sur Revenir à la galerie d'images.

edit-slide

  • Pour supprimer une diapositive de votre module de galerie d'images, placez le curseur sur une diapositive existante et cliquez sur l'icône de corbeille delete.
  • Pour réorganiser les diapositives dans le module de galerie d'images, cliquez sur une diapositive et faites-la glisser à l'emplacement souhaité.

reorder%20slides

Après avoir ajouté des images dans votre galerie d'images, vous pouvez personnaliser les options de votre module dans l'éditeur situé sur la gauche :
  1. Mode d'affichage : choisissez le type de diaporama que vous souhaitez afficher sur la page. Vous pouvez choisir un diaporama standard, un diaporama contenant des vignettes que vos visiteurs peuvent parcourir, ou une galerie permettant aux utilisateurs de cliquer sur une vignette pour ouvrir une galerie et parcourir vos diapositives en taille réelle. 
  2. Afficher les diapositives en boucle : activez cette option pour que vos diapositives s'affichent automatiquement en boucle.
  3. Avance automatique : activez cette option si vous souhaitez que vos diapositives défilent automatiquement sur votre page.
  4. Durée en secondes entre le défilement automatique : utiliser les touches fléchées pour indiquer le nombre de secondes entre les diapositives.
  5. Afficher les boutons de navigation : activez cette option pour ajouter des indicateurs au bas du diaporama indiquant aux visiteurs le nombre de diapositives qu'il contient et celle qu'ils consultent actuellement. 
  6. Hauteur variable : utilisez le menu déroulant pour préciser si vous souhaitez que votre diaporama soit aussi grand que la plus grande de vos diapositives, ou redimensionnez automatiquement chaque image.
  7. Transition entre les diapositives : choisissez l'effet visuel (Diapositive ou Fondu) que vous souhaitez appliquer aux transitions entre les diapositives.
  8. Position de la légende : si vous choisissez d'afficher des légendes sur vos diapositives, précisez si ces légendes doivent se superposer sur la partie supérieure de vos images ou s'afficher en dessous des images. 

image-gallery

  • Cliquez sur l'onglet Styles en haut de l'éditeur du module pour accéder aux paramètres du module de votre galerie d'images :
    • Personnalisez la Famille de polices, la Taille de police, la Couleur de texte, l'Alignement du texte, la Hauteur de ligne et les Styles de votre galerie d'images.
    • Définissez le remplissage et les marges autour des images de votre galerie d'images et de vos vignettes. Cochez la case Uniforme pour définir le même espacement autour de chaque image.
    • Spécifiez la couleur de l'arrière-plan et le style du module de galerie d'images. Cliquez sur Appliquer pour voir les modifications que vous avez apportées au module dans l'éditeur.

image-gallery-styles

  • Une fois que vous avez ajouté vos images et configuré vos paramètres de style, cliquez sur Enregistrer et aller à la liste des modules
  • Cliquez sur Publier ou Mettre à jour pour activer les modifications.