Les visiteurs de votre site Web veulent savoir qui est derrière la marque Un bien conçu membre de l'équipe Elementor section met des visages à votre entreprise, renforce la confiance et fait que votre site se sent personnel plutôt qu'entreprise Le problème ? Elementor n'expédie pas avec un widget dédié membre de l'équipe sorti de la boîte.
C'est là que Modules complémentaires principaux pour Elementor entre. Il vous donne deux widgets spécialement conçus pour cela : le Membre de l'équipe MA widget (pour les mises en page de grille) et le Carrousel des membres de l'équipe MA (pour les sections d'équipe coulissantes).Les deux sont gratuits et les deux sont livrés avec 11 variantes de conception uniques que vous pouvez appliquer en un seul clic.
Dans ce guide, vous apprendrez exactement comment créez une section membres de l'équipe dans Elementor en utilisant les deux méthodes, personnalisez le style et tirez le meilleur parti de chaque option de conception disponible.
Pourquoi chaque site Web a besoin d'une section membre de l'équipe
Les gens achètent aux gens Une étude réalisée par le Baromètre de confiance d'Edelman a révélé que les consommateurs sont beaucoup plus susceptibles de faire confiance à une entreprise lorsqu'ils peuvent voir de vraies personnes derrière elle Votre page “About ou “Team” est souvent l'une des pages les plus visitées de tout votre site.
Voici quel bien section membres de l'équipe dans Elementor fait pour votre site Web :
- Construit la crédibilité Les visiteurs peuvent voir avec qui ils travaillent avant de tendre la main
- Crée des liens personnels les photos et les biographies courtes rendent votre marque accessible
- Augmente les conversions les signaux comme les photos d'équipe réduisent les hésitations lors de l'achat
- Améliore l'image de marque de l'employeur Le fait de présenter votre équipe attire de meilleurs candidats
- Réduit les taux de rebond Les sections visuelles de Engaging maintiennent les visiteurs plus longtemps sur la page
Que vous dirigiez une petite agence, une entreprise SaaS ou une entreprise locale, l'ajout d'une section équipe à votre site WordPress prend 10 minutes et a un impact mesurable.
Ce qu'il faut inclure dans la section des membres de votre équipe
Avant de faire glisser un widget sur la page, planifiez les informations que chaque carte d'équipe doit afficher. Voici une ventilation rapide de ce qu'il faut inclure et de ce qu'il faut ignorer :
| Élément | Priorité | Pourquoi c'est important |
|---|---|---|
| Photo | Essentiel | Les gens traitent les visages plus rapidement que le texte. Utilisez des photos cohérentes et professionnelles. |
| Nom | Essentiel | Devrait apparaître directement à côté ou en dessous de la photo afin que la connexion soit instantanée. |
| Désignation / Titre du poste | Essentiel | Indique aux visiteurs quel rôle joue cette personne dans l'équipe. |
| Brève description | Recommandé | Une bio de 1 à 2 phrases Gardez-la humaine et axée sur la personnalité. |
| Liens vers les réseaux sociaux | Recommandé | Permet aux visiteurs de se connecter sur LinkedIn, Twitter ou d'autres canaux. |
| Email ou Téléphone | Facultatif | Ajoutez seulement si vous voulez un contact direct (commun pour les équipes à forte densité de ventes). |
Conseil professionnel : Gardez les photos de tête cohérentes dans toute l'équipe. La même couleur d'arrière-plan, le recadrage similaire et les dimensions d'image correspondantes (300 x 300 px ou 400 x 400 px fonctionnent bien) donnent à l'ensemble de la section un aspect raffiné.
Ce dont vous aurez besoin avant de commencer
Pour suivre ce tutoriel, assurez-vous d'avoir :
- WordPress installé et en cours d'exécution (toute version récente)
- Élémenteur (gratuit ou Pro) cela fonctionne avec les deux
- Modules complémentaires principaux pour Elementor (version gratuite) 100 télécharger depuis WordPress.org
- Photos des membres de l'équipe prêtes à être téléchargées (tours de tête, rapport carré recommandé)
Une fois Master Addons installé et activé, vous trouverez le Membre de l'équipe MA et Carrousel des membres de l'équipe MA widgets à l'intérieur de l'éditeur Elementor sous l'onglet « MASTER“ ADDONS” ».
Comment créer une section de grille de membre de l'équipe d'éléments
La disposition de la grille est parfaite lorsque vous souhaitez afficher votre équipe dans un format propre et structuré avec plusieurs colonnes Voici comment la mettre en place étape par étape :
Étape 1 : Insérez une nouvelle section
Ouvrez n'importe quelle page de l'éditeur Elementor Cliquez sur l'icône “+” pour ajouter une nouvelle section Choisissez votre structure de colonne préférée Pour une section d'équipe, une mise en page à 3 colonnes ou 4 colonnes fonctionne mieux.
Étape 2 : Ajoutez une section intérieure
Si vous avez besoin de plus de contrôle sur l'espacement et la disposition, faites glisser un Section intérieure widget à l'intérieur de votre section principale Cela vous donne des colonnes imbriquées où chaque carte de membre de l'équipe se trouve indépendamment.
Créez autant de colonnes que nécessaire pour la taille de votre équipe Trois colonnes par ligne est le choix le plus courant pour les écrans de bureau.
Étape 3 : Faites glisser le widget du membre de l'équipe MA
Dans le panneau Élémenteur à gauche, faites défiler vers le bas MAÎTRE ADDONS onglet (ou recherchez simplement “MA Team Member” dans la barre de recherche).Drag the Membre de l'équipe MA widget dans une de vos colonnes.
Vous verrez immédiatement apparaître une carte de membre de l'équipe par défaut avec une image d'espace réservé, un nom, une désignation et des icônes sociales.
Étape 4 : Répétez pour chaque membre de l'équipe
Dupliquer le widget ou faire glisser un nouveau Membre de l'équipe MA widget dans chaque colonne restante Chaque widget représente un membre de l'équipe, vous avez donc le contrôle total sur les cartes individuelles.
Conseil professionnel : Cliquez avec le bouton droit sur le widget et sélectionnez“ Duplicate” pour le copier avec tout votre style intact. Ensuite, il suffit d'échanger la photo et le texte pour chaque nouveau membre de l'équipe.
Personnalisation du contenu du widget des membres de l'équipe Elementor
Cliquez sur n'importe lequel Membre de l'équipe MA widget pour ouvrir ses paramètres Le Onglet Contenu c'est là que vous ajoutez toutes les données personnelles de chaque membre de l'équipe.
Détails du membre de l'équipe
L'onglet Contenu dans le widget membre de l'équipe Elementor vous donne des champs pour :
- Image 'Upload a headshot' ou team photo' Vous pouvez également définir la taille de l'image et choisir un rapport hauteur/largeur personnalisé.
- Nom « Nom complet du membre de l'équipe » Cela se traduit par une balise de titre, alors choisissez une balise HTML appropriée (H3 ou H4 est typique des cartes d'équipe).
- Désignation (en anglais) Titre, rôle, ou poste (par exemple,“Lead Designer” ou “Co-Founder & CEO”).
- Description 1-2 phrases pour un look le plus propre.
Profils des médias sociaux
Sous les principaux détails, vous trouverez la section médias sociaux Ajoutez des liens vers les profils de chaque membre de l'équipe Le widget prend en charge toutes les principales plateformes, notamment
- Twitter /X
- Lié
- GitHub
- URL personnalisées avec icônes personnalisées
Les liens sociaux apparaissent sous forme de petites icônes sous les informations du membre de l'équipe Ils s'ouvrent par défaut dans un nouvel onglet, de sorte que les visiteurs ne quitteront pas votre page.
Onglet Style : Variations de conception et préréglages
C'est là que le Membre de l'équipe MA widget se démarque vraiment des solutions de contournement Elementor de base Au lieu de construire des conceptions de cartes d'équipe à partir de zéro, vous obtenez 11 variations de conception uniques et 5 préréglages de style au choix.
Variations de conception
Cliquez sur le Onglet Style(en), puis ouvrez le Styles généraux panneau. Vous trouverez une variante de conception de la base de données intitulée « Design Variation ».” Choisissez l'une des 11 options, et le widget restructure instantanément la disposition de la carte Certaines variantes empilent l'image au-dessus du texte D'autres utilisent des mises en page côte à côte Certains ajoutent des effets de superposition sur le vol stationnaire.
La meilleure partie : basculer entre les variations n'efface pas votre contenu Votre nom, photo, bio, et liens sociaux restent tous intacts Vous pouvez essayer chaque variation et vous installer sur celle qui correspond à la conception de votre site.
Préréglages de 5 styles
Au sein du panneau Styles généraux, vous trouverez également Préréglages de 5 styles. Ce sont des combinaisons de couleurs et de mises en page préconfigurées qui vous donnent un look poli en un seul clic.
Contrôles de style manuels
Pour un contrôle créatif complet, l'onglet Style vous permet également de personnaliser :
- Couleur d'arrière-plan [TRADUCTION] Ensemble de couleur unie, dégradé, ou fond transparent pour chaque carte
- Alignement du contenu 'gauche, centre, ou droite aligner tout le texte et les icônes
- Typographie Contrôle complet de la famille de polices, de la taille, du poids, de la hauteur des lignes et de l'espacement des lettres pour le nom, la désignation et la description séparément
- Texte Couleurs Différentes couleurs pour le nom, la désignation et la description du texte
- Couleurs d'icônes sociales Couleurs d'icônes personnalisées pour les états normaux et de vol stationnaire
- Espacement et rembourrage 'fine-tune l'espace entre les éléments à l'intérieur de la carte'
- Rayon frontalier et frontalier 2000 1000 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 1
- Ombre de boîte ombres subtiles pour la profondeur
Pour une procédure pas à pas complète de chaque option de style, cochez le Documentation des membres de l'équipe MA.
Comment créer un carrousel de membres d'équipe dans Elementor
Avoir une équipe plus grande ? le Carrousel des membres de l'équipe MA widget vous permet d'ajouter un nombre illimité de membres de l'équipe dans une seule section coulissante C'est un meilleur ajustement lorsque vous avez plus de 6 membres de l'équipe et que vous ne voulez pas remplir une page entière avec une grille.
Voici comment le carrousel membre de l'équipe à Elementor travaux:
Étape 1 : Faites glisser le widget du carrousel des membres de l'équipe MA
Contrairement à la méthode de grille, vous le faites pas besoin d'une section intérieure ou de plusieurs colonnes Ajoutez simplement une nouvelle section avec une seule colonne, puis recherchez “MA Team Members Carousel” et faites-la glisser.
Étape 2 : Ajoutez les membres de votre équipe
À l'intérieur du widget, vous verrez un champ répéteur Chaque élément du répéteur représente un membre de l'équipe Cliquez sur “Ajouter un élément” pour créer de nouvelles cartes Pour chaque carte, remplissez :
- Photo
- Nom
- Désignation
- Description
- Liens vers les réseaux sociaux
Vous pouvez ajouter autant de membres de l'équipe que vous le souhaitez Il n'y a pas de limite Le carrousel gère 5 membres ou 50 membres avec la même facilité.
Étape 3 : Définissez la balise de titre
Définissez la balise HTML heading pour les noms des membres de votre équipe (H2, H3, H4, etc).Pour la plupart des pages, H3 ou H4 est le bon choix puisque l'en-tête de section ci-dessus est généralement un H2.
Paramètres du carrousel : navigation, colonnes et lecture automatique
Le widget carrousel est livré avec un panneau de paramètres dédié pour contrôler le comportement du curseur Voici ce que vous pouvez configurer :
Colonnes et éléments à faire défiler
Définissez le nombre de membres de l'équipe qui apparaissent à l'écran à la fois Vous pouvez afficher 2, 3, 4 ou plus de colonnes en fonction de la largeur de votre mise en page Le paramètre “Items to Scroll” contrôle le nombre de cartes qui bougent lorsqu'un visiteur clique sur la flèche de navigation.
| Taille de l'écran | Colonnes Recommandées | Articles à faire défiler |
|---|---|---|
| Bureau (1200px+) | 3-4 colonnes | 1-2 |
| Comprimé (768px-1199px) | 2-3 colonnes | 1 |
| Mobile (inférieur à 768px) | 1 colonne | 1 |
Style de navigation
Vous obtenez deux types de navigation :
- Flèches « Boutons fléchés gauche et droit sur les côtés du carrousel ». Idéal pour les ordinateurs de bureau où les interactions en vol stationnaire sont courantes.
- Points [TRADUCTION] ?Indicateurs de points sous le carrousel qui montrent les diapositives totales et la position actuelle Fonctionne bien à la fois sur le bureau et sur le mobile.
Vous pouvez en activer un, les deux, ou aucun des deux Si vous activez la lecture automatique, certains utilisateurs pourraient même ne pas avoir besoin de navigation manuelle.
Lecture automatique
Activez la lecture automatique et définissez une durée en millisecondes Une valeur de 3000-5000 ms (3-5 secondes) donne aux visiteurs suffisamment de temps pour lire chaque carte avant que le curseur ne bouge Vous pouvez également activer la pause sur le vol stationnaire afin que le curseur s'arrête lorsque quelqu'un survole une carte.
Options de style carrousel
Tout comme le widget de grille, le carrousel est livré avec 5 préréglages de style et contrôle manuel complet sur :
- Rembourrage d'article (espace entre chaque carte d'équipe)
- Typographie du nom, de la désignation et de la description
- Couleurs pour chaque élément de texte
- Paramètres d'arrière-plan et de bordure par carte
- Navigation flèche/points style et couleurs
Pour la référence complète des paramètres, voir le Documentation du carrousel des membres de l'équipe.
Conseils pour une meilleure section d'équipe
Après avoir construit des centaines de sections d'équipe, voici les petits détails qui séparent une bonne page d'équipe d'une grande :
- Utilisez de vraies photos, pas des images de stock. Les visiteurs peuvent faire la différence Les photos authentiques de tête créent plus de confiance que les photos polies ne le feront jamais.
- Gardez les descriptions courtes et cohérentes. Si une personne a une bio à 3 phrases et qu'une autre a un paragraphe complet, cela crée un déséquilibre visuel Visez la même longueur sur toutes les cartes.
- Faites correspondre les dimensions de l'image exactement. Téléchargez tous les headshots à la même résolution (par exemple, 400x400 px).Les tailles incompatibles brisent l'alignement de la grille.
- N'incluez que les profils sociaux actifs. Un lien LinkedIn mort est pire qu'aucun lien du tout Restez fidèle aux plateformes que votre équipe utilise réellement.
- Test sur mobile. Les sections de carrousel ont particulièrement besoin de tests mobiles Assurez-vous que les cartes sont lisibles et que les points de navigation sont faciles à appuyer.
- Utilisez le carrousel pour plus de 6 membres. Si vous avez 3-4 membres d'équipe, une grille semble plus propre Sauvegarder le carrousel pour les équipes plus grandes où le défilement devient nécessaire.
membre de l'équipe MA contre membres de l'équipe MA Carrousel : lequel devriez-vous utiliser ?
| Caractéristique | Membre de l'équipe MA (Grid) | Carrousel des membres de l'équipe MA |
|---|---|---|
| Meilleur pour | Petites équipes (2-6 membres) | Des équipes plus grandes (6+ membres) |
| Disposition | Colonnes statiques (vous contrôlez la grille) | Carrousel coulissant avec navigation automatique/manuelle |
| Configuration | Un widget par membre de l'équipe dans les sections intérieures | Widget unique avec champ répéteur |
| Variations de conception | 11 variantes | 5 préréglages de style |
| Navigation | Aucun nécessaire (tous visibles) | Flèches, points, lecture automatique |
| Espace page | Prend plus d'espace vertical | Compact, économise de l'espace |
| Contrôle individuel des cartes | Plein (chaque widget est indépendant) | Style unifié sur toutes les cartes |
Pour la plupart des sites Web de petites entreprises, l'approche de grille avec 3-4 membres de l'équipe est le point idéal Si votre équipe dépasse 6 personnes, passez au carrousel pour garder la page propre.
Vous voulez explorer la liste complète des widgets disponibles ? consultez le bibliothèque complète de widgets Master Addons avec plus de 80 widgets et extensions.
Foire aux questions
Elementor a-t-il un widget intégré pour membre de l'équipe ?
No. Elementor (gratuit ou Pro) n'inclut pas de widget dédié aux membres de l'équipe Vous avez besoin d'un addon tiers comme Additions maîtres pour obtenir un spécialement construit widget membre de l'équipe Elementor avec des préréglages de conception, des liens sociaux et des options de carrousel.
Le widget MA Team Member est-il gratuit ?
Oui. Les widgets du carrousel des membres de l'équipe MA et des membres de l'équipe MA sont disponibles dans la version gratuite de Master Addons for Elementor. Vous pouvez téléchargez-le depuis WordPress.org sans frais Certaines variantes de conception avancées peuvent nécessiter la version Pro.
Combien de membres de l'équipe puis-je ajouter au carrousel ?
Il n'y a pas de limite Le carrousel des membres de l'équipe MA utilise un champ de répéteur, vous pouvez donc ajouter autant de membres de l'équipe que votre page en a besoin Le widget gère 5 ou 50 cartes sans problème de performances Définissez simplement les colonnes visibles et laissez le curseur gérer le reste.
Puis-je utiliser différents modèles pour différents membres de l'équipe ?
Avec la disposition de la grille (widget MA Team Member), oui Puisque chaque membre de l'équipe est un widget séparé, vous pouvez appliquer une variante de conception différente à chaque carte Dans le carrousel, toutes les cartes partagent le même préréglage de conception pour la cohérence visuelle.
Quelle taille d'image dois-je utiliser pour les photos des membres de l'équipe ?
Les images carrées entre 300x300 px et 500x500 px fonctionnent mieux Gardez toutes les photos dans les mêmes dimensions pour un alignement cohérent Le format JPEG ou WebP à 80 % de qualité vous offre une bonne qualité visuelle sans fichiers de grande taille qui ralentissent votre page.
Lecture Connexe
Envelopper
Créer un section membres de l'équipe dans Elementor ne nécessite pas de code personnalisé ou de modules complémentaires coûteux pour les créateurs de pages Avec les widgets à deux équipes de Master Addons, vous pouvez passer d'une section vierge à une page d'équipe entièrement stylisée en moins de 10 minutes.
Pour les petites équipes, utilisez le Membre de l'équipe MA widget dans une disposition de grille. Pour les équipes plus grandes, passez au Carrousel des membres de l'équipe MA pour un curseur peu encombrant Les deux options vous offrent des préréglages de conception, une intégration sur les réseaux sociaux ainsi qu'une typographie et des contrôles de couleurs complets.
Commencez avec Master Addons et construisez une section d’équipe en laquelle vos visiteurs auront réellement confiance.
