Le Carrousel de boucle est le carrousel dynamique d'Elementor Pro. Au lieu d'ajouter des diapositives à la main, vous construisez une diapositive comme modèle et pointez le widget sur une requête (posts, produits ou tout type de publication personnalisé) et elle se remplit Ajouter un post, le carrousel met à jour Aucune édition requise.
Il est arrivé dans Elementor 3.11 et c'est le Widget carrousel Elementor la plupart des gens recherchent en fait quand ils recherchent un post carrousel ou un curseur de produit C'est aussi Pro-only, sans équivalent libre dans Elementor core, donc la seconde moitié de ce post couvre le widgets carrousel gratuits cela vous rapproche si vous n'avez pas de permis.
Ce que couvre ce guide
- Loop Carousel vs Loop Grid : lequel utiliser
- Ce dont vous avez besoin avant de commencer
- Comment créer un Carrousel de boucle dans Elementor
- Les paramètres qui font trébucher les gens
- Loop Carousel pour les produits WooCommerce
- Pas d'Elementor Pro ? Le libre chemin
- Quand un Loop Carousel est le mauvais choix
- Questions fréquemment posées
Loop Carousel vs Loop Grid : lequel
Même moteur, même modèle Loop Item, présentation différente La grille empile les rangées verticalement Le carrousel met les mêmes éléments sur une piste horizontale.
Choisissez le carrousel lorsque les éléments sont facultatifs : une “vous pouvez également aimer la bande de”, les publications associées, les produits en vedette Personne n'a besoin de voir le septième élément pour que la page ait un sens.
Choisissez la grille lorsque les éléments sont la page Une archive, une catégorie de boutique, un index de blog Cacher les deux tiers d'une liste de catégories derrière une flèche vous coûte des conversions, car un acheteur qui doit cliquer pour voir plus de produits ne le fait généralement pas.
La règle que je donnerais à un client : si la section a un en-tête comme “Plus du blog,” carousel. Si le en-tête est le titre de la page, grille.
Ce dont vous avez besoin avant de commencer
- Élémenteur Pro. Loop Carousel n'est pas dans le plugin gratuit et il n'y en a pas de version partielle.
- Un modèle d'élément de boucle. C'est le design de la diapositive unique : image en vedette, titre, extrait, bouton Construit une fois dans Theme Builder, réutilisé partout.
- Contenu à interroger. Postes, produits ou type de publication personnalisé enregistré.
Sur les anciennes installations, vous devrez peut-être également l'activer sous Elementor → Paramètres → Fonctionnalités. Il est livré derrière un indicateur d'expérience et y est resté pendant quelques versions avant de devenir stable.
Comment créer un Carrousel de boucle dans Elementor
Construisez d'abord la diapositive, puis le carrousel Le faire dans l'autre sens signifie concevoir à l'intérieur d'un aperçu exigu.
- Créer le modèle Loop Item. Modèles → Générateur de thème → Article de boucle → Ajouter un nouveau Choisissez le type de publication qu'il va restituer Vous concevez une carte, pas une liste, et Elementor affiche un seul élément et le répète plus tard.
- Construisez la carte avec des balises dynamiques. Ajouter un widget Image et définir sa source sur Dynamic → Image en vedette. Widget d'en-tête → Dynamique → Titre de la publication. Éditeur de texte → Post Extrait. Bouton → Dynamique → URL de la publication. Rien ici n'est codé en dur ; chaque champ tire de la publication qui atterrit dans cet emplacement.
- Publier le modèle et sautez l'invite des conditions d'affichage Les éléments de boucle n'ont pas besoin de conditions, car ils sont appelés par un widget plutôt que affectés à un emplacement.
- Lâchez le widget Loop Carousel sur votre page et choisissez le modèle que vous venez de créer sous Choisir un modèle.
- Définir la requête. Source (Posts, Products, ou votre CPT), puis rétrécissez-le : incluez par taxonomie, excluez le post actuel, définissez posts-per-page Activez “Avoid Duplicates” s'il y a une autre boucle sur la même page, sinon votre bande related-posts répétera ce qui est déjà dans la barre latérale.
- Configurer le carrousel. Diapositives par vue, diapositives pour faire défiler, lecture automatique, boucle infinie, vitesse, pause en vol stationnaire Définissez les diapositives par vue séparément pour le bureau, la tablette et le mobile à l'aide des icônes de l'appareil en haut du panneau.
- Style la navigation. Flèches, points ou fraction. La taille, la couleur, la position et l’état de vol stationnaire se trouvent tous dans l’onglet Style.
Les paramètres qui font trébucher les gens
La boucle infinie nécessite suffisamment d'éléments. Les clones d'éléments glissent pour simuler le retournement, et il lui faut au moins deux fois vos diapositives à la vue pour le faire de manière invisible Quatre messages à trois par vue sauteront visiblement lorsqu'il s'enroulera Soit relever les messages à la page, soit désactiver la boucle.
Posts-per-page est une limite de requête, pas une limite d'affichage. Réglez-le sur 6 et le carrousel contient six éléments au total, mais beaucoup sont visibles. Les gens le fixent à 3 pour correspondre aux diapositives à la vue, puis se demandent pourquoi il n'y a rien vers lequel faire défiler.
L'écart de bord modifie l'indice. Un carrousel qui se termine au ras du bord du conteneur semble terminé Ajoutez un petit espace de bord pour que la diapositive suivante apparaisse et que les gens sachent glisser. C'est quelques pixels et cela change de manière mesurable le taux d'interaction.
Le jeu automatique plus liens est une mauvaise paire. Si vos diapositives sont cliquables et que le carrousel se déplace sur une minuterie, quelqu'un va chercher une carte et cliquer sur celle qui l'a remplacée La pause sur le survol corrige le boîtier du bureau Au toucher il n'y a pas de vol stationnaire, donc pour cartes cliquables Je désactiverais entièrement la lecture automatique.
Loop Carousel pour les produits WooCommerce
Même processus, une différence : définissez la source sur Produits et vous obtenez des contrôles de requête spécifiques à WooCommerce Filtrez par catégorie, balise ou attribut, triez par prix, popularité ou date et excluez les éléments en rupture de stock.
Le modèle Loop Item pour les produits doit comporter le prix et un bouton d'ajout au panier comme éléments dynamiques, pas de texte statique. Miss that et chaque carte du carrousel affiche le même prix, qui est exactement le genre de bug qui survit à la production car il semble bien dans l'aperçu de l'éditeur.
Produits connexes, récemment consultés, et “complet the look” strips sont tous le même widget avec une requête différente Et si vous n'avez besoin que d'un seul produit appelé plutôt que d'une bande, le Widget Produit en vedette fait cela sans aucune requête C'est un widget Pro, et c'est le seul widget produit WooCommerce dont Master Addons est livré.
Pas d'Elementor Pro ? voici le chemin libre
Loop Carousel est Pro. Si vous êtes sur Elementor gratuit, vous ne l'obtenez pas, et aucun addon gratuit ne réimplémente le système de modèles Loop Item.
Ce que vous pouvez obtenir gratuitement est le résultat : un carrousel dynamique qui tire les publications ou les produits et se met à jour. Maître Addons' Widget blog dispose d'un mode carrousel dans le plugin gratuit Interrogez par type de publication, catégorie, étiquette ou auteur, choisissez une mise en page, basculez l'affichage sur carrousel et configurez les mêmes flèches, points, lecture automatique et commandes par point d'arrêt.
Le compromis est honnête : vous ne concevez pas la carte Le widget Blog vous donne des préréglages de mise en page et un onglet Style plutôt qu'un canevas vierge Loop Item Si vous avez besoin d'un contrôle de pixel sur la diapositive, l'approche d'Elementor Pro est meilleure Si vous avez besoin de “derix derniers messages dans un curseur qui a l'air décent,” le widget gratuit y arrive plus rapidement.
Les produits sont plus fins, et il convient de le dire clairement : il n'y a pas de widget de carrousel de produits gratuit Une bande de produits coulissante et auto-actualisée a besoin du carrousel de boucle d'Elementor Pro, ou d'une disposition remplie à la main comme celle ci-dessous guide carrousel de produits fonctionne à travers les deux Et si vos diapositives sont des images fixes plutôt qu'une requête, le gratuit Widget Carrousel d'images est l'itinéraire le plus court, même si à ce stade, vous construisez un curseur, pas une boucle.
Il existe une troisième option gratuite à connaître. Navires Master Addons 20 modèles de carrousels et de curseurs nommés aussi importable Constructeur de widgets les fichiers, et 8 d'entre eux importent gratuitement Ils ne sont pas axés sur les requêtes, donc vous remplissez les éléments à la main, mais deux se rapprochent de ce que produit un Loop Carousel. Catalogue de pages quadrant pages une grille de neuf cases d'articles trois à la fois, chacune avec une image, une catégorie, un titre et une copie, ce qui est la chose libre la plus proche d'une boucle de produit paginée. Dirigeur d'indexation du grand livre met un index cliquable des entrées à côté d'une plaque d'affichage, construit pour les archives et les listes d'œuvres Tous les 20 sont rassemblés sur le hub de widgets de carrousel.
Quand un Loop Carousel est le mauvais choix
Trois cas, et j'ai regardé les trois tourner mal sur les sites clients.
Votre page d'archives. Une liste de catégories dans un carrousel signifie que le robot d'exploration de Google voit six produits où vous en avez soixante Le reste est dans le DOM, mais le signal à un utilisateur, et à quiconque juge la profondeur de la page, est que cette catégorie est mince.
Au-dessus du pli sur mobile. Un carrousel dynamique est une requête, un rendu de modèle et un initialisation curseur avant que quoi que ce soit ne peint Mettez ça en haut d'une page de téléphone et votre plus grande peinture content est une tournette.
Moins de cinq articles. Un carrousel avec trois diapositives est une grille qui fait travailler les gens Montrez simplement les trois.
Questions fréquemment posées
Elementor Loop Carousel est-il gratuit ?
No. Loop Carousel nécessite Elementor Pro, et il n'y a pas de version gratuite réduite L'alternative gratuite est un widget carrousel basé sur les requêtes à partir d'un addon, et le widget Blog de Master Addons a un mode carrousel dans son niveau libre qui tire les publications dynamiquement Pour les mises en page remplies à la main, 8 des 20 conceptions de carrousel importables de Master Addons sont également gratuites.
Quelle est la différence entre Loop Grid et Loop Carousel ?
Ils partagent le même modèle d'élément de boucle et les mêmes contrôles de requête La grille de boucle organise les résultats en lignes et en colonnes ; le carrousel de boucle les met sur une piste coulissante horizontale avec des flèches et des points Utilisez la grille pour les archives et les listes, le carrousel pour les” liés aux“ en option ou les bandes de” en caractéristiques.
Comment ajouter un Loop Carousel dans Elementor ?
Construisez d'abord un modèle d'élément de boucle dans Theme Builder, en utilisant des balises dynamiques pour l'image, le titre et l'extrait. Publiez-le, puis faites glisser le widget Loop Carousel sur votre page, sélectionnez ce modèle, définissez la source de requête et les filtres, et configurez les diapositives à la vue et la lecture automatique sous les paramètres Carousel.
Pourquoi mon Loop Carousel ne montre-t-il pas de messages ?
Habituellement la requête Vérifiez que le type de publication du modèle Loop Item correspond à la source de requête du widget, car un modèle construit pour Posts ne rendra pas de Produits La deuxième cause la plus fréquente est un filtre de taxonomie sans contenu correspondant La troisième est l'ensemble de publications par page inférieur à ce que vous pensez.
Le carrousel de boucle peut-il afficher des types de messages personnalisés ?
Oui. Tout type de publication publique enregistré apparaît dans la liste déroulante source de la requête, et ses champs personnalisés sont disponibles sous forme de balises dynamiques si vous utilisez ACF, Meta Box ou Pods. Construisez le modèle Loop Item par rapport à ce type de publication et le carrousel gère le reste.
Comment puis-je rendre un Loop Carousel réactif ?
Définissez les diapositives par vue séparément sur chaque point d'arrêt à l'aide des icônes de l'appareil en haut du paramètre Trois sur le bureau, deux sur la tablette, un sur mobile est la valeur par défaut sûre Vérifiez également la taille de la flèche sur mobile, car la valeur par défaut du bureau est souvent trop petite pour être une cible de pression confortable.
Où aller à partir d'ici
Si vous avez Pro, construisez d'abord le modèle Loop Item et traitez-le comme un atout de conception que vous réutiliserez sur les grilles et les carrousels pour le reste du site C'est la pièce qui rapporte.
Si vous préférez construire la carte comme un widget réutilisable plutôt que comme un modèle, c'est quoi création de votre propre widget est pour, et le page de tarification couvre le niveau dans lequel il se trouve.
Si vous ne le faites pas, commencez par les widgets gratuits pilotés par les requêtes et voyez si les préréglages de mise en page vous rapprochent suffisamment Les deux chemins sont couverts sur le Widgets de carrousel d'éléments page, ainsi que le reste des options du carrousel Toujours en train de décider du format ? Carrousel contre curseur règle la forme dont votre section a réellement besoin, et le résumé du plugin du curseur couvre les plugins qui le construisent.
