Slider d'équipe
Votre équipe vend l'entreprise autant que tout ce qui se trouve sur la page, mais une grille plate de photos atterrit rarement de cette façon Le Maître Addons Curseur d'équipe Elementor transforme ces profils en carrousel que les gens peuvent parcourir : photos, noms, rôles, biographies courtes et liens sociaux, glissant dans une mise en page que vous contrôlez Choisissez un préréglage de style, ajoutez chaque membre via un simple répéteur et vous avez un carrousel des membres de l'équipe debout sans écrire de code.
C'est plus qu'une rangée de visages Les effets de survol, la lecture automatique et le style par élément donnent à chaque profil un peu de caractère et incitent les gens à cliquer dans toute l'équipe au lieu de s'arrêter à la première carte La vidéo ci-dessous montre la version Plus bas, vous obtenez les préréglages, les paramètres du carrousel et un rapide comment faire.
Qu'est-ce qu'un Elementor Team Slider ?
Un curseur d'équipe est un carrousel qui montre à vos collaborateurs une carte à la fois au lieu de les empiler dans une grille statique Les visiteurs glissent ou cliquent sur les profils, et chaque carte porte une photo, un nom, un rôle et généralement des liens sociaux Vous la verrez appelée carrousel des membres de l'équipe ou curseur d'un membre de l'équipe aussi Même idée dans tous les cas : intégrer une grande équipe dans un petit espace et laisser les gens se déplacer à travers plutôt que de défiler devant un mur de photos.
Vous pouvez vous rapprocher du carrousel principal d'Elementor et de beaucoup de style manuel, mais ensuite la disposition du profil, les états de vol stationnaire et le comportement réactif sont tous à vous de construire et de continuer à travailler Le widget Master Addons les expédie sous forme de préréglages, donc la plupart du travail est une configuration et non une conception Si une grille fixe vous convient mieux qu'un carrousel, le guide de la section des membres de l'équipe couvre ça à la place.
Commencez par un préréglage de style prêt à l’emploi
Vous n'avez pas à concevoir une carte à partir de zéro Partez d'un préréglage comme Team Carousel, Circle Gradient, ou Content on Hover, chacun un look fini que vous pouvez ajuster Ensuite construire l'équipe dans le répéteur de Contenu : ajoutez un élément par membre, téléchargez la photo, définissez la résolution de l'image, et remplissez le Nom, la Désignation, et une courte Description Cela fonctionne comme une petite base de données visuelle pour votre équipe, courez à partir d'un panneau.
- Préréglages en un clic : appliquez un design complet comme Team Carousel ou Circle Animation et vous avez une mise en page à partir de laquelle commencer.
- Gestion des répéteurs : ajoutez, supprimez ou faites glisser des membres dans l'ordre avec le bouton + Ajouter un élément.
- Profils de membres à part entière : image, nom, désignation, description et liens sociaux pour chaque personne.
Contrôles et navigation du carrousel
Réglez le carrousel pour qu'il se comporte comme vous le souhaitez Allumez Autoplay et réglez sa vitesse, choisissez combien de diapositives défilent à la fois, et allumez Loop pour un carrousel sans fin Ensuite, décidez comment les gens se déplacent à travers : flèches, points, ou les deux, assis à l'intérieur ou à l'extérieur du curseur Vous pouvez également cacher les flèches sur mobile, ce qui vaut la peine d'être fait puisqu'ils ont tendance à encombrer un écran de téléphone de toute façon.
- Lecture automatique et boucle : définissez la vitesse de lecture automatique, la vitesse d'animation, la boucle et les diapositives sur le défilement.
- Navigation: flèches, points ou les deux, avec positionnement personnalisé.
- Mobile : masquez les flèches de la navigation sur les téléphones pour garder la vue ouverte.
Stylez chaque élément du curseur
Chaque calque se stylise tout seul Définissez d'abord l'aspect général, l'arrière-plan du curseur et l'alignement du contenu, puis entrez dans les détails : donnez au nom, à la désignation et à la description leur propre couleur, type et espacement La carte membre a des arrière-plans, des bordures et une ombre de boîte séparés pour ses états Normal, Survol et Actif, de sorte que la carte réagit réellement lorsque les gens se déplacent dans le carrousel.
- Style du texte : séparez le type, la couleur et l’espacement pour le nom, le rôle et la biographie.
- États de la carte : style différent pour la carte lorsqu'elle est normale, en vol stationnaire ou active.
- Style de flèche : couleur, arrière-plan, taille, bordure et rembourrage pour les flèches de la navigation, normales et en vol stationnaire.
Profils sociaux et effets de survol
Ajoutez l'URL Facebook, Twitter, LinkedIn ou Instagram d'un membre et les icônes apparaissent sur sa carte sous la forme d'un ensemble stylisé. Certains préréglages, comme Social Left on Hover ou Content on Hover, retiennent la biographie ou les icônes jusqu'à ce que quelqu'un survole la carte, puis les révèlent. Vous pouvez colorier les icônes et leurs arrière-plans séparément pour les états normal et planeur, de sorte que la révélation ressemble à une partie du design au lieu d'une réflexion après coup.
- Intégration des médias sociaux : Ajoutez jusqu'à quatre URL de profil social par membre de l'équipe ; les icônes s'affichent automatiquement.
- Style d'icône : personnalisez la couleur et l'arrière-plan de l'icône sociale pour les états normal et supérieur.
- Préréglages interactifs : utilisez des préréglages avec des animations de survol intégrées pour révéler élégamment les biographies ou les liens sociaux.
Comment ajouter un Team Slider dans Elementor ?
Un curseur d'équipe de travail prend quelques minutes Pas de codes courts, pas de plugin de curseur séparé.
- Installez et activez Master Addons, puis modifiez une page avec Elementor.
- Recherchez dans le panneau du widget Slider d'équipe et faites-le glisser sur la page.
- Choisissez un préréglage de style pour définir le look de base.
- Dans le répéteur Contenu, cliquez sur + Ajouter un élément pour chaque membre et remplissez la photo, le nom, la désignation, la description et les liens sociaux.
- Ouvrez Paramètres du carrousel pour la lecture automatique, la boucle, les diapositives à faire défiler et la navigation.
- Stylez le texte, les cartes et les flèches pour qu'ils correspondent à votre marque, puis publiez.
Une chose à vérifier avant de l'appeler terminée : téléchargez des photos carrées et coupées uniformément. Les tailles d'image incompatibles sont la raison habituelle pour laquelle un curseur d'équipe regarde hors de la ligne, puisqu'un grand tir à la tête jette toute la rangée hors de la ligne. Chaque paramètre est couvert dans le Documentation du carrousel des membres de l'équipe.
Pas seulement pour les équipes : clients et témoignages
Il est marqué pour les équipes, mais sous le capot c'est un carrousel de profil, donc il se double d'un curseur de témoignage ou d'un carrousel client Déposez un logo client ou une photo client dans le champ image, la personne ou l'entreprise dans le nom, son rôle dans la désignation, et la citation dans la description Les mêmes préréglages et contrôles sont reportés.
- Page de l'équipe : photos, rôles, biographies et liens sociaux pour votre personnel.
- Curseur de témoignage : photo du client, nom, entreprise et son devis.
- Carrousel client : logos avec une courte ligne sur chaque projet.
- Composition du conférencier ou de l'auteur : des photos avec une biographie et un lien.
Si vous voulez juste un carrousel à image simple, le Carrousel d'images d'élémentateurs est le choix le plus simple.
Questions fréquemment posées pour l'élément Team Slider
Combien de membres de l'équipe puis-je ajouter au curseur ?
Autant que vous en avez besoin Continuez à cliquer + Ajouter un élément dans la section Contenu pour ajouter des profils, et le carrousel prend n'importe quel numéro Une très grande équipe peut glisser sur le chargement initial de la page, cependant, compressez donc les photos des membres et activez le chargement paresseux une fois que vous êtes dans les dizaines.
Le curseur de l'équipe Elementor est-il réactif sur mobile et tablette ?
Oui. Le curseur, les images, le texte et la navigation s'adaptent tous, et les diapositives par vue et l'espace entre les éléments s'ajustent sur des écrans plus petits Pour un contrôle plus strict, utilisez le mode réactif d'Elementor pour définir différentes tailles de police ou dimensions d'image sur tablette et mobile.
Puis-je l'utiliser pour des témoignages ou des clients au lieu d'une équipe ?
Oui. C'est un carrousel à profil flexible Mettez un logo client ou une photo client dans l'image, le nom dans le titre, l'entreprise ou le rôle dans la désignation, et la citation dans la description Cela vous donne un curseur de témoignage ou un carrousel client sans ajouter un autre widget.
Comment modifier la vitesse de lecture automatique ?
Dans Paramètres du carrousel, recherchez la vitesse de lecture automatique. La valeur est en millisecondes, donc 5000 est cinq secondes. Baissez-le pour des glissements plus rapides (3000 pendant trois secondes) ou augmentez-le pour les ralentir (7000 pendant sept secondes).
Widgets et extensions d'éléments tendance
Construisez des sites Web sophistiqués en moins de temps.
Glassmorphisme
Extras de conteneurs
Modèles
Duplicateur de messages/pages
