Carousel Elementor Pro : Guide Complet pour Maîtriser ce Widget

Le widget Carousel Elementor Pro est un outil puissant qui transforme vos présentations des diaporamas dynamiques et interactifs sur WordPress. Il est intégré dans la version pro du plugin Elementor. Ce widget va mettre en valeur vos images, vos vidéos ou du contenu textuel. Les transitions sont fluides et la navigation intuitive améliorent l’expérience utilisateur.

Dans ce guide, je vais vous montrer comment configurer et personnaliser un carrousel Elementor Pro pour éblouir vos visiteurs, même sans compétences en codage.

Étape 1 : Ajouter une Nouvelle Section pour le widget Carousel Elementor pro

Créer une section dédiée au carrousel

Pour commencer, ouvrez Elementor et ajoutez une nouvelle section. Cliquez sur le bouton « Ajouter une section« .

Choisissez ensuite la structure adaptée à votre design. Assurez-vous de définir les marges et les espacements pour intégrer le carrousel dans votre mise en page.

Faites une pause pour réfléchir à la disposition et à la taille de la section pour optimiser le visuel du carrousel. Vous pouvez choisir parmi les structures de colonnes et adapter le carrousel à votre design.

Étape 2 : Ajouter le Widget Carousel d’Elementor Pro

Trouver et ajouter le widget Carousel Elementor pro

Dans le panneau de gauche, faites un glisser-déposer du widget « Media Carousel » d’Elementor Pro dans la section que vous venez de créer.

Le widget carousel peut être utilisé pour divers types de contenu. Qu’il s’agisse de galeries d’images, de vidéos promotionnelles ou de témoignages clients.

Personnalisation du contenu du Carrousel

Ajoutez vos images, vidéos ou autres contenus en cliquant sur « Ajouter un élément« . Vous pouvez réorganiser les éléments en les faisant glisser. Pour un meilleur rendu, utilisez des images de haute qualité.

Si vous le souhaitez, vous pouvez personnaliser du contenu, en ajouter des légendes et des descriptions pour chaque slide. Pensez aussi à indiquer les balises Alt de vos images pour améliorer votre référencement SEO.

Étape 3 : Personnalisation du Carrousel

Vous pouvez sélectionner 3 types d’affichages pour votre carousel Elementor pro.

Option carousel standard

Pour un affichage de carrousel basique où les images ou les contenus défilent de manière linéaire, vous pouvez ajuster la vitesse et le nombre de diapositives visibles dans les paramètres du widget.

Option diaporama

Vous pouvez aussi créer un effet visuel où les images semblent « défiler » en 3D avec un effet de perspective. C’est l’option « Slideshow » sur Elementor pro.

Option coverflow

Particulièrement efficace pour les sites créatifs ou artistiques, l’option « coverflow » va mettre en avant des collections ou des portfolios avec un défilement dynamique.

Étape 4 : Configurer les Options de Navigation et de Style

Modifier les options de navigation du widget carousel Elementor pro

Pour personnaliser votre navigation, 4 options sont disponibles : les flèches, les points, barre de progression ou autoplay pour la navigation. Les flèches permettent une navigation manuelle pour un contrôle interactif. L’autoplay permet un défilement automatique.

Configurer les styles visuels

Il est aussi possible de personnaliser les couleurs, les bordures ou les ombres de votre carrousel pour l’adapter à votre charte graphique.

Activer la « Lightbox »

Voir les images en détail c’est mieux. Avec l’option « lightbox », vous affichez les images en plein écran pour voir les images en détail. Cette option permet de présenter vos travaux tels qu’un portfolio, des photographie ou des œuvres.

Étape 5 : Ajuster le carrousel pour les appareils mobiles

Optimisation mobile du widget carousel Elementor pro

L’optimisation mobile garantit une bonne expérience pour le visiteur. Vous avez toutes les options nécessaires pour modifier la taille et l’apparence pour les smartphones et les tablettes du widget carousel Elementor pro.

Étape 6 : Avancé – configurations supplémentaires

Ajouter des animations personnalisées

Comme vous pouvez l’imaginer, vous pouvez créer des effets de transition entre les slides pour créer des animations.

Ajouter du CSS personnalisé pour le carrousel

Si malgré tout ça vous trouvez que le carrousel n’est pas à votre goût, vous pouvez aussi ajouter du code CSS pour le personnaliser.

Étape 7 : Enregistrer, Tester et Publier

Vérification finale

Pour terminer ce tutoriel, il est temps de tester et afficher le widget carousel Elementor pro pour voir s’il est bien responsive et s’il s’adapte sur différents navigateurs et appareils. Il se peut qu’il y ai de léger changement d’un navigateur à l’autre. Lorsque tout est bon, vous pouvez enregistrer votre travail et publier le carrousel sur votre site.

Conclusion sur le widget carousel Elementor pro

Le widget Carousel d’Elementor Pro vous donne la possibilité de créer des présentations visuelles des produits ou encore partager des témoignages. Faites attention à la structure de vos titres. Préférez mettre le titre principal en dehors du carrousel pour éviter qu’il change à chaque diapositive ou qu’il soit absent sur l’une d’elles. Ne construisez pas votre site uniquement avec des carrousels comme j’ai pu le voir chez une cliente. Évitez d’en mettre plus que deux sur une même page et assurez-vous que cela ne ralentit pas trop l’affichage de la page. La vitesse de chargement de votre site est un facteur important pour votre référencement.

Questions fréquentes sur le widget carousel Elementor pro

Comment puis-je modifier la vitesse du défilement dans le carrousel ?

Vous pouvez ajuster la vitesse du défilement entre deux diapositives dans les paramètres du widget sous l’onglet « Avancé » et contrôler le rythme de défilement des images.

Puis-je ajouter des liens cliquables dans chaque slide ?

Oui, chaque slide peut contenir des liens cliquables. Ajoutez-les dans la section « Contenu » du widget.

Comment résoudre les problèmes de performance liés au widget carousel Elementor pro ?

Assurez-vous d’avoir un bon hébergeur et que vos images sont optimisées pour le web. Utilisez une extension comme EWWW pour le faire automatiquement. Redimensionner les images à la taille de leur affichage sur l’écran pour limiter le poids des images et les ressources serveur. Pensez aussi à ajouter des balises méta à vos images en ajoutant une description pour la balise « Alt ».