Utiliser des modules de diaporama

Vous pouvez utiliser le module de diaporama pour afficher plusieurs images dans le même module. Vous pouvez configurer les images pour qu'elles défilent automatiquement, ou vous pouvez aider les visiteurs à passer manuellement de l'une à l'autre. 

Ajouter et modifier des diapositives dans les modules de diaporama

1. Accédez à votre contenu :

   • Pages de site web : Dans votre compte HubSpot, accédez à Contenu web > Pages de site web.
   • Pages de destination : Dans votre compte HubSpot, accédez à Contenu > Pages de destination.
   • Blog : Dans votre compte HubSpot, accédez à Contenu > Blog.
2. Cliquez sur le nom de votre contenu.
3. Dans l'éditeur de contenu, cliquez sur l'icône Ajouter add dans la barre latérale gauche. 
4. Cliquez pour développer la catégorie Média , puis cliquez sur le module Diaporama et faites-le glisser vers la position souhaitée. 
5. Dans la barre latérale de gauche, passez le curseur de la souris sur une diapositive et cliquez sur l'icône Modifier  edit pour ajouter une image à cette diapositive : 
   
   • Dans la section Image, cliquez sur Charger pour sélectionner une image de votre ordinateur ou Parcourir les images pour sélectionner une image de votre outil Fichiers. Pour générer une image, cliquez sur Générer avec l'IA.
   • Dans le champ Légende, saisissez une légende qui apparaîtra en dessous de votre image. Pour afficher l'image sans légende, supprimez le texte par défaut. 
   
   • Pour ajouter un lien à la diapositive :
     • Cliquez sur le menu déroulant Lien vers et sélectionnez un type de lien.
     • Spécifiez la destination du lien dans le champ qui s'affiche. Découvrez-en davantage sur l'utilisation de liens dans HubSpot. 
     • Pour que votre contenu reste ouvert et que le lien soit ouvert dans une nouvelle fenêtre, activez l'option Ouvrir le lien dans une nouvelle fenêtre. 
     • Pour indiquer aux moteurs de recherche que la destination du lien ne fait pas partie de vos sites web, cochez la case Aucun suivi. 
   • Cliquez sur Appliquer les modifications pour enregistrer les modifications apportées à cette diapositive. 
6. En haut de l'éditeur de barre latérale, cliquez sur Diaporama pour revenir à l'aperçu du module. 

7. Pour ajouter d'autres diapositives, passez le curseur sur une autre diapositive et cliquez sur l'icône Modifier edit.
8. Pour finaliser vos modifications, cliquez sur Appliquer les modifications. 

Modifier les paramètres des modules de diaporama

1. Accédez à votre contenu :

   • Pages de site web : Dans votre compte HubSpot, accédez à Contenu web > Pages de site web.
   • Pages de destination : Dans votre compte HubSpot, accédez à Contenu > Pages de destination.
   • Blog : Dans votre compte HubSpot, accédez à Contenu > Blog.
2. Cliquez sur le nom de votre contenu.
3. Dans l'éditeur de contenu, cliquez sur le module de diaporama. 
4. Dans l'éditeur de barre latérale, cliquez sur Paramètres pour modifier les paramètres du module. 
5. Cliquez pour développer la section Diapositives afin de modifier les options des diapositives : 
   • Dans le champ Diapositives par page, saisissez le nombre de diapositives qui apparaîtront en même temps dans votre diaporama. Vous pouvez afficher jusqu'à cinq diapositives à la fois. Lorsque plusieurs diapositives à la fois sont sélectionnées, les légendes et les vignettes ne s'affichent pas. 
   • Dans le champ Taille de l'image, sélectionnez une option de rapport hauteur/largeur. Par défaut, les images s'affichent selon le rapport hauteur/largeur chargé. Pour standardiser un rapport hauteur/largeur unique pour toutes les images, sélectionnez Forcer le rapport hauteur/largeur. Certaines images peuvent alors apparaître déformées. 
   • Pour ajouter ou supprimer des légendes des diapositives, cochez la case Afficher les légendes. La case Afficher les légendes est cochée par défaut.
   • Dans le menu déroulant Position de la légende, sélectionnez la position des légendes. 

6. Cliquez pour développer la section Mouvement afin de modifier les options de transition des diapositives : 
   • Pour configurer la transition des diapositives, sélectionnez une option de transition (par exemple, Fondu).
   • Pour que les diapositives se répètent lorsque la dernière diapositive est atteinte, cochez la case Afficher les diapositives en boucle. 
   • Pour que les diapositives défilent automatiquement, cochez la case Lecture automatique. Si le nombre de diapositives est inférieur au paramètre Diapositives par page , aucun cycle ne peut se produire. 
