skip to Main Content

Comment créer une galerie d’images à onglets dans Elementor

Divi : le thème WordPress le plus facile à utiliser

Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 901.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits. [ Recommandé ]

Besoin de créer une galerie d’images à onglets dans Elementor ?

Comme nous le disons constamment, Elementor est plus qu’un simple plugin de constructeur de pages. C’est un plugin polyvalent qui peut remplacer plusieurs types de plugins WordPress à la fois. L’un des plugins qui peuvent être remplacés par Elementor est le plugin de galerie d’images.

Avec Elementor, vous n’avez pas besoin d’installer un plugin supplémentaire pour créer une galerie d’images sur votre site web WordPress. Il y a deux widgets proposés par Elementor pour créer une galerie d’images: Galerie basique et Gallery.

Le widget Galerie basique – disponible sur Elementor Free – vous permet de créer une galerie d’images basique tandis que le widget Gallery vous permet de créer une galerie d’images plus avancée, y compris une galerie d’images à onglets.

C’est génial si vous souhaitez créer une galerie sur un site Web de photographie. Dans cet article, nous allons vous montrer comment créer une galerie d’images à onglets dans Elementor.

Comment créer une galerie d’images à onglets dans Elementor

Le widget Gallery est disponible sur la version pro d’Elementor. Assurez-vous donc d’avoir mis à niveau votre Elementor vers la version pro si vous ne l’avez pas fait. Il existe de nombreux avantages que vous obtiendrez en utilisant Elementor Pro, y compris la possibilité de créer un thème WordPress sans coder.

Lire aussi : Comment créer une galerie d’images à onglets dans Elementor

Dans cet exemple, nous allons créer une galerie de photos de paysage. Les photos sont divisées en trois types : montagne, mer et cascade. Nous allons créer trois onglets pour héberger chaque type de paysage plus un onglet pour afficher toutes les photos.

Pour commencer, créez une nouvelle page et modifiez-la avec Elementor. Vous pouvez également modifier une page existante. Ajoutez une section et faites-y glisser le widget Gallery.

Comment créer une galerie d’images à onglets dans Elementor

Sous le bloc Settings sous l’onglet Contenu, définissez l’option Type sur Multiple.

Par défaut, votre galerie ne contient qu’un seul onglet. Pour ajouter un nouvel onglet, cliquez simplement sur le bouton AJOUTER UN ÉLÉMENT.

Créez Facilement votre site Web avec Elementor

Elementor vous permet de créer facilement n'importe quel design de site Web avec un look professionnel. Arrêtez de payer cher pour ce que vous pouvez faire vous-même. [ Gratuit ]

Consultez également : Comment créer une barre de progression dégradée dans Elementor

Ouvrez l’un des éléments (onglets). Définissez l’étiquette de l’onglet dans le champ Titre. Cliquez sur le bouton plus pour sélectionner les images que vous souhaitez ajouter à l’onglet.

Sélectionnez les images dans votre bibliothèque multimédia WordPress. Si vous n’en avez pas, téléchargez les simplement. Cliquez sur le bouton Créer une nouvelle galerie -> Insérer la galerie pour ajouter la galerie à l’onglet.

Comment créer une galerie d’images à onglets dans Elementor

Ouvrez les autres éléments (onglets) et répétez les étapes ci-dessus pour définir l’étiquette de l’onglet et ajouter les images.

Personnaliser la galerie

Une fois l’ajout des images à chaque onglet, vous pouvez personnaliser votre galerie. Dans le bloc Settings, vous pouvez définir la disposition, la hauteur de ligne, l’espace entre les images et la taille de l’image. Il existe également une option pour activer la fonctionnalité Lazy Load.

Cherchez-vous les meilleurs thèmes et plugins WordPress ?

Téléchargez les meilleurs plugins et thèmes WordPress sur Envato et créez facilement votre site web. Déjà plus de 49.720.000 de téléchargements. [EXCLUSIF]

Ouvrez le bloc Filter Bar pour définir l’étiquette de l’onglet principal (l’onglet « Tous »), le pointeur et l’animation.

Ouvrez le bloc Overlay pour activer la superposition. Vous pouvez afficher le titre et la description de l’image lorsque vous survolez une image en définissant le titre et la description.

Si vous souhaitez afficher le titre et la description au survol de la souris, vous devez modifier l’image individuelle dans la galerie et ajouter le paramètre que vous avez défini (texte de remplacement, titre, légende ou description).

Ouvrez l’onglet Style pour personnaliser votre galerie. Il existe 4 blocs que vous pouvez ouvrir : Image, Superposition, Contenu et Filter Bar.

Image

Ce bloc vous permet de définir la couleur de bordure de l’image, la couleur de bordure de pointage, la largeur de bordure, le rayon de bordure, le filtre CSS et l’animation de pointage.

Comment créer une galerie d’images à onglets dans Elementor

Overlay

Ce bloc vous permet de définir la couleur de superposition, la couleur de superposition de pointage, le mode de fusion et l’animation de pointage.

Content

Ce bloc vous permet de personnaliser le contenu de l’image. Le contenu fait référence au titre et à la description de l’image. Vous pouvez définir l’alignement, la position verticale, le remplissage, la couleur du texte et la typographie (style de police, famille de polices et taille de police).

Filter Bar

Ce bloc vous permet de personnaliser le filtre. Vous pouvez définir l’alignement, la couleur normale, la couleur de pointage, la couleur active, la couleur du texte, l’espace entre les onglets et la typographie.

Vous pouvez manipuler ces paramètres jusqu’à ce que vous soyez satisfait du résultat. Une fois cela fait, cliquez sur le bouton PUBLIER / METTRE À JOUR en bas sur le panneau de gauche pour publier ou mettre à jour votre page.

Créez Facilement votre Boutique en ligne

Téléchargez gratuitement WooCommerce, le meilleurs plugins e-commerce pour vendre vos produits physiques et numériques sur WordPress. [Recommandé]

Obtenez Elementor Pro Maintenant !

Conclusion

Voila ! C’est tout pour cet article qui vous montre comment créer une galerie d’images à onglets dans Elementor. Si vous avez des soucis sur comment y arriver faites-nous savoir dans les commentaires.

Cependant, vous pourrez aussi consulter nos ressources, si vous avez besoin de plus d’éléments pour mener à bien vos projets de création de sites internet, en consultant notre guide sur la création de blog WordPress ou celui sur Divi : le meilleur thème WordPress de tous les temps.

Mais en attendant, partagez cet article sur vos différents réseaux sociaux.

Cet article comporte 0 commentaires

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Back To Top
0 Partages
Partagez
Tweetez
Enregistrer