Souhaitez-vous ajouter un accordéon d’images à une page Elementor ?

C’est génial, car l’accordéon d’images vous permet d’afficher des images de manière plus créative. Malheureusement, Elementor n’a pas de widget par défaut qui vous permet d’ajouter un élément d’accordéon d’images à une page ou un modèle.

Si vous souhaitez vraiment ajouter un accordéon d’images, vous pouvez installer un module complémentaire ou addon fourni avec un widget d’accordéon d’images. L’un des modules complémentaires que vous pouvez installer est JetTabs.

JetTabs est un module complémentaire Elementor membre de la famille JetPlugins, un ensemble de modules complémentaires Elementor développés par Crocoblock. JetTabs est livré avec quatre widgets : Swicther, Tabs, Image Accordion, et Classic Accordion.

Comment ajouter l’accordéon d’image dans Elementor avec JetTabs

Avant de commencer, assurez-vous que vous avez installé et activé le module complémentaire JetTabs. Vous pouvez obtenir ce module complémentaire pour seulement 23 $ par an. Alternativement, vous pouvez également obtenir JetTabs avec une option d’achat unique via l’offre groupée de thèmes de Jupiter X ou Monstroid2.

Lire aussi : Comment créer un menu de navigation One Page dans Elementor

Une fois que vous êtes prêt, créez une nouvelle page (Pages -> Ajouter Nouveau) ou un nouvel article (Articles-> Ajouter) et modifiez-le avec Elementor. Bien entendu, vous pouvez également modifier une page ou un article existant.

Dans l’éditeur Elementor, faites glisser le widget Image Accordion du panneau de widgets vers la zone d’édition.

ajouter un accordéon d'images à une page Elementor

Une fois le widget Image Accordion ajouté, allez sur le panneau de gauche pour le personnaliser. Par défaut, l’accordéon est composé de trois éléments. Pour ajouter une image à chaque élément, il suffit d’ouvrir un élément sous le bloc Éléments et de cliquer sur le sélecteur d’image. Vous pouvez également définir le titre de l’élément, sa description ainsi que le lien du bouton.

ajouter un accordéon d'images à une page Elementor

Répétez les étapes ci-dessus pour les autres éléments. Pour ajouter un nouvel élément à l’accordéon, il suffit de cliquer sur le bouton Ajouter un élément.

ajouter un accordéon d'images à une page Elementor

Ouvrez le bloc Settings sous l’onglet Contenu pour définir l’orientation (verticale ou horizontale), la taille de l’élément actif, la durée de l’animation et le style de l’effet d’assouplissement.

Stylisation de l’accordéon

Pour donner du style à votre accordéon, vous pouvez accéder à l’onglet Style dans le panneau de gauche. Il y a 7 blocs que vous pouvez ouvrir pour styliser l’accordéon. Dans le premier bloc (bloc Container), vous pouvez définir la hauteur de l’accordéon, la couleur d’arrière-plan, le rayon de la bordure et l’ombre portée.

ajouter un accordéon d'images à une page Elementor

Dans le bloc Item, vous pouvez définir l’espace entre les éléments, la couleur de l’arrière-plan de l’élément, le rayon de bordure de l’élément et l’ombre de la boîte de l’élément.

ajouter un accordéon d'images à une page Elementor

Vous pouvez jouer avec les 5 autres blocs pour créer d’autres options de style. Une fois que vous avez terminé, cliquez sur le bouton publier/mettre à jour votre page.

Voila.

Obtenez Elementor Pro Maintenant !!!

Conclusion

Voila ! C’est tout pour cet article qui vous montre comment ajouter un accordéon d’images à une page Elementor. Si vous avez des soucis sur comment y arriver faites le 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.