7. Cliquez pour développer la section Navigation afin de modifier les options de navigation : 
   • Pour afficher des flèches permettant aux visiteurs de passer manuellement d'une diapositive à l'autre, cochez la case Afficher les flèches de navigation. 
   • Pour afficher les vignettes des images sous la navigation, cochez la case Afficher les vignettes. 
   • Pour afficher des points sous les images qui afficheront le nombre total de diapositives et permettront aux visiteurs de sélectionner une image spécifique, sélectionnez Afficher la navigation avec points. 
8. Lorsque vous avez terminé, cliquez sur Appliquer les modifications. 

Modifier les styles des modules de diaporama

Vous pouvez modifier les styles des modules de diaporama, y compris le style des diapositives, de la navigation et du curseur.

1. Accédez à votre contenu :

   • Pages de site web : Dans votre compte HubSpot, accédez à Contenu web > Pages de site web.
   • Pages de destination : Dans votre compte HubSpot, accédez à Contenu > Pages de destination.
   • Blog : Dans votre compte HubSpot, accédez à Contenu > Blog.
2. Cliquez sur le nom de votre contenu.
3. Dans l'éditeur de contenu, cliquez sur le module de diaporama. 
4. Dans l'éditeur de barre latérale, cliquez sur l'onglet Styles. 
5. Pour continuer à modifier les styles du module de diaporama, cliquez sur Diapositives, Navigation ou Curseur. 

Modifier les styles des diapositives

Pour modifier les styles d'affichage des images dans les diapositives :

1. Cliquez sur Diapositives.
2. Cliquez pour développer la section Images.
3. Saisissez les valeurs de pixel dans le champ Rayon d'angle. Plus la valeur est élevée, plus les coins paraissent arrondis. 
4. Lorsque vous avez terminé, cliquez sur Appliquer les modifications.

Pour modifier les styles d'affichage des légendes dans les diapositives :

1. Cliquez sur Légendes.
2. Cliquez pour développer la section Arrière-plan. 
   • Pour ajouter des marges au-dessus ou en dessous de vos légendes, saisissez des valeurs de pixel dans les champs Marge supérieure et Marge inférieure.
   • Pour ajouter du remplissage à vos légendes, saisissez une valeur de pixel dans le champ Remplissage. Pour ajouter des valeurs distinctes pour chaque côté, cliquez sur Modifier séparément, puis saisissez les valeurs de pixel dans les champs.
   • Pour ajouter une couleur d'arrière-plan à vos légendes, saisissez une valeur hexadécimale dans le premier champ de la section Couleur, ou cliquez sur le sélecteur de couleurs et sélectionnez une couleur. Des couleurs personnalisées peuvent être ajoutées à partir de l'onglet Avancé.
   • Pour définir la transparence d'une couleur d'arrière-plan, saisissez une valeur en pourcentage dans le deuxième champ de la section Couleur. Une transparence de 100 % sera opaque, tandis qu'une transparence de 0 % ne sera pas visible. 
3. Cliquez pour développer la section Texte. 
   • Pour modifier le type de police, cliquez sur le menu déroulant Sélectionner la police et sélectionnez une police. 
   • Pour modifier la taille de la police, cliquez sur le menu déroulant Taille et sélectionnez une taille de police. 
   • Pour modifier la couleur de la police, cliquez sur le sélecteur de couleurs et sélectionnez une couleur. Des couleurs personnalisées peuvent être ajoutées à partir de l'onglet Avancé.
   • Pour modifier l'épaisseur de la police, cliquez sur l'icône de police bold pour mettre du texte en gras, en italique italicIcon ou souligné underlineIcon.
4. Lorsque vous avez terminé, cliquez sur Appliquer les modifications.

Modifier les styles de navigation

Vous pouvez modifier les styles de navigation, y compris les flèches du mode de défilement, les points et le bouton de lecture automatique et la navigation par vignettes. Les options de style disponibles dépendent des paramètres de navigation du module de diaporama.

Flèches du module de défilement

