Un curseur de galerie associe une grande image d'aperçu à un ensemble cliquable de vignettes, afin que les visiteurs puissent passer directement à la photo qu'ils souhaitent au lieu de cliquer sur une diapositive à la fois Galerie Slider widget dans Modules complémentaires principaux pour Elementor construit cette mise en page en quelques minutes Vous choisissez les images, choisissez une grille à miniatures ou un carrousel, et stylisez chaque pièce du panneau Élémenteur.
Ce guide parcourt chaque décor afin que vous puissiez en construire un Curseur de galerie d'éléments sans deviner ce que fait chaque contrôle.
Ce que fait le widget Gallery Slider #
Le widget affiche une grande diapositive d'aperçu à côté d'une grille ou d'un carrousel de vignettes Un clic sur une vignette ou une flèche modifie l'aperçu Les légendes, la lecture automatique, la boucle infinie, les transitions de fondu ou de diapositive et les états de survol séparés pour l'aperçu et les vignettes sont tous intégrés Il correspond aux portefeuilles, aux photos de produits, aux listes immobilières, aux albums d'événements ou à toute page où les visiteurs doivent parcourir rapidement un ensemble d'images.
Avant de commencer #
- WordPress avec Élémenteur installé et actif.
- Modules complémentaires principaux pour Elementor installé et actif Besoin d'aide ? voir le guide d'installation.
- Un ensemble d'images téléchargées sur votre Médiathèque, idéalement à des formats d'image similaires.
Comment ajouter le widget Elementor Gallery Slider #
Ouvrez l'éditeur Elementor et recherchez Galerie Slider dans le panneau Éléments, ou faites défiler vers le bas jusqu'à la section Addons principaux Chaque widget Addons maître porte un petit badge MA, ce qui aide lorsque plusieurs packs d'addons sont installés Faites glisser le widget dans votre section.
Ajouter des images dans l'onglet Contenu #
Galerie #
Le widget commence vide Dans le Contenu onglet, ouvrez le Galerie sectionnez et cliquez sur le bouton plus sous Ajouter des Images.
La fenêtre média WordPress s'ouvre sur le Créer galerie écran. Sélectionnez les images que vous souhaitez dans le curseur, puis cliquez sur pour insérer la galerie Prenez une minute ici pour remplir le texte alternatif et les légendes pour chaque image Le champ de légende compte plus qu'il n'y paraît : le widget peut l'imprimer sous l'image d'aperçu plus tard, et si une légende manque sur le frontend, cet écran est le premier endroit à vérifier.
Après avoir inséré la galerie, l'éditeur affiche immédiatement la mise en page complète : le grand aperçu à gauche avec des flèches de navigation et la grille de vignettes à droite. Les images sélectionnées apparaissent également dans la section Galerie, où vous pouvez les réorganiser ou les supprimer.
Vrilles #
Le Vrilles la section contrôle les petites images à côté de l'aperçu.
- Vignettes : afficher ou masquer entièrement la zone de la vignette.
- Carrousel/Grille : basculer entre une grille statique et un carrousel défilant.
- Résolution de l'image : la taille WordPress sert pour les vignettes La vignette (150 x 150) garde la page lumineuse.
- Colonnes : choisissez 1 à 12 colonnes pour la grille Le déplacement de 2 à 3 colonnes fait passer la grille de haute et étroite à un bloc plus serré.
- Commande: conservez l'ordre par défaut ou modifiez la façon dont les images sont triées.
- Légende: afficher une légende sur les vignettes, ou la laisser à Aucun.
Passage à Carrousel le mode remplace la grille par une bande de vignettes et ajoute son propre groupe de paramètres : Orientation (horizontal ou vertical), Glissières par vue, un Flèches basculer avec un Position de la flèche dropdown, plus Lecture automatique, Boucle Infinie, et Direction commandes juste pour la bande de vignettes La grille fonctionne mieux pour une douzaine d'images ou moins ; passé cela, le carrousel économise beaucoup d'espace vertical.
Aperçu #
Le Aperçu section gère la grande diapositive et son comportement.
- Résolution de l'image : la taille servie pour la grande image Plein a l'air le mieux mais pèse le plus, alors compressez vos originaux.
- Lien vers: lier l'image d'aperçu à une URL ou un fichier multimédia, ou le conserver à Aucun.
- Légende: afficher la légende de l'image sous l'aperçu.
- Direction: glissez de gauche à droite ou de droite à gauche.
- Boucle infinie : retour à la première diapositive après la dernière.
- Hauteur automatique : laissez le curseur ajuster sa hauteur à chaque image. Pratique pour les rapports mixtes, bien que la page se déplace un peu à mesure que les diapositives changent.
- Lecture automatique : avancez automatiquement les diapositives Cliquez sur l'icône d'édition pour l'ajuster.
- Effet: choisissez la transition Diapositive ou Fade.
- Vitesse (ms) : combien de temps dure la transition La valeur par défaut est 1000.
- Flèches: afficher ou masquer les flèches de navigation, et cueillir leur Position(comme en haut à gauche).
Concevez le curseur dans l'onglet Style #
Disposition #
Le Disposition la section décide où se trouve l'aperçu par rapport aux vignettes. Aperçu Position offre Haut, Droite, Bas, et Gauche Avec Haut ou Bas, les vignettes s'alignent sous ou au-dessus de l'aperçu et un Alignement horizontal le contrôle apparaît avec un Largeur du carrousel curseur. Avec gauche ou droite, vous obtenez un Largeur de l'aperçu ( %) glissez plutôt.
- Empiler sur: choisissez quand la mise en page s'empile verticalement, comme Tablet & Mobile.
- Largeur de l'aperçu (%) : combien d'espace horizontal prend l'aperçu Quelque part entre 60 et 70 pour cent se trouve bien à côté d'une grille à trois colonnes.
- Espacement : l'écart entre l'aperçu et les vignettes.
Aperçu #
L'onglet Style Aperçu la section style le grand conteneur à glissière.
- Hauteur personnalisée : remplacer la hauteur automatique.
- Couleur de fond : remplit la zone derrière l'image.
- Type de frontière : Par défaut, Aucun, Solide, Double, Pointillé, En pointillés, ou Groove, avec des contrôles de largeur et de couleur lorsqu'il est actif.
- Rayon de frontière et ombre de boîte : arrondissez les coins et soulevez la diapositive de la page.
- Flèches: un groupe dédié avec Taille, Rembourrage, Rayon Frontière, Transitionet séparez-vous Défaut, Survole, et Handicapés états, chacun avec sa propre couleur et couleur d'arrière-plan.
Sous-titres d'aperçu #
Si vous avez activé les légendes dans l'onglet Contenu, cette section les positionne et les stylise. Alignement vertical place la légende en haut, au milieu ou en bas de la diapositive, et Alignement horizontal offres gauche, centre, droite, et justifier Vous obtenez aussi Typographie, Rembourrage, Marge, Type de frontière, et Rayon Frontière contrôles.
Aperçu des effets de survol #
Aperçu des effets de survol anime la légende lorsque les visiteurs survolent la diapositive Choisissez un Effet, réglez le Transition, puis stylisez le Défaut et Survole états avec couleur, type d'arrière-plan, opacité et ombre de texte.
Vrilles #
L'onglet Style Vrilles section gère les petites images : Alignement vertical pour tout le bloc, Espacement horizontal et Espacement vertical entre les vignettes, plus Type de frontière et Rayon Frontière.
Effets de survol des vignettes #
Cette section style les vignettes sur trois états : Défaut, Survole, et Actif (la vignette correspondant à la diapositive actuelle).Le Images le groupe couvre la couleur de fond, Opacité, Échelle, Ombre de boîte, et Filtres CSS. Hors de la boîte, les vignettes inactives sont assises à 0,65 opacité donc l'actif se démarque Le Surcouche group ajoute une couche de couleur ou de dégradé avec Mode mélange, Marge, Opacité1, et les contrôles aux frontières.
Il y a aussi un Modèles section au bas de l'onglet Style avec préréglages de style prêts à l'emploi La même section apparaît dans de nombreux widgets Master Addons.
Voir le résultat en direct #
Cliquez sur l'icône de l'œil pour prévisualiser la page Les visiteurs voient la grille des vignettes à côté du grand aperçu En cliquant immédiatement sur une vignette, échangez l'aperçu, les flèches traversent les diapositives dans l'ordre et la légende suit chaque image.
Cas d'utilisation courants #
- Présentations de portefeuille : une grande image de héros avec le reste du projet à un clic.
- Pages de produits : la disposition classique de la boutique avec un aperçu zoomé et un sélecteur de vignettes.
- Annonces immobilières : laissez les acheteurs feuilleter les pièces sans quitter la page.
- Albums d'événements ou de mariage : mettez en surbrillance une photo tout en gardant visible l’ensemble complet.
Conseils pour un meilleur curseur de galerie #
- Correspondre aux rapports d'aspect de l'image. La hauteur automatique évite les surprises de recadrage, mais des ratios cohérents semblent plus propres et empêchent la disposition de sauter.
- Servir les bonnes résolutions. Plein pour l'aperçu, Vignette (150 x 150) pour la grille Compresser avant de télécharger ; voir notre guide du meilleurs plugins WordPress optimiseur d'images.
- Écrivez des légendes dans la Médiathèque avant d'insérer la galerie pour que chaque diapositive soit prête.
- Gardez la vitesse de lecture automatique raisonnable. Donnez aux visiteurs le temps de voir réellement chaque image.
- Utiliser l'état Actif. L'opacité par défaut de 0,65 sur les vignettes inactives guide déjà l'œil ; une bordure ou une légère échelle sur la vignette active le rend encore plus clair.
Tutoriel Vidéo #
Préférez plutôt regarder la configuration ? cette vidéo couvre l'ensemble du processus, depuis le glisser du widget vers le curseur fini sur la page en direct :
Foire aux questions #
Comment créer un curseur de galerie dans Elementor ?
Installez Master Addons pour Elementor, faites glisser le widget Gallery Slider sur votre page, et cliquez sur Ajouter des images dans la section Galerie Sélectionnez vos images dans la fenêtre média et insérez la galerie Le curseur avec aperçu et vignettes apparaît immédiatement.
Puis-je montrer des vignettes sous forme de carrousel au lieu d'une grille ?
Oui. Dans la section Vignettes de l'onglet Contenu, basculez la commande Carrousel/Grid sur Carrousel. Vous obtenez ensuite l'orientation, les diapositives par vue, les flèches, la lecture automatique et les paramètres de boucle infinie pour la bande de vignettes.
Puis-je changer l'endroit où l'image de l'aperçu apparaît ?
Oui. Dans l'onglet Style sous Mise en page, définissez la position d'aperçu sur Haut, Droite, Bas ou Gauche. Avec les dispositions gauche ou droite, vous contrôlez la largeur d'aperçu ; avec le haut ou le bas, vous contrôlez la largeur et l'alignement du carrousel.
Est-ce que le Gallery Slider prend en charge la lecture automatique ?
Oui. Activez la lecture automatique dans la section Aperçu de l'onglet Contenu Vous pouvez le combiner avec la boucle infinie, choisir un effet Diapositive ou Fade et définir la vitesse de transition en millisecondes.
Comment afficher les légendes des images sur le curseur ?
Ajoutez des légendes à vos images dans la Médiathèque WordPress, puis définissez Légende sur Légende dans la section Aperçu Style et positionnez le texte de la section Légendes de l'aperçu dans l'onglet Style.
Envelopper #
Les modules principaux Galerie Slider widget couvre l'ensemble du modèle aperçu plus miniatures : vignettes en grille ou en carrousel, l'aperçu de n'importe quel côté, les légendes et le style par état, le tout à partir d'un seul panneau et sans code personnalisé.
Pour plus de façons d'afficher des images, vérifiez le Carrousel d'images, Galerie Filtrable, et Image avancée docs, ou comparez les options dans notre Guide du carrousel image Elementor. Pour voir tout le reste dans le plugin, parcourez le Widgets et extensions Master Addons collection ou le plans tarifaires.
