Avec ElementsKit, vous pouvez présenter les membres de votre équipe à votre site Web avec un carrousel coulissant élégant. À l'aide du widget Elementor Team Carousel Slider, vous pouvez afficher les cartes des membres de l'équipe avec des photos, des noms, des désignations, des descriptions, lier des profils sociaux, etc.

Lisez cette documentation pour savoir comment utiliser le widget Elementor Team Carousel Slider d'ElementsKit.

Plugins requis : #

• Élémentor : Télécharger le plug-in.
• ElementsKit Lite : Télécharger le plug-in.
• ElementsKit Pro : Obtenez le plugin.

Étape 1 : Activer le widget de curseur du carrousel d'équipe #

Tout d’abord, vous devez activer le widget depuis le tableau de bord WordPress. Pour activer le widget Team Carousel Slider :

1. Aller vers ElementsKit > Widgets.
2. Trouvez le Curseur d'équipe de la liste et activer le widget.
3. Clique sur le SAUVEGARDER LES MODIFICATIONS.

Étape 2 : glissez et déposez le widget #

Après cela, faites glisser et déposez le widget ElementsKit Team Carousel Slider dans l'éditeur Elementor.

Étape 3 : Configurer le widget carrousel de l’équipe Elementor #

L'onglet Contenu vous permet de configurer le contenu des membres de l'équipe et les paramètres du curseur du carrousel d'équipe.

3.1 Contenu de l'équipe #

Le widget Slider d'équipe présente les fonctionnalités suivantes :

1. Style: Le widget est livré avec 12 styles différents, notamment par défaut, superposition, survol sur les réseaux sociaux, superposition avec détails, etc. 

Note: Différents styles sont livrés avec des options et des paramètres individuels. Les options sont abordées dans la dernière partie de cette documentation.

2. Activer la fenêtre contextuelle : Les détails du membre de l'équipe apparaîtront dans une fenêtre contextuelle lorsque vous cliquerez sur son nom.
3. Afficher les profils sociaux : Pour lier le profil de réseau social aux détails du membre de l'équipe.
4. Description de l'affichage : Pour afficher une brève description du membre de l’équipe.
5. Bouton d'affichage : Pour ajouter un bouton pouvant créer un lien vers le profil ou le portfolio du membre.

Détails des membres de l'équipe #

Vous pouvez ajouter des membres de l'équipe au curseur en cliquant sur le AJOUTER UN ITEM et supprimez un membre existant avec le ✖ bouton. Vous pouvez également copier les détails du membre de l'équipe.

Sous le contenu membre :

1. Choisissez l'image du membre : Ajoutez la photo du membre de l'équipe.
2. Nom de membre: Entrez le nom du membre de l'équipe.
3. Poste de membre : Mentionner la désignation du membre de l'équipe.
4. À propos du membre : Ajoutez une brève description du membre de l’équipe.

Contenu du bouton :

1. Icône: Décidez si vous souhaitez afficher l’icône du bouton et choisissez une icône.
2. Position de l'icône : Définissez la position de l'icône avant ou après le texte.
3. Texte: Saisissez le texte d'un bouton.
4. URL du lien : Ajoutez une URL pour lier le bouton à une page.

Contenu contextuel :

Dans le contenu du popup, vous pouvez ajouter le Numéro de téléphone et E-mail du membre de l’équipe.

Sous le contenu social :

Vous pouvez associer jusqu'à 5 comptes de réseaux sociaux. Pour chaque profil social, vous pouvez ajouter un Profil URL, et utilisez des Icônes pour chaque média social.

3.2 Paramètres du curseur #

Les options suivantes sont disponibles sous les paramètres du curseur du widget Elementor Team Carousel :

1. Espacement: Ajustez l’espace entre chaque diapositive.
2. Diapositives à afficher : Définissez le nombre de diapositives à afficher dans une seule fenêtre.
3. Diapositives à faire défiler : Décidez du nombre de diapositives à faire défiler à la fois.
4. Lecture automatique: Activez la lecture automatique pour faire défiler les diapositives automatiquement.
5. Vitesse: Lorsque la lecture automatique est activée, définissez la vitesse de défilement en millisecondes (ms).
6. Pause au survol : La lecture automatique s'arrêtera lorsque l'utilisateur survolera le curseur.