1. Cliquez sur Navigation.
2. Cliquez pour développer la section Flèches du module de défilement.
3. Saisissez une valeur hexadécimale dans la section Couleur de l'arrière-plan. Vous pouvez également cliquer sur le sélecteur de couleur et sélectionner une couleur. Des couleurs personnalisées peuvent être ajoutées à partir de l'onglet Avancé.
4. Pour définir la transparence de la couleur de l'arrière-plan, saisissez un pourcentage dans le deuxième champ de la section Couleur de l'arrière-plan. Par exemple, une transparence de 100 % sera opaque, tandis qu'une transparence de 0 % ne sera pas visible.
5. Pour remplacer les icônes utilisées pour les flèches gauche et droite, cliquez sur Remplacer au-dessus des champs Icône gauche et Icône droite. Dans le panneau de droite, sélectionnez une icône. 
6. Pour définir la couleur de vos icônes gauche et droite, saisissez une valeur hexadécimale dans le premier champ de la section Couleur de l'icône. Vous pouvez également cliquer sur le sélecteur de couleur et sélectionner une couleur. Des couleurs personnalisées peuvent être ajoutées à partir de l'onglet Avancé.
7. Pour définir la transparence de la couleur de l'arrière-plan de l'icône, saisissez une valeur de pourcentage dans le deuxième champ de la section Couleur de l'icône. Par exemple, une transparence de 100 % sera opaque, tandis qu'une transparence de 0 % ne sera pas visible. 
8. Lorsque vous avez terminé, cliquez sur Appliquer les modifications.

Points et bouton de lecture automatique

1. Cliquez pour développer la section Points et bouton de lecture automatique.
2. Saisissez une valeur hexadécimale dans le premier champ de la section Couleur ou cliquez sur le sélecteur de couleur pour choisir une couleur. Des couleurs personnalisées peuvent être ajoutées à partir de l'onglet Avancé.
3. Lorsque vous avez terminé, cliquez sur Appliquer les modifications.

Navigation avec vignettes

1. Cliquez pour développer la section Navigation avec vignettes.
2. Pour modifier la couleur d'arrière-plan, saisissez une valeur hexadécimale dans le premier champ de la section Couleur d'arrière-plan des flèches ou cliquez sur le sélecteur de couleur et sélectionnez une couleur. Des couleurs personnalisées peuvent être ajoutées à partir de l'onglet Avancé.
3. Pour modifier la transparence de la couleur de l'arrière-plan, saisissez une valeur de pourcentage dans le deuxième champ de la section Couleur d'arrière-plan des flèches. Une transparence de 100 % sera opaque, tandis qu'une transparence de 0 % ne sera pas visible. 
4. Pour remplacer les icônes utilisées pour les flèches gauche et droite, cliquez sur Remplacer au-dessus des champs Icône de flèche gauche et Icône de flèche droite. Dans le panneau de droite, sélectionnez une icône.

5. Pour modifier la couleur des flèches gauche et droite, saisissez une valeur hexadécimale dans le premier champ de la section Couleur de remplissage des flèches. Vous pouvez également cliquer sur le sélecteur de couleur et sélectionner une couleur. Des couleurs personnalisées peuvent être ajoutées à partir de l'onglet Avancé.
6. Pour définir la transparence de la flèche, saisissez une valeur de pourcentage dans le deuxième champ de la section Couleur de l'icône. Par exemple, une transparence de 100 % sera opaque, tandis qu'une transparence de 0 % ne sera pas visible. 
7. Pour modifier le rapport, la largeur et les coins arrondis des images de vignette :
   • Cliquez pour développer la section Images de la vignette.
   • Pour définir le rapport hauteur/largeur utilisé pour toutes les vignettes, cliquez sur le menu déroulant Rapport hauteur/largeur et sélectionnez un rapport hauteur/largeur. 
   • Pour définir la largeur utilisée pour toutes les images de vignette, saisissez une valeur de pixel dans le champ Largeur. 
   • Pour définir l'arrondi des coins des images de vignette, saisissez une valeur de pixeldans le champ Rayon. Plus la valeur est élevée, plus les coins paraissent arrondis. 
8. Lorsque vous avez terminé, cliquez sur Appliquer les modifications.

Modifier les styles du curseur

1. Cliquez sur Curseur. 
2. Cliquez pour développer la section Espacement.
3. Pour ajouter des marges au-dessus et au-dessous du curseur, saisissez les valeurs de pixel dans les champs Marge supérieure et Marge inférieure. 
4. Pour ajouter du remplissage au curseur, saisissez une valeur de pixel dans le champ Remplissage. Pour ajouter des valeurs distinctes pour chaque côté, cliquez sur Modifier séparément, puis saisissez les valeurs de pixel dans les champs.
5. Lorsque vous avez terminé, cliquez sur Appliquer les modifications.