Le carrousel d'articles de Elementor est un widget qui présente les articles de WordPress dans un format coulissant, avec des images, des titres, des extraits et des outils de navigation.
Il est idéal pour présenter des articles de blog, des pages ou du contenu personnalisé. Il offre un moyen visuellement attrayant de regrouper les articles par catégorie et de guider les utilisateurs à travers votre contenu.
Lors de la création d'un carrousel de posts dans Elementor, j'ai rencontré des limitations avec la version gratuite de Elementor. En effet, Elementor ne propose pas de carrousels de posts gratuitement.
Pour ajouter une barre de défilement à votre page Elementor, vous devez utiliser un plugin tiers qui fournit une barre de défilement de type widget carrousel.
Dans ce tutoriel, je vais vous guider à travers les étapes pour ajouter un post carousel slider en utilisant Elementor.
Sans plus attendre, commençons !
Comment ajouter un slider Carousel pour Elementor
La première étape de l'ajout d'un carrousel d'articles à Elementor consiste à choisir le bon plugin. Il existe plusieurs options disponibles, chacune offrant des caractéristiques uniques pour un affichage efficace des articles.
Ici, j'ai établi un tableau comparatif des plugins de carrousel natif Elementor les plus populaires, en tenant compte de facteurs tels que les options de personnalisation, la réactivité et la compatibilité avec la configuration de votre site web.
| Fonctionnalité | Elementor Pro | Compléments essentiels | Element Pack |
| Plusieurs types de carrousels (image, message, etc.) | Seulement de base | Options modérées | Gamme étendue |
| Contrôles avancés de style et de mise en page | Limitée | Bonne personnalisation | Contrôle total |
| Contenu dynamique dans les carrousels (ACF, CPT, WooCommerce, etc.) | Non | Non | Oui |
| Carrousel pour les membres de l'équipe, le portfolio, les témoignages, les nouvelles, etc. | Peu | Certains | Collection complète |
| Contrôles interactifs (effets de survol, animations, glissement de la souris) | De base | Quelques effets | Effets avancés |
| Flexibilité des sources de contenu (articles, termes, produits, etc.) | Uniquement les postes | Limitée | Soutien dynamique |
D'après mon expérience, le widget Post Slider de Element Pack s'impose comme la meilleure option pour créer un carrousel de billets dans Elementor.
J'ai testé de nombreux plugins, mais c'est celui-ci qui offre la configuration la plus efficace, une navigation fluide et des performances fiables. Le niveau de personnalisation qu'il offre surpasse les autres solutions, permettant un contrôle précis de la mise en page, de l'animation et du style sans complexité inutile.
Ici, je vous ai montré 3 étapes simples qui vous aideront à ajouter un slider carrousel convivial et avancé. Les étapes sont les suivantes :
Étape 1. Ajoutez le widget post carousel slider à votre page
Tout d'abord, ouvrez la page où vous souhaitez ajouter le carrousel dans l'éditeur de Elementor.
Trouvez le widget "Post Slider" ou "Post Carousel Slider" dans le panneau des widgets de Elementor.
Faites glisser le widget sur votre page.
2. Configurer le widget
Nous allons maintenant rendre le widget fonctionnel et personnalisable.
Paramètres de contenu :
Source : Choisissez l'endroit où les articles seront récupérés (par exemple, les articles, les pages, les produits). Ici, j'ai montré les blogs, j'ai donc sélectionné l'option "Post".
Inclure : Filtrer les articles par auteur, catégorie, étiquette, etc.
Mise en page : Personnalisez le nombre d'articles par page, l'ordre et d'autres options de mise en page.
Ici, vous pouvez personnaliser l'animation, la notation, les effets sonores, le lien wrapper et la fonction de pagination.
Réglages de style :
- Titre : Définissez la taille de la police, la typographie et la couleur en fonction de votre image de marque.
- Texte : Ajustez l'espacement, la hauteur des lignes et le contraste pour une meilleure lisibilité.
- Bouton : Personnalisez les couleurs, les effets de survol et le remplissage pour un meilleur engagement.
- Pagination : Choisissez entre des points, des chiffres ou des flèches, et alignez le style sur votre mise en page.
Paramètres avancés :
Ajoutez des marges, du rembourrage, des feuilles de style CSS personnalisées ou réglez d'autres options avancées.
3. Personnaliser et publier
Expérimentez différents paramètres pour obtenir l'aspect et le comportement souhaités pour votre carrousel de messages. Voici quelques modèles que j'ai créés.
une autre est :
Une fois que vous êtes satisfait du design, publiez ou mettez à jour votre page.
Conseils rapides pour une configuration solide du Post-Carousel Slider
Après avoir travaillé avec le widget Post Slider dans Element Pack, j'ai pris quelques habitudes pratiques qui aident à rendre un carrousel non seulement utilisable, mais aussi agréable à faire défiler :
- Composer la mise en page Votre mise en page est déterminante pour la lisibilité. Jouez avec le nombre de colonnes que vous utilisez, l'espacement entre elles et le remplissage des bords jusqu'à ce que vous ayez l'impression d'une présentation claire et non surchargée.
Exemple : Pour les ordinateurs de bureau, une configuration en trois colonnes avec des intervalles de 20 px entre les diapositives permet souvent d'obtenir un résultat satisfaisant - net, équilibré et facile à parcourir.
- Utiliser les bonnes images Les images de haute qualité attirent les utilisateurs, mais les fichiers surdimensionnés peuvent ralentir le processus. L'objectif est d'obtenir des images nettes et légères qui se chargent rapidement.
Exemple : Enregistrez les vignettes de vos articles à 800×500 pixels et passez-les par TinyPNG pour réduire la taille du fichier sans perte de qualité notable.
- Contrôler ce qui apparaît Vous ne voulez pas que n'importe quel message s'affiche. Utilisez les commandes de requête pour n'afficher que les articles importants, par catégorie, par étiquette ou même par sélection manuelle.
Exemple : Vous souhaitez mettre en avant les tutoriels ? Réglez la requête pour qu'elle n'affiche que les articles étiquetés "En vedette" de votre catégorie "Tutoriels". - Faciliter la navigation, sans la rendre distrayante Les flèches et les points sont intéressants, mais ils ne doivent pas détourner l'attention des messages eux-mêmes. Restez-en au minimum et testez les transitions.
Exemple : Ajouter des flèches qui apparaissent au survol et utiliser un effet de fondu doux avec une vitesse de 600 ms - c'est doux et ne donne pas l'impression d'un saut. - Vérifier la présentation mobile Ce qui fonctionne sur un ordinateur portable peut ne pas tenir sur un téléphone. Vous devez vous assurer que votre curseur s'adapte à toutes les tailles d'écran.
Exemple : Définir des points de rupture mobiles autour de 767 px, passer à une présentation en une seule colonne et réduire les marges pour conserver une présentation compacte et lisible. - Définir un rythme facile pour le défilement automatique La lecture automatique permet d'attirer l'attention, mais elle ne doit pas précipiter les internautes dans le contenu. Trouvez un rythme confortable qui donne aux utilisateurs le temps de lire.
Exemple : Essayez d'atteindre 4000 ms pour chaque diapositive et activez la fonction de pause au survol pour que les visiteurs puissent s'arrêter et interagir lorsque quelque chose attire leur attention. - Effectuer une vérification rapide avant le lancement Avant la mise en ligne, assurez-vous que le curseur fonctionne bien : testez la vitesse de chargement, l'accessibilité et l'intuitivité du curseur.
Exemple : Utilisez Lighthouse dans Chrome DevTools pour mesurer les performances, et prévisualisez avec un lecteur d'écran pour vérifier les lacunes en matière d'accessibilité.
Comment ajouter une barre de défilement dans Elementor ?
Pour ajouter un message curseur en ElementorPour cela, installez un plugin tel que Element Pack qui fournit un widget post slider. Après activation, faites glisser le widget post slider sur votre page Elementor, ajustez les paramètres et personnalisez le design pour qu'il corresponde à votre site.
Comment ajouter un carrousel dans Elementor ?
Utilisez un widget carrousel à partir d'un plugin Elementor tel que Post Carousel Slider pour Elementor. Une fois installé, placez le widget carrousel sur votre page Elementor, configurez la source de contenu, ajustez les options de mise en page et appliquez des animations pour un effet de défilement fluide.
Comment ajouter un curseur personnalisé dans Elementor ?
Pour un curseur entièrement personnalisé, utilisez la fonction Elementor Pro Slides Widget. Ces outils permettent une personnalisation avancée, y compris un contenu dynamique, des animations et des éléments de conception personnalisés. Vous pouvez également utiliser Kit Ultimate Store pour des fonctionnalités supplémentaires de slider spécifiques à WooCommerce.
Quelle est la différence entre un slider et un carrousel dans Elementor ?
A curseur affiche généralement une diapositive à la fois, ce qui permet aux utilisateurs de faire défiler les éléments de manière séquentielle. A carrouselLe carrousel, quant à lui, présente plusieurs éléments dans la même vue, ce qui permet souvent un défilement fluide et continu. Les carrousels conviennent parfaitement aux grilles d'articles et aux galeries de produits, tandis que les curseurs sont idéaux pour les sections de héros pleine largeur et les promotions.
Conclusion
Dans ce blog, je vous ai guidé à travers le processus complet d'ajout d'un slider carrousel dans Elementor, de la sélection du plugin idéal à la personnalisation et à la publication de celui-ci de manière transparente.
Avec les bons outils et les bonnes techniques, vous pouvez créer un slider de posts soigné et réactif qui non seulement améliorera l'attrait visuel de votre site, mais soutiendra également les objectifs plus larges de votre boutique.
Nous espérons que ce guide vous a fourni des informations précieuses et des étapes pratiques pour construire un carrousel de sliders de posts dans Elementor.
N'hésitez pas à nous faire part de vos questions ou commentaires dans l'espace prévu à cet effet. Nous vous souhaitons bonne chance !
Si cet article vous a plu, n'oubliez pas de vous inscrire à notre lettre d'information pour recevoir d'autres articles captivants, des mises à jour et des offres spéciales directement dans votre boîte de réception. De plus, suivez-nous sur Facebook, Xet YouTube pour vous tenir informé.