7. Afficher la flèche : Pour activer la navigation par flèche pour le curseur.
8. Afficher la flèche au survol : Les flèches ne sont visibles qu'au survol.
9. Type de flèche : Choisissez le type de flèche parmi les options proposées : Flèche, Texte et Texte avec flèche.
10. Icône de flèche gauche : Vous pouvez choisir une icône pour la flèche gauche dans la bibliothèque d'icônes.
11. Icône de flèche droite : Vous pouvez choisir une icône pour la flèche gauche dans la bibliothèque d'icônes.
12. Afficher les points : Pour activer la navigation par points pour le curseur.

• Vitesse et Suspendre le survol les options n'apparaissent que lorsque la lecture automatique est activée.
• Afficher Arros en survol, Type de flèche, Icône de flèche gauche, et Icône de flèche droite les options n'apparaissent que lorsque "Afficher la flèche" est autorisé.

Étape 4 : Personnaliser les styles du widget de carrousel de l'équipe Elementor #

Vous pouvez personnaliser chaque aspect du curseur du carrousel d’équipe et créer un style qui correspond à votre marque.

4.1 Contenu #

Pour personnaliser la zone de contenu du curseur :

• Choisir la Type d'arrière-plan et Couleur de l'arrière plan pour l'état « Normal » et l'état « Survol ».
• Sélectionner un Animation de survol parmi les options proposées.
• Met le Alignement pour le contenu à gauche, à droite ou au centre.
• Ajuste le Rembourrage, Remplissage du contenu, et Rayon de frontière pour la zone de contenu.

4.2 Image #

Pour personnaliser les styles d'image dans le curseur du carrousel de l'équipe Elementor,

1. Met le Taille de l'image afficher.
2. Ajuste le Hauteur et largeur de l'image.
3. Définir un Boîte ombre pour l’image affichée.
4. Définissez une ombre de boîte pour l'image dans la fenêtre contextuelle.
5. Ajuster Rayon de frontière, Rembourrage, et Marge pour l’image du membre de l’équipe.
6. Changer la Type d'arrière-plan et Couleur de l'arrière plan.

4.3 Nom #

Vous pouvez modifier les styles des noms des membres de l'équipe.

1. Met le Typographie du nom.
2. Choisir Couleurs pour l'état « Normal » et « Survol ».
3. Ajuste le Marge supérieure et Marge inférieure pour le nom du membre.

4.4 Désignation #

Vous pouvez modifier les styles de désignation des membres de l'équipe.

1. Met le Typographie de la désignation.
2. Choisir Couleurs pour l'état « Normal » et « Survol ».
3. Ajuste le Marge inférieure.

4.5 Descriptif #

Vous pouvez personnaliser les styles des descriptions des membres de l'équipe.

1. Met le Typographie du descriptif.
2. Choisir Couleurs pour l'état « Normal » et « Survol ».
3. Ajuste le Marge autour de la description.

4.6 Bouton #

Pour personnaliser les styles des boutons,

1. Met le Typographie du texte du bouton.
2. Choisissez le bouton Couleur du texte.
3. Sélectionner Type d'arrière-plan et Couleur de l'arrière plan.
4. Choisir la Type de bordure pour le bouton.
5. Met le Rayon de bordure, rembourrage, et Marge pour le bouton.

Vous pouvez définir des couleurs de texte, des couleurs d'arrière-plan et des couleurs de bordure individuelles pour l'état « Normal » et l'état « Survol ».

4.7 Icône du bouton #

Si vous utilisez une icône de bouton, vous pouvez personnaliser ses styles,

1. Choisir la Couleur pour l'icône du bouton.
2. Sélectionner un Couleur de survol pour l'icône du bouton.
3. Ajuster l'icône Taille.
4. Ensemble Marge autour de l’icône du bouton.

4.8 Profil socials #

Vous pouvez personnaliser les icônes de profil social avec le widget carrousel de l'équipe Elementor,

