Utiliser des modules de défilement d'images

Vous pouvez utiliser le module "image slider" 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 présentation d'images

• 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.
• Passez le curseur de la souris sur votre contenu, puis cliquez sur Modifier.
• Dans l'éditeur de contenu, cliquez sur l'icône add Add dans la barre latérale gauche. 
• Cliquez pour développer la catégorie Media , puis cliquez sur le module Image Slider et faites-le glisser en position. 
• Dans la barre latérale gauche, survolez une diapositive et cliquez sur l'icône edit Modifier pour ajouter une image à cette diapositive : 
  
  • Dans la section Image , cliquez sur Télécharger pour sélectionner une image à partir de votre ordinateur ou sur Parcourir les images pour sélectionner une image à partir de l'outil files. 
  • Dans le champ Caption , entrez une légende  qui apparaîtra sous 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 Link to et sélectionnez un type de lien .
    • Spécifiez la destination du lien dans le champ qui s'affiche. Apprenez-en plus sur en travaillant avec des liens dans HubSpot. 
    • Pour que votre contenu reste ouvert et que le lien s'ouvre dans une nouvelle fenêtre, cliquez pour activer 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 No follow . 
  • Cliquez sur Apply changes pour enregistrer les modifications apportées à cette diapositive. 
• En haut de l'éditeur de barres latérales, cliquez sur Image slider pour revenir à l'aperçu du module. 

• Pour ajouter d'autres diapositives, survolez une autre diapositive et cliquez sur l'icône edit Modifier .
• Pour finaliser vos modifications, cliquez sur Appliquer les modifications. 

Modifier les paramètres des modules d'affichage d'images

• 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.
• Passez le curseur de la souris sur votre contenu, puis cliquez sur Modifier.
• Dans l'éditeur de contenu, cliquez sur le module image slider. 
• Dans l'éditeur de la barre latérale, cliquez sur Settings pour modifier les paramètres du module. 
• Cliquez pour développer la section Slides afin de modifier les options des diapositives : 
  • Dans le champ Slides per page , entrez le nombre  de diapositives qui apparaîtront en même temps dans votre curseur d'images. Vous pouvez afficher jusqu'à cinq diapositives à la fois. Lorsque plusieurs diapositives sont sélectionnées simultanément, les légendes et les vignettes ne s'affichent pas. 
  • Dans la section Image Sizing , sélectionnez une option aspect ratio. Par défaut, les images s'affichent avec leur propre rapport d'aspect. Pour normaliser un rapport d'aspect unique pour toutes les images, sélectionnez Forcer le rapport d'aspect. Certaines images peuvent alors apparaître déformées. 

• Cliquez pour développer la section Movement pour modifier les options de transition des diapositives : 
  • Pour que les diapositives soient répétées lorsque la dernière diapositive est atteinte, cochez la case Loop slides . 
  • Pour que les diapositives défilent automatiquement, cochez la case Autoplay . Si le nombre de diapositives est inférieur au paramètre Diapositives par page , aucun cycle ne peut se produire. 
• 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 Show thumbnails . 
  • Pour afficher des points sous les images qui indiqueront le nombre total de diapositives et permettront aux visiteurs de sélectionner une image spécifique, sélectionnez Show dot navigation. 
• Pour finaliser vos modifications, cliquez sur Appliquer les modifications. 

Modifier les styles pour les modules de galerie d'images

• 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.
• Passez le curseur de la souris sur votre contenu, puis cliquez sur Modifier.
• Dans l'éditeur de contenu, cliquez sur le module image slider. 
• Dans l'éditeur de barres latérales, cliquez sur l'onglet Styles. 
• Pour définir l'arrondi des coins de vos images, cliquez sur Slides, puis sur pour développer la section Images . Saisissez les valeurs des pixels  dans le champ Rayon d'angle . Plus la valeur est élevée, plus les coins paraissent arrondis. 
  • Pour ajouter des marges au-dessus ou au-dessous de vos légendes, cliquez sur pour développer la section Background , puis entrez les valeurs en pixels dans les champs Margin above (Marge au-dessus de ) et Margin below (Marge au-dessous de ).
  • Pour ajouter du remplissage à vos légendes, entrez une valeur de pixel dans le champ Padding . Pour ajouter des valeurs distinctes pour chaque côté, cliquez sur Edit separately, puis entrez les valeurs de pixel dans les champs.
  • Pour ajouter une couleur d'arrière-plan à vos légendes, entrez une valeur hexagonale  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 Advanced .
  • Pour définir la transparence d'une couleur d'arrière-plan, entrez un pourcentage  dans le deuxième champ de la section Color . Une transparence de 100% sera opaque, tandis qu'une transparence de 0% ne sera pas visible. 
   
  • Pour modifier la police de vos légendes, cliquez sur pour développer la section Text, puis cliquez sur le menu déroulant Select font et sélectionnez une police . 
  • Pour modifier la taille de la police, cliquez sur le menu déroulant Size 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 Advanced .
  • Pour modifier le poids de la police, cliquez sur une icône bold poids de la police pour un texte en gras, en italique ou souligné.Pour modifier l'apparence des légendes de vos images, cliquez sur Diapositives, puis sur Légendes:
