20 modèles de curseurs d'éléments, 8 d'entre eux gratuits : Coverflow, Timeline, Témoignage et plus encore

La plupart des modèles de curseurs Elementor que vous trouvez en ligne sont le même curseur Image pleine largeur, texte au milieu, flèches sur les côtés, suivant.

Ces vingt ne sont pas ça On plie les diapositives autour du bord d'un cercle Un épingle les entrées à une chronologie datée où les écarts entre les années sont dessinés à l'échelle Un transforme une liste de lignes dans la navigation elle-même Huit d'entre eux importent dans le plugin gratuit Master Addons sans licence Pro, qui la panne free-versus-Pro passe en revue en détail, et chacun des vingt a une démo en direct que vous pouvez ouvrir, poke at, et break avant de décider si vous le voulez.

Ci-dessous : chaque design, à quoi il sert réellement, et la note honnête sur laquelle ceux qui sont une mauvaise idée pour votre site Pour les carrousels conventionnels du plugin à côté de ceux-ci, commencez par le hub de widget carrousel.

Les 20 designs en un coup d'œil

Choisissez ce que vous construisez, pas ce qui vous semble le mieux dans une capture d'écran Un flux de couverture qui semble magnifique sur un portefeuille enterrera une grille de produits.

Ce dont vous avez besoin pour exécuter ces

Elementor free suffit pour la page elle-même La scission est dans les conceptions :

• Les dessins 13 à 20 sont gratuits. Ils importent via Master Addons → Widget Builder → Importer un widget sur le plugin gratuit : pas de licence Pro, pas d'essai, pas de carte. Chacun atterrit dans le panneau Elementor sous Favoris avec ses propres contrôles.
• Les conceptions 01 à 12 nécessitent Master Addons Pro. Ils sont construits sur le plein Constructeur de widgets(en), qui est une fonctionnalité Pro.

Ce qui n'a besoin de rien : les démos en direct Ouvrez n'importe lequel des vingt, redimensionnez le navigateur, faites glisser une diapositive, regardez comment il se comporte sur une fenêtre de largeur de téléphone Cela ne coûte rien et c'est le seul moyen de juger si un style de mouvement convient à votre contenu.

Le plugin gratuit expédie également des widgets de carrousel conventionnels (carrousel d'images, curseur de logo, curseur d'équipe et widget Blog en mode carrousel), tous couverts sur la page du widget du carrousel liée dans l'intro.

01. Couverture méridienne

Démo en direct Télécharger Widget JSON

La glissière centrale est plate et carrée. Ceux de chaque côté tournent vers l'axe Y et s'obscurcissent, donc votre œil atterrit là où il devrait. Couverture classique, moins la réflexion dont personne n'a voulu depuis 2011.

Cela fonctionne parce qu'il montre le contexte sans rivaliser pour attirer l'attention Un visiteur voit qu'il y a cinq autres études de cas sans pouvoir en lire aucune, ce qui est exactement la tension qui fait que les gens cliquent sur la flèche.

Utilisez-le pour: bobines d'étude de cas, pièces de portfolio, tout ce où chaque diapositive mérite une lecture complète.

Ne l'utilisez pas pour : grilles de produits. Coverflow montre un article correctement et fait allusion à deux. Les acheteurs comparant six produits vous détesteront.

02. Accordéon Concertina

Démo en direct Télécharger Widget JSON

Six panneaux verticaux étroits En planer un et il se dilate ; les autres se compriment pour faire de la place Pas de flèches, pas de points, pas de jeu automatique : toute la navigation est le vol stationnaire.

Regardez ce qui se passe sur mobile cependant Il n'y a pas de survol sur un écran tactile, donc les panneaux se replient pour taper pour s'étendre C'est bien, mais cela signifie que le comportement du premier tap doit être évident ou que les gens défileront tout droit au-delà Ajoutez un chevron visible sur le panneau actif et le problème disparaît.