1. Changer la Alignement des icônes sociales.
2. Vous pouvez sélectionner le Afficher disposition des icônes de profil social à partir des options proposées : Bloc en ligne et Bloc.
3. Ajuster l'ensemble Taille de l'icône.
4. Activer le Utiliser la hauteur et la largeur fonction pour ajuster la largeur, la hauteur et la hauteur de la ligne individuellement.
5. Vous pouvez choisir l'icône Couleur, Couleur de l'arrière plan, et Type de bordure.
6. Met le Rayon de frontière, Rembourrage, et Marge pour les icônes de profil social.

4.9 Contrôles modaux #

Lorsque vous activez Popup, cette option de contrôles modaux est disponible. Les contrôles modaux suivants sont disponibles avec le widget,

Recouvrir:

1. Choisissez la superposition Type d'arrière-plan.
2. En fonction du type d'arrière-plan, choisissez l'arrière-plan Couleur pour la superposition.

Modal:

1. Choisissez le modal Type d'arrière-plan.
2. En fonction du type d'arrière-plan, choisissez l'arrière-plan Couleur pour le modal.

Nom:

1. Choisissez une couleur pour le membre Nom.
2. Met le Typographie pour le texte du nom.
3. Ajuste le Marge inférieure pour le nom.

Désignation:

1. Choisissez une couleur pour les membres Désignation.
2. Met le Typographie pour le texte de désignation.
3. Ajuste le Marge inférieure pour la désignation.

Description:

1. Choisissez une couleur pour Description du membre de l’équipe.
2. Met le Typographie pour le texte de description.
3. Ajuste le Marge inférieure pour le descriptif.

Téléphone et e-mail :

1. Met le Typographie pour le texte du téléphone et de l'e-mail.
2. Choisissez un texte Couleur pour le téléphone et l'e-mail.
3. Ajouter un Couleur de survol pour le téléphone et l'e-mail.

4.10 Icône Fermer #

Pour le Popup, vous pouvez personnaliser l'icône Fermer.

1. Sélectionner un Icône Fermer de la bibliothèque d'icônes Elementor.
2. Met le Fermer l’alignement des icônes à droite ou à gauche.
3. Tu peux choisir Couleur de l'icône, Couleur d’arrière-plan de l’icône, et Type de bordure.
4. Définissez également le Rayon de frontière et Rembourrage pour l'icône de fermeture.

4.11 Flèches #

Si vous activez la navigation fléchée, vous pouvez personnaliser ses styles.

1. Ajuste le Taille des flèches sur le carrousel.
2. Vous pouvez définir le Position de la flèche. La position de la flèche gauche et la position de la flèche droite peuvent être ajustées individuellement.

3. Sélectionnez un Couleur de la flèche.
4. Choisissez une flèche Couleur de l'arrière plan.
5. Sélectionnez le Type de bordure pour les flèches.
6. Met le Rayon de frontière pour les flèches.
7. Ajuste le Rembourrage.

4.12 Points #

Si les points sont activés, vous pouvez personnaliser les styles de points.

1. Ajuste le L'espace entre les points.
2. Ajustez les points Espacement de haut en bas.
3. Vous pouvez changer le Opacité des points.
4. Met le Largeur des points.
5. Met le Hauteur des points.
6. Ajouter un Rayon de frontière pour les points.
7. Sélectionner un Type d'arrière-plan et la couleur de fond.

Actif:

Vous pouvez personnaliser le point actif séparément.

1. Choisir Type d'arrière-plan et Couleur pour le point actif.
2. Sélectionnez un point actif Couleur.
3. Ajuster Échelle (taille) des points actifs.
4. Ajuste le Largeur des points actifs.
5. Ajuste le Hauteur des points actifs.
6. Sélectionnez le Type de bordure.

Enfin, le carrousel de l'équipe est prêt à être affiché. Le widget Elementor Team Carousel Slider est livré avec ElementKits Pro. Obtenez le plugin pour concevoir des sites Web sophistiqués avec des fonctionnalités avancées telles que Elementor Team Carousel Slider et plus encore.