Comment créer un carrousel d'images vertical sur WordPress à l'aide d'Elementor

Muneeb Tutoriels WordPress Jan 21, 2022

Un diaporama de photos ou d'informations que les téléspectateurs peuvent sélectionner en appuyant sur un bouton qui les fait avancer ou reculer dans le diaporama est appelé carrousel d'images. Il illumine l'apparence générale de votre site Web et aide à promouvoir les services essentiels.

Des photos attrayantes peuvent attirer de nouveaux visiteurs sur votre site en attirant immédiatement leur attention. Ce didacticiel vous montrera comment utiliser Elementor pour créer un carrousel d'images vertical sur WordPress.

Comment créer un carrousel d'images vertical Elementor

Créez d'abord une image appropriée pour votre carrousel lisse vertical Elementor . Vous aurez besoin d'une image qui contient déjà toutes vos photographies. En utilisant Crello , un programme semblable à Canva, vous pouvez en créer un, mais n'importe quel logiciel de retouche d'image devrait suffire.

Bien sûr, cela a l'inconvénient de ne pas être dynamique, et cela peut être gênant lorsque seules quelques photos doivent être modifiées. Il offre cependant plusieurs avantages. Il produit un carrousel CSS uniquement sans exigences JS. L'animation est très fluide, avec très peu d'utilisation du processeur. En un mot, c'est incroyablement efficace, bien qu'un peu gênant.

Créer des sites Web incroyables

Avec le meilleur constructeur de page Elementor

Commencer Maintenant

Ensuite, donnez à votre colonne la colonne de nom vertical en tant que classe.
Définissez l' espace des widgets pour cette colonne sur 0 dans les paramètres de colonne et de mise en page .

Add an image element to that column and choose the picture you made. Ajoutez un élément d'image à cette colonne et choisissez l'image que vous avez créée. Assign the class carousel vertical to the picture element . Attribuez la classe carrousel vertical à l' élément image .

Faites tout exactement comme vous le souhaitez, puis reproduisez-le. Dans cette colonne, vous en aurez besoin de deux, chacune avec des paramètres identiques. Et ensuite, vous pouvez continuer à utiliser le code CSS ci-dessous. Vous pouvez utiliser ce code n'importe où pour effectuer les modifications.

.carouselvertical {
    animation: 10s linear 0s infinite normal none running vloop;
}

.verticalcolumn 

Il y a beaucoup de commentaires avec le code pour vous permettre de comprendre suffisamment et d'apporter les modifications là où vous en avez besoin. En utilisant ce code, vous pouvez créer avec succès un carrousel vertical Elementor .

5 meilleurs plugins de carrousel d'images

1. Publiez le carrousel pour Elementor

Post Carousel For Elementor par iThemelandCo est un plug-in d'extension Elementor qui vous permet de créer des carrousels multimédias incroyablement créatifs avec ses mises en page de carrousel prêtes à l'emploi. Le plugin s'intègre parfaitement à Elementor et propose 19 mises en page prédéfinies. Ces mises en page sont entièrement personnalisables et peuvent facilement être personnalisées en fonction de vos besoins à l'aide du mécanisme de glisser-déposer d'Elementor.

Carrousel de produits pour Elementor

Product Carousel For Elementor est un autre plug-in d'extension Elementor conçu explicitement pour les magasins de commerce électronique afin de présenter leurs produits dans un carrousel. Le plugin offre 12 \ 002B commandes de carrousel telles que la lecture automatique, le glissement pour faire défiler, la pause au survol, etc. Le plugin est très réactif sur tous les types d'appareils et vous pouvez créer autant de carrousels que vous le souhaitez. De plus, il s'agit d'un plugin 100% multilingue, ce qui signifie qu'il fonctionnera même si votre site Web est traduit dans une autre langue.

3. Carrousel rapide pour Elementor

Fast Carousel For Elementor est un module complémentaire Elementor qui prétend être assez rapide pour créer un carrousel pour vous en une minute. Aussi impressionnant que cela puisse paraître, il propose également différents types de galeries ainsi que plus de dix styles uniques. Le plugin est équipé de plus de cinq commandes de carrousel en plus d'offrir des options de couleur personnalisées avec chaque carrousel. Pour une solution rapide, cela pourrait être votre meilleur pari pour un carrousel d'images.

Nous espérons que vous avez trouvé ce didacticiel utile pour améliorer votre site Web. Assurez-vous de nous rejoindre sur notre Facebook et Twitter pour continuer à recevoir des tutoriels qui rendent votre voyage WordPress amusant et facile.

Divi WordPress Theme