Utilisez-le pour: six catégories de services ou moins, des listes de destinations, tout ce qui concerne la vente des étiquettes.

03. Superposition d'ombre

Démo en direct Télécharger Widget JSON

Image remplit le cadre, légende se trouve dans un dégradé qui assombrit seulement le tiers inférieur Glissez les changements, légende croise un battement plus tard.

Ce délai est tout le design Le texte et l'image arrivant ensemble se lisent comme une bannière publicitaire. Le texte arrivant en deuxième se lit comme une légende sur une photographie, ce que vous voulez si la photographie est le produit.

C'est le design le plus proche du Widget Carrousel d'image d'élémenteur si vous voulez le même look sans Pro. Le widget gratuit fait image plus légende, juste sans le fondu décalé.

04. Pont de strate

Démo en direct Télécharger Widget JSON

Cartes empilées avec un léger décalage pour que vous puissiez voir trois ou quatre arêtes derrière celle du haut Avancez et la carte du haut se soulève et glisse, révélant la suivante.

La pile fait quelque chose qu'un carrousel plat ne peut pas faire : elle montre la quantité Un visiteur sait qu'il y a plus de témoignages sans compter les points Pour une preuve sociale c'est la plupart du travail.

Utilisez-le pour: témoignages, niveaux de tarification, étapes d'intégration.

Attention: gardez la pile à cinq ou six cartes visibles Passé que les décalages deviennent si minces la profondeur lit comme un bug de rendu.

05. Fractionnement de la bisecte

Démo en direct Télécharger Widget JSON

L'écran se divise vers le milieu La moitié supérieure monte, la moitié inférieure descend et ils se rejoignent sur la diapositive suivante Deux panneaux, un geste.

Je mettrais ça en héros et nulle part ailleurs C'est un gros mouvement : ça mange la fenêtre complète et demande une seconde de l'attention du visiteur Dans un héros qui est un commerce équitable A mi-chemin d'une page de services c'est juste du bruit.

Utilisez-le pour: homepage heroes, pages de destination de campagne, paires avant/après.

06. Roue de souris d'ascension

Démo en direct Télécharger Widget JSON

Pas de flèches Vous faites défiler, il avance Le curseur capture la roue pendant qu'elle est en vue et la libère une fois que vous avez touché la dernière diapositive.

Le scroll-jacking a une mauvaise réputation et il l'a gagné La version ici libère la roue au moment où vous atteignez l'une ou l'autre extrémité, donc un visiteur qui veut continuer à descendre la page ne se fait jamais piéger Testez celui-ci sur un trackpad avant de vous engager, parce que l'élan du trackpad est beaucoup plus contrasté qu'une roue, et si vos diapositives sont des personnes à forte teneur en texte, elles vont dépasser.

Utilisez-le pour: sections narratives, histoires de produits, chronologies.

Ne l'utilisez pas : au-dessus du pli Le premier parchemin d'un visiteur devrait déplacer la page, pas un widget.

07. Retournement de pivot

Démo en direct Télécharger Widget JSON

La carte tourne de 180° sur l'axe vertical Face avant vers l'extérieur, face arrière vers l'intérieur Les deux faces sont modifiables, de sorte que l'inverse peut contenir une bio, une fiche de spécifications ou un prix.

Le contenu recto-verso est plus rare qu'il n'y paraît et ce design est la raison pour laquelle il est recherché Membre de l'équipe sur le devant, le rôle et les liens sur le dos Plan du produit, dimensions en arrière.

Utilisez-le pour: grilles d'équipe, avant/après, cartes de spécification Flip se trouve à côté de la couverture, de l'arc et de l'orbite dans le Panne de carrousel 3D.

08. Arc courbé

Démo en direct Télécharger Widget JSON

Les glissières reposent sur le bord d'un cercle dont le centre se trouve quelque part en dessous du pli Chacun arrive debout en haut et s'éloigne en partant Les masques d'image en forme d'arche suivent la même courbe.

