Le bloc Carrousel d'images vous permet d'afficher un diaporama d'images rotatif sur votre page SeedProd. Chaque diapositive prend en charge une légende facultative, un titre, un sous-titre et un bouton d'appel à l'action, ce qui en fait un bloc flexible pour les galeries de photos, les présentations d'images en vedette et les sections d'en-tête de style bannière.
Le carrousel prend en charge la lecture automatique, les flèches de navigation, l'affichage en lightbox, les superpositions d'images et le contenu de bannière par diapositive avec une typographie et des effets d'animation entièrement personnalisables.
Ajouter le bloc Carrousel d'images à vos pages
Suivez ces étapes pour ajouter un bloc Carrousel d'images à votre page SeedProd :
Étape 1 : Ajouter le bloc
Sous Design > Blocs, faites glisser et déposez le bloc Carrousel d'images dans la section souhaitée de votre page.
Étape 2 : Configurer les paramètres de contenu
Une fois ajouté, cliquez sur le bloc Carrousel d'images pour ouvrir ses paramètres. L'onglet Contenu est organisé en deux sections : Images du carrousel et Paramètres du carrousel.
Images du carrousel :
Cette section répertorie toutes les diapositives de votre carrousel. Cliquez sur une ligne de diapositive pour développer ses paramètres individuels, ou faites glisser les diapositives pour les réorganiser. Vous pouvez également dupliquer ou supprimer n'importe quelle diapositive à l'aide des icônes qui apparaissent au survol.
- Image : Téléchargez ou sélectionnez une image de votre bibliothèque de médias WordPress pour cette diapositive, ou entrez une URL d'image directe.
- Légende : Entrez un texte de légende facultatif qui apparaît sous l'image lorsque les légendes sont activées.
- Afficher le titre : Activez pour afficher les champs de titre et de sous-titre qui s'affichent en superposition sur la diapositive.
- Titre : Entrez le texte du titre affiché sur la superposition de la diapositive (visible lorsque Afficher le titre est activé).
- Sous-titre : Entrez le texte du sous-titre affiché sous le titre sur la superposition de la diapositive (visible lorsque Afficher le titre est activé).
- Afficher le bouton : Activez pour ajouter un bouton d'appel à l'action sur la superposition de la diapositive.
- Texte du bouton : Entrez l'étiquette du bouton (visible lorsque Afficher le bouton est activé).
- Lien du bouton : Entrez l'URL vers laquelle le bouton renvoie. Cliquez sur l'icône des paramètres pour révéler les options Ouvrir dans une nouvelle fenêtre et No Follow.
Cliquez sur + Ajouter des images en bas de la liste pour ajouter une nouvelle diapositive à votre carrousel.
Paramètres du carrousel :
- Mode de couleur de la navigation : Choisissez la couleur des flèches et des points de navigation — Sombre ou Claire — pour vous assurer qu'ils contrastent avec vos images.
- Diapositives à afficher : Définissez le nombre de diapositives visibles à la fois — de 1 à 6.
- Lecture automatique : Activez ou désactivez la lecture automatique pour contrôler si les diapositives avancent automatiquement.
- Vitesse de lecture automatique : Définissez le délai entre les transitions de diapositives en secondes (visible lorsque Lecture automatique est activé).
- Afficher la légende : Activez pour afficher le texte de la légende sous chaque diapositive.
- Afficher la navigation : Activez ou désactivez les flèches et les points de navigation.
- Couleur de superposition d'image : Ajoutez une superposition de couleur sur chaque image de diapositive à l'aide du sélecteur de couleur.
- Opacité de superposition d'image : Définissez l'opacité de la superposition de 0 (transparent) à 1 (entièrement opaque).
- Alignement de la légende : Définissez l'alignement horizontal du texte de la légende — Gauche, Centre ou Droite.
Paramètres de la bannière du carrousel :
- Position verticale : Définissez la position verticale du contenu de la superposition de l'en-tête/bouton sur la diapositive en pourcentage de 0 à 100.
- Position horizontale : Définissez la position horizontale du contenu de la superposition en pourcentage de 0 à 100.
- Couleur du bouton de la bannière : Définissez la couleur d'arrière-plan du bouton d'appel à l'action sur chaque diapositive.
- Taille du bouton : Choisissez la taille du bouton de la bannière — Petit, Moyen, Grand, Très grand ou Extrêmement grand.
- Rayon du bouton de la bannière : Définissez le rayon du bord du bouton de la bannière de 0 à 100 pixels pour contrôler l'arrondi des coins.
- Alignement du texte de l'en-tête : Définissez l'alignement horizontal du texte de l'en-tête de la superposition — Gauche, Centre ou Droite. Prend en charge les valeurs par appareil.
- Alignement du texte du sous-en-tête : Définissez l'alignement horizontal du texte du sous-en-tête de la superposition — Gauche, Centre ou Droite. Prend en charge les valeurs par appareil.
- Alignement du bouton du carrousel : Définissez l'alignement horizontal du bouton de la superposition — Gauche, Centre ou Droite. Prend en charge les valeurs par appareil.
Étape 3 : Choisir un modèle (facultatif)
L'onglet Modèles propose des préréglages de style prédéfinis pour votre carrousel. Cliquez sur n'importe quelle miniature de modèle pour appliquer instantanément une combinaison de styles de bordure, d'ombre et d'image à toutes les diapositives de votre carrousel.
Étape 4 : Personnaliser la conception
Dans l'onglet Avancé, vous pouvez personnaliser la typographie, le style des images et l'espacement de votre bloc de carrousel d'images.
Styles :
- Typographie de la légende : Affinez la famille de polices, le poids, la taille, la hauteur de ligne, l'espacement des lettres et la transformation du texte de la légende. Prend en charge les valeurs par appareil.
- Couleur de la légende : Définissez la couleur du texte des légendes.
- Typographie de l'en-tête de la bannière : Affinez les paramètres de police du texte de l'en-tête de la superposition de la diapositive.
- Couleur de l'en-tête de la bannière : Définissez la couleur du texte de l'en-tête de la superposition de la diapositive.
- Typographie du sous-en-tête de la bannière : Affinez les paramètres de police du texte du sous-en-tête de la superposition de la diapositive.
- Couleur du sous-en-tête de la bannière : Définissez la couleur du texte du sous-en-tête de la superposition de la diapositive.
- Typographie du bouton de la bannière : Affinez les paramètres de police du texte du bouton de la superposition de la diapositive.
Styles d'image du curseur :
- Ombre : Ajoutez une ombre portée à chaque image de diapositive. Choisissez parmi Aucune, Cheveux d'ange, Petite, Moyenne, Grande, Très grande ou Extrêmement grande.
- Bordure d'image : Ajoutez une bordure autour de chaque image de diapositive, avec un contrôle du rayon de la bordure pour arrondir les coins.
Espacement :
- Marge : Contrôlez l'espacement extérieur autour de votre bloc de carrousel d'images (Haut, Droite, Bas, Gauche). Prend en charge les valeurs par appareil pour ordinateur, tablette et mobile.
- Espacement : Ajustez l’espacement intérieur de votre bloc Carrousel d’images (Haut, Droite, Bas, Gauche). Prend en charge les valeurs par appareil pour ordinateur, tablette et mobile.
Attributs :
- ID CSS : Affiche l’identifiant unique généré automatiquement pour votre bloc Carrousel d’images, créé automatiquement par SeedProd pour un style personnalisé ou un ciblage JavaScript.
- Classe personnalisée : Ajoutez des classes CSS personnalisées pour appliquer des styles spécifiques de votre thème ou de votre CSS personnalisé.
- Attributs personnalisés : Ajoutez des attributs HTML à l’élément d’encapsulation du bloc. Entrez chaque attribut sur une nouvelle ligne en utilisant le format : nom-attribut|valeur.
Visibilité de l'appareil :
- Masquer sur ordinateur : Masquez le bloc Carrousel d’images sur les écrans d’ordinateur.
- Masquer sur tablette : Masquez le bloc Carrousel d’images sur les appareils tablettes.
- Masquer sur mobile : Masquez le bloc Carrousel d’images sur les appareils mobiles.
Effets d'animation :
- Animation d’entrée : Choisissez un effet d’animation lorsque le bloc carrousel apparaît à la vue.
- Effets d’animation de l’en-tête : Choisissez une animation pour le texte de l’en-tête de la diapositive superposé lorsque chaque diapositive apparaît.
- Effets d’animation du sous-en-tête : Choisissez une animation pour le texte du sous-en-tête de la diapositive superposé.
- Effets d’animation du bouton : Choisissez une animation pour le bouton de la diapositive superposé.
Étape 5 : Enregistrer vos modifications
Une fois que vous avez terminé de configurer le bloc Carrousel d’images et de personnaliser son apparence, assurez-vous d’enregistrer votre travail.
Vous avez ajouté avec succès un bloc Carrousel d’images à votre page ! Les carrousels sont un excellent moyen de présenter plusieurs images dans un format compact et attrayant. Utilisez les paramètres de bannière pour ajouter du texte superposé et des appels à l’action sur chaque diapositive, ou gardez-le simple comme une galerie d’images épurée. Expérimentez avec les vitesses de lecture automatique, les styles de navigation et les superpositions d’images pour créer un carrousel qui correspond parfaitement à votre page.