• Pour modifier l'apparence des flèches de votre curseur :
  • Cliquez sur Navigation.
  • Cliquez pour développer la section Slider arrows .
  • Pour définir la couleur d'arrière-plan de vos icônes gauche et droite, entrez une valeur hexagonale  dans le premier champ de la section Couleur d'arrière-plan , 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 Advanced .
  • Pour définir la transparence de la couleur d'arrière-plan, entrez un pourcentage dans le deuxième champ de la section Couleur d'arrière-plan . Une transparence de 100% sera opaque, tandis qu'une transparence de 0% ne sera pas visible. 
  • Pour remplacer les icônes utilisées pour les flèches gauche et droite, cliquez sur Replace au-dessus des champs Left icon et Right icon . Dans le panneau de droite, sélectionnez une icône .
   
  • Pour définir la couleur de vos icônes gauche et droite, entrez une valeur hexagonale  dans le premier champ de la section Icône 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 Advanced .
  • Pour définir la transparence de la couleur d'arrière-plan, entrez un pourcentage dans le deuxième champ de la section Icon color . Une transparence de 100% sera opaque, tandis qu'une transparence de 0% ne sera pas visible. 
• Pour modifier l'apparence des points situés sous les images et le bouton de lecture automatique :
  • Cliquez sur Navigation.
  • Cliquez pour développer la section Dots and autoplay button.
  • Saisissez une valeur hexagonale  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 Advanced .
• Pour modifier l'apparence de la navigation par vignettes : 
  • Cliquez sur Navigation.
  • Cliquez pour développer la section de navigation Thumbnail .

• • Pour définir la couleur d'arrière-plan de vos icônes de flèche gauche et droite, entrez une valeur hexagonale  dans le premier champ de la section Couleur d'arrière-plan de la flèche , 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 Advanced .
  • Pour définir la transparence de la couleur d'arrière-plan, entrez un pourcentage dans le deuxième champ de la section Arrow background color . Une transparence de 100% sera opaque, tandis qu'une transparence de 0% ne sera pas visible. 
  • Pour remplacer les icônes utilisées pour les flèches gauche et droite, cliquez sur Replace au-dessus des champs Arrow left icon et Arrow right icon . Dans le panneau de droite, sélectionnez une icône .
•  
  • Pour définir la couleur de vos icônes de flèche gauche et droite, entrez une valeur hexagonale  dans le premier champ de la section Arrow icon fill color, 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 Advanced .
  • Pour définir la transparence de la flèche, entrez un pourcentage dans le deuxième champ de la section Icon color . Une transparence de 100% sera opaque, tandis qu'une transparence de 0% ne sera pas visible. 
  • Cliquez pour développer la section Images miniatures .
  • Pour définir le rapport d'aspect utilisé pour toutes les vignettes, cliquez sur le menu déroulant aspect ratio et sélectionnez un rapport d'aspect . 
  • Pour définir la largeur utilisée pour toutes les images miniatures, entrez une valeur de pixels dans le champ Width . 
  • Pour définir l'arrondi des coins des vignettes, entrez une valeur de pixels dans le champ Radius . Plus la valeur est élevée, plus les coins paraissent arrondis. 

• Pour modifier l'espacement du curseur : 
  • Cliquez sur Slider. 
  • Cliquez pour développer la section Spacing .
  • Pour ajouter des marges au-dessus et au-dessous du curseur, saisissez les valeurs de pixels dans les champs Marge au-dessus de et Marge au-dessous de . 
  • Pour ajouter du remplissage au curseur, entrez une valeur de pixel dans le champ Padding . Pour ajouter des valeurs distinctes pour chaque côté, cliquez sur Edit separately, puis entrez les valeurs de pixel dans les champs.