Rien d'autre dans l'ensemble ne ressemble à ceci, et c'est l'argument pour cela Personne n'a vu cela sur un autre site WordPress.

Utilisez-le pour: collections où les éléments sont similaires et la présentation doit porter l'intérêt : un catalogue, une liste de spécimens, un menu.

09. Mosaïque de Tessera

Démo en direct Télécharger Widget JSON

Une grille de tuiles inégales qui remanie au lieu de glisser Les tuiles s'animent vers de nouvelles positions et tailles ; la composition change mais ne se vide jamais.

C'est celle à atteindre quand on a trente images et aucune hiérarchie entre elles Un carrousel conventionnel force un ordre de lecture sur un contenu qui n'en a pas Une mosaïque ne l'a pas.

Utilisez-le pour: photographie événementielle, pages de galerie, pages d'images riches.

Coût: c'est le design le plus lourd de l'ensemble pour le travail de mise en page Gardez les images sources sous 200 Ko chacune ou le remaniement bégaie sur Android milieu de gamme.

10. Traînée de méandre

Démo en direct Télécharger Widget JSON

Attraper et lancer Momentum porte la piste au-delà de l'endroit où vous lâchez prise et facilite l'arrêt Pas d'encliquetage pour glisser les limites, donc une glissière peut s'asseoir à moitié visible, ce qui est le point, car une glissière à moitié visible est un signal qu'il y a plus.

Le free-drag a un coût d'accessibilité réel : les utilisateurs de clavier n'obtiennent rien d'une interaction de drag. Le support Arrow-key est connecté, mais si votre public se tourne vers les technologies d'assistance, le design 01 ou 04 les servira mieux.

Utilisez-le pour: lookbooks, portfolios, longues collections horizontales.

11. Rideau d'ardoise

Démo en direct Télécharger Widget JSON

Les panneaux verticaux s'écartent comme des rideaux et la diapositive suivante est déjà assise derrière eux La révélation est la transition.

Ça se lit comme une cérémonie C'est utile précisément deux fois sur un site web, un lancement de produit et un héros de la page d'accueil, et égaré partout ailleurs.

Utilisez-le pour: lancements, héros d'annonces, campagnes saisonnières.

12. Orbite Halo

Démo en direct Télécharger Widget JSON

Les objets gravitent autour d’un point central fixe. Celui du haut est actif et pleine grandeur ; les autres rétrécissent à mesure qu'ils voyagent dans le dos.

Les mises en page circulaires conviennent au contenu qui boucle véritablement Un processus en quatre étapes, un diagramme d'écosystème, une roue de service Mettez-y une liste linéaire et vous allez confondre les gens, car un cercle implique des“retours au départ,” et un flux d'intégration en cinq étapes ne.

Utilisez-le pour: diagrammes de processus, cartes d'écosystèmes, roues de capacités.

13. Curseur héros à socle (gratuit)

Démo en direct Télécharger Widget JSON

Une image remplit la scène Un socle de légende se trouve en bas à gauche, la barre de contrôle (points, flèches, compteur) en bas à droite Les diapositives échangent instantanément : pas de fondu, pas de glissement, rien pour se désynchroniser ou bégayer sur un téléphone lent.

L'échange instantané sonne comme une limitation jusqu'à ce que vous chronométrez un fondu contre lui Une transition de héros attire l'attention deux fois : une fois parti, une fois arrivé Ce design dépense ce budget pour la photographie à la place C'est aussi le seul design de l'ensemble avec un contrôle de lien par diapositive, plus une étiquette CTA partagée sur toutes les diapositives, qui est exactement la forme dont un héros de la page d'accueil a besoin.

Utilisez-le pour: homepage heroes, landing page tops, partout où l'image est l'argument.

Ne l'utilisez pas pour : un contenu qui a besoin de motion pour s'expliquer Il n'y en a pas, exprès.

14. curseur d'index de grand livre (gratuit)

Démo en direct Télécharger Widget JSON

Une colonne de lignes d'entrée à côté d'une grande plaque Choisissez une ligne et la plaque, son cachet et son échange de légendes pour correspondre La liste est la navigation, sans flèches requises, bien qu'ils soient là.

Cela inverse le problème habituel du carrousel Un curseur normal cache tout sauf la diapositive actuelle ; ici la table des matières complète est visible tout le temps, et l'image est la vue de détail Il y a une bascule de sélection sur survol si vous voulez que les lignes répondent avant le clic.

Utilisez-le pour: collections, archives, listes d'œuvres : partout où les titres portent de véritables informations.

Attention: les lignes vendent le clic. “Item 1, Item 2, Item 3” gaspille tout le design ; écrivez des titres de lignes comme des titres.

15. Galerie de plaques de vitrine (gratuit)

Démo en direct Télécharger Widget JSON

Une seule plaque sous une bande de vignettes, avec un panneau collant à côté tenant la légende et une table de données de trame : lieu, heure, objectif, ouverture, obturateur, ISO. Les cadres se remplacent carrément ; rien ne glisse.

Si vous avez cherché dans le curseur d'images de l'élémentateur de la coordonnée avec des vignettes,” ceci est que, construit pour les photographes Les étiquettes des tables de données sont toutes modifiables, de sorte qu'un magasin d'impression peut transformer l'objectif/l'ouverture en papier/édition, et un musée peut les transformer en moyen/date/provenance.

Utilisez-le pour: portfolios de photographies, photographies d'objets, galeries de détails de produits Pour la même forme de plaque et de vignette avec vidéo dedans, voir le guide curseur galerie.

Ne l'utilisez pas pour : des images qui ne méritent pas de métadonnées Un panneau de données vide se lit comme une page inachevée.

16. Catalogue de pages quadrant (gratuit)

Démo en direct Télécharger Widget JSON

Une grille de boîtes d'articles, paginée trois à la fois : neuf éléments sur trois pages Un rail de segments montre où vous êtes en fuite et sert également de contrôle de saut ; des boutons de marche le font avancer et reculer.

C'est le design du travail que la plupart des carrousels sont donnés à tort : montrant beaucoup de choses comparables Chaque boîte porte une image, une catégorie, un titre, une copie et une statistique, et parce qu'une page complète de trois est visible à la fois, un visiteur peut réellement comparer, ce que le coverflow et ses cousins empêchent délibérément.

Utilisez-le pour: catalogues de style produit, grilles de fonctionnalités, menus de service C'est aussi l'itinéraire gratuit dans le Guide du carrousel de produits WooCommerce.

Attention: il contient exactement neuf articles répartis en trois pages. Si votre catalogue compte trente articles, vous souhaitez une véritable grille de produits avec des filtres, pas de carrousel.

17. Panneaux à onglets Bulletin (gratuit)

Démo en direct Télécharger Widget JSON

Une bande à onglets sur des panneaux empilés Chaque panneau est une petite mise en page éditoriale : une figure avec sa légende, un kicker, un titre, une lede, une copie corporelle, un tableau de faits à trois rangées et une signature.

Strictement, ce sont des onglets, pas un curseur, et c'est pourquoi c'est ici La moitié de ce que les gens essaient de forcer dans les carrousels (comparez trois plans, trois emplacements, trois études de cas) est un contenu tablé portant un costume Celui-ci fait aussi l'accessibilité correctement : une vraie sémantique de tablist ARIA avec tabindex itinérant, que la plupart des widgets tab faux.

Utilisez-le pour: comparez les comparaisons de plans, les pages de localisation, les panels d'études de cas : trois choses qu'un visiteur choisit entre plutôt que de parcourir.

18. Curseur de citations de tribune (gratuit)

Démo en direct Télécharger Widget JSON

Un panneau de citation à côté d'un portrait, traversé avec deux chevrons Une barre de progression et une piste de pointage où vous êtes, et les boutons de pas peuvent nommer la voix vers laquelle ils vont se déplacer, comme “Suivant : Amara Okafor” au lieu d'une flèche anonyme.

Cette étape nommée est le détail qui vaut la peine d'être volé Les carrousels de témoignages perdent des lecteurs à la transition, car une flèche ne promet rien Un nom est une raison de cliquer La marque de citation est un contrôle de texte modifiable aussi, donc elle peut être réglée sur le bon glyphe pour la langue du site, ou supprimée.

Utilisez-le pour: témoignages, avis, devis clients Il y a un présentation complète du carrousel10, et vous pouvez voir citations de clients réels sur notre propre site.

Attention: il tient trois voix, et chacune obtient la scène seule Choisissez vos trois meilleures citations, et gardez-les assez courtes pour lire en un seul souffle.

19. Diapositive chronologique de l'Almanach (gratuit)

Démo en direct Télécharger Widget JSON

Entrées épinglées sur un axe daté Les positions des tiques sont calculées à partir des années que vous tapez, donc l'espacement est réel plutôt que pair. 1994 et 1996 sont proches les unes des autres, 1996 et 2011 sont très éloignées les unes des autres et l'écart raconte sa propre histoire Un peigne de décennie au-dessus de la règle donne à l'espacement une échelle à lire.

Un widget sur deux de la chronologie espace ses entrées uniformément, ce qui se trouve tranquillement sur l'histoire Celui-ci ne le fait pas, et cela en fait le design le plus opiniâtre de l'ensemble C'est aussi le panneau le plus profond ici, à 143 contrôles, car l'axe, le peigne et le tick énonce le style séparément des entrées.

Utilisez-le pour: historiques de l'entreprise, jalons du projet, journaux de changement, enregistrements avec des lacunes significatives Pour une version statique, il y a un tutoriel chronologie utilisation du widget stock.

Ne l'utilisez pas pour : contenu non daté L'axe est le design ; sans années réelles il n'y a rien pour qu'il dessine.

20. Curseur de caractéristiques Keystone (gratuit)

Démo en direct Télécharger Widget JSON

Un élément en vedette grand ; le reste attendre sur un mur à côté, chacun portant juste son numéro et son nom Cliquez sur un satellite et il est promu à la fonctionnalité, et les boîtes FLIP dans leurs nouveaux endroits plutôt que de se téléporter, donc votre œil suit l'échange au lieu de le perdre.

La caractéristique porte une plaque de trois faits Elle a été construite pour des pièces, des espaces et des expositions tournantes, et c'est la portée honnête : elle présente un petit ensemble de choses distinctes une à la fois, les autres étant visiblement mises en file d'attente.

Utilisez-le pour: salles de réunion, espaces de studio, expositions, un portefeuille de trois à cinq pièces.

Attention: les satellites affichent uniquement le numéro et le nom, la fonctionnalité doit donc faire la persuasion. Dirigez avec votre élément le plus puissant, car la plupart des visiteurs ne cliquent jamais dessus.

Comment importer un modèle de curseur dans Elementor

Quatre étapes, environ quatre-vingt-dix secondes Même flux pour les conceptions libres et Pro, et différent de importation d'un modèle Elementor« , car un design s'enregistre comme un widget plutôt que comme une mise en page ».

1. Télécharger le fichier JSON du design de sa page de démonstration Un fichier par conception.
2. Accédez à Master Addons → Widget Builder dans votre administrateur WordPress et cliquez sur Importer un widget.
3. Lâchez le JSON sur la dropzone. Le design s'enregistre comme un widget avec ses propres contrôles : contenu, couleurs, typographie, points d'arrêt Les huit designs gratuits importent sur le plugin gratuit ; les douze designs Pro demandent ici une licence Pro.
4. Faites-le glisser sur une page depuis le panneau Élémenteur, où il apparaît sous Favoris, et échangez le contenu de l'espace réservé contre le vôtre.

L'importation ne touche pas à votre thème, ne met rien en file d'attente au niveau mondial, et ne crée pas de shortcode Elle devient un widget dans le panneau comme les autres.

Ces curseurs fonctionnent-ils sur mobile ?

Tous les vingt sont tactiles et réactifs. Quatre changent de comportement plutôt que de simplement mettre à l’échelle :

• Accordéon Concertina passe du vol stationnaire à l'expansion en passant par le robinet à l'expansion.
• Roue de souris ascensionnelle laisse tomber la capture de roue et utilise le balayage.
• Méandre Drag garde la traînée mais raccourcit l'élan pour qu'un film ne dépasse pas toute la piste.
• Dirigeur d'indexation du grand livre empile l'index au-dessus de la plaque et la sélection en vol stationnaire retombe pour taper.

Les huit gratuits maintiennent également la navigation au clavier activée par défaut, et Plinth Hero et Rostrum Quote répondent aux gestes de balayage hors de la boîte Testez la mosaïque sur un vrai téléphone plutôt que dans l'émulateur de périphérique du navigateur, car les fenêtres émulées ne reproduisent pas le coût de mise en page Android de milieu de gamme, et la mosaïque est l'endroit où cela apparaît en premier.

Lequel faut-il réellement choisir ?

Si vous êtes coincé, ceux-ci couvrent la plupart des sites :

• Portefeuille ou agence: Meridian Coverflow, ou Meander Drag si vous avez plus d'une douzaine de pièces Sur une licence gratuite, Keystone Feature Slider.
• Entreprise de services: Accordéon Concertina. gratuitement, Bulletin Tabbed Panels, dont le tableau des faits mérite d'être conservé dans les comparaisons de plans.
• Boutique: Quadrant Paged Catalogue for a curated nine Il n'y a pas de widget gratuit qui glisse un flux de produits en direct ; ce travail a besoin Carrousel en boucle d'Elementor Pro. Sautez les conceptions 3 D dans un sens ou dans l'autre : les acheteurs veulent comparer, et le flux de couverture est construit pour les arrêter.
• Témoignages : Rostrum Quote Slider C'est gratuit, et les boutons de pas nommés sont la meilleure invite de transition de l'ensemble.
• Héros de la page d'accueil : Planche Hero Slider si la photographie est forte, et le modèles de section héros si vous voulez le bloc entier plutôt que le curseur ; Bisect Split ou Rideau d'ardoise si vous voulez que le mouvement soit le moment, et un seul d'entre eux, une fois.
• À propos de la page ou de l'historique : Almanac Timeline Slider Rien d'autre ici ne date le contenu honnêtement.

Quoi que vous choisissiez, passez-le devant le seul test qui compte : chargez la page sur votre propre téléphone, sur cellulaire, et voyez si le curseur est la première chose qui rend ou la dernière Un design qui arrive après que le texte a déjà été lu n'est pas un curseur, c'est une décoration.

Questions fréquemment posées

Où aller ensuite

Ouvrez deux ou trois démos et jetez-leur un véritable aperçu de votre téléphone avant de choisir. Puis :

Douze des vingt ont besoin d'une licence pour importer, donc le page de tarification est l'endroit idéal pour vérifier quel niveau couvre le design que vous avez choisi.

• Parcourir tout en un seul endroit sur le Widgets de carrousel d'éléments page, avec les vingt designs plus les propres widgets carrousel du plugin.
• S'en tenir au niveau libre ? Les widgets gratuits du carrousel publient marche à travers tout ce qui ne coûte rien, ces huit inclus.
• Aller chercher la profondeur au-dessus du mouvement ? Les conceptions de carrousel 3D (coverflow, flip, arc et orbite) examinent de plus près leur propre.
• Vous voulez une page entière plutôt qu'une section ? le kits de modèles expédiez des aménagements complets avec des carrousels déjà placés.
• Construire toute la page, pas seulement le curseur ? le modèles de section Élémenteur gratuit la bibliothèque couvre les fonctionnalités, les prix, les témoignages, les blocs d'équipe, FAQ et CTA, chacun importable sous la forme d'un widget modifiable.