La plupart des pages, des sites d'agences et des entreprises de services ont besoin d'un endroit qui donne un visage aux personnes derrière le travail. Le Widget Membre de l'équipe dans Modules complémentaires principaux pour Elementor construit cette section sans code personnalisé Chaque carte contient une photo, un nom, un rôle, une courte biographie et une rangée de liens sociaux, et vous déposez autant de membres que nécessaire.
Chaque membre de l'équipe est son propre widget Donc vous configurez une carte, la stylisez, puis la dupliquez sur des colonnes pour construire la grille complète Il n'y a pas de plafond sur le nombre de membres que vous montrez Ce guide parcourt chaque paramètre, des variations de conception (6 libres, 5 de plus avec Pro) jusqu'à l'onglet Style.
Ce que fait le widget Team Member #
Le widget rend un membre de l'équipe sous forme de carte : photo en haut, puis le nom, la désignation et une brève description, avec une rangée d'icônes sociales en dessous. UN Variations de conception dropdown modifie toute la disposition de la carte en un clic, d'un bloc simple aux photos circulaires et effets de survol Six variantes sont gratuites et cinq nécessitent Master Addons Pro.
Il a trois onglets. Contenu contient la photo, le texte, l'alignement et les liens sociaux. Style contrôle les couleurs, la typographie, l'espacement, les bordures et les ombres pour chaque partie de la carte. Avancé transporte les options Elementor habituelles telles que la marge, le remplissage et la visibilité réactive.
Avant de commencer #
- WordPress avec Élémenteur installé et actif.
- Modules complémentaires principaux pour Elementor installé et actif. Nouveau au plugin ? voir le guide d'installation.
- Photos des membres de votre équipe, ainsi que leurs noms, rôles et URL de profil social.
Comment ajouter le widget Membre de l'équipe #
Dans l'éditeur Elementor, ouvrez le Éléments panneau et recherche pour Membre de l'équipe(en anglais), ou faites défiler vers la section Addons principaux (les widgets portent un badge MA violet).Drag it on your page, Il se charge avec une carte d'espace réservé, donc vous modifiez à partir d'un exemple fonctionnel au lieu d'un exemple vierge.
Configurez le contenu de la carte #
Avec le widget sélectionné, ouvrez le Contenu onglet. Le Contenu section tient tout sur la carte :
- Variations de conception : le préréglage de la disposition des cartes (couvert dans la section suivante).
- Image: la photo du membre, tirée de la Médiathèque.
- Résolution de l'image : quelle taille d'image enregistrée charger, Plein par défaut.
- Nom, désignation, description : le nom du membre, son rôle et une courte biographie. Chaque champ a un Écrire avec IA option si vous souhaitez un brouillon rapide.
- Alignement du contenu : alignez le texte à gauche, au centre ou à droite.
Choisir la photo #
Cliquez sur la boîte d'image et sur WordPress Médiathèque s'ouvre. Choisissez une photo existante ou téléchargez-en une nouvelle, puis appuyez sur Sélectionner. Une chose qui vaut la peine d'être faite dès le départ : utilisez des photos de même taille. Les dimensions correspondantes conservent chaque carte même une fois que vous construisez la grille, et les images incompatibles ont tendance à déplacer le texte vers le bas sur une ou deux cartes.
Choisissez une variante de conception #
Le Variations de conception le dropdown est l'endroit où le widget Team Member gagne sa garde Un clic échange toute la disposition de la carte sans toucher à votre contenu La liste comprend (les variantes Pro sont marquées) :
- Basic One to Basic Five (gratuit) : nettoyez les dispositions des blocs avec la photo en haut et les détails ci-dessous.
- Dégradé de cercle et non de gradient de cercle (Pro) : une photo ronde, avec une forme colorée derrière ou sur un fond transparent.
- Gauche sociale sur Hover et droite sociale sur Hover (Pro) : cachez les icônes sociales jusqu'à ce que quelqu'un survole la carte, puis glissez-les.
- Arrondi (gratuit) : une carte arquée avec une photo circulaire et des boutons sociaux arrondis.
- Contenu sur Hover (Pro) : gardez la photo propre et révélez les détails en vol stationnaire.
Voici le Arrondi variation appliquée, avec le cadre voûté, la photo circulaire, et les icônes sociales en forme de pilule :
Ajouter des liens de profil social #
Ouvrir le Profils Sociaux sectionnez et allumez Afficher les profils sociaux?. Chaque lien est un élément de la liste, alors utilisez Ajouter un élément pour ajouter un profil, choisissez son icône et collez l'URL. L'icône de copie duplique un élément et le X le supprime.
Ajoutez uniquement les profils qu'un membre utilise réellement et supprimez le reste Un élément sans URL affiche toujours son icône La ligne se trouve au bas de la carte par défaut et suit la variante de conception que vous avez choisie.
Ajouter plusieurs membres de l'équipe #
Chaque widget Membre de l'équipe est une carte, vous construisez donc une équipe complète en la dupliquant Configurez la première carte comme vous le souhaitez, puis cliquez avec le bouton droit de la souris et choisissez Dupliquer (ou appuyez sur Ctrl/Cmd + D).Déposer les copies dans leurs propres colonnes et échanger sur la photo et les détails de chacun.
Puisque vous dupliquez un widget, il n'y a pas de limite Ajoutez trois membres, une douzaine ou un département entier Une section Élémenteur à trois colonnes vous donne une rangée de cartes propre, et vous ajoutez plus de lignes à mesure que l'équipe grandit Chaque copie conserve la variation de conception et le style de l'original, de sorte que la grille reste cohérente sans travail supplémentaire.
Style la carte #
Le Style tab divise la carte en parties que vous pouvez styliser vous-même : Styles généraux, Pouce, Contenu, Nom, Désignation, Description, Social, et Modèles (de l'extension gratuite Patterns).
- Styles généraux : la couleur d'arrière-plan de la carte, le rayon de bordure de l'article et l'ombre de la boîte.
- Pouce: la bordure, le rayon, le rembourrage et la marge de la photo.
- Contenu: arrière-plan (couleur ou dégradé), bordure, rayon, remplissage et marge pour la zone de texte.
- Nom, désignation, description : couleur, typographie, remplissage et marge pour chaque élément de texte.
- Social: la taille, la couleur et l'espacement des icônes sociales.
Cas d'utilisation courants #
- À propos des pages présentation de toute l'équipe avec des photos et des rôles.
- Sites d'agences et de studios montrer des créatifs avec leurs liens sociaux.
- Entreprises de services mettre un visage sur les gens qui font le travail.
- Groupes de conférenciers ou d'instructeurs pour événements, webinaires et cours.
- Sections de direction ou fondatrices mise en valeur des responsables.
Conseils pour travailler avec le widget Team Member #
- Stylez d'abord une carte, puis dupliquez. Les copies héritent du design et du style, vous ne l'avez donc configuré qu'une seule fois.
- Utiliser des photos de même taille. Les dimensions correspondantes maintiennent les cartes même sur la rangée.
- Gardez les biographies courtes. Une ligne ou deux se lit mieux sous une photo.
- Faites correspondre la variation à la page. Marques conviviales pour les costumes circulaires et arrondis ; les mises en page de base s'adaptent aux sites d'entreprise.
- Supprimez les éléments sociaux que vous n'utilisez pas. Un élément vide affiche toujours son icône.
Foire aux questions #
Qu'est-ce que le widget Team Member dans Master Addons ?
Il s'agit d'un widget Elementor qui montre un seul membre de l'équipe sous forme de carte avec une photo, un nom, un rôle, une courte biographie et des liens sociaux. Il comprend 6 variantes de conception gratuites (11 avec Master Addons Pro) et un onglet Style complet, vous construisez et stylisez donc une section d'équipe directement à partir du panneau Elementor sans code personnalisé.
Combien de membres de l'équipe puis-je ajouter ?
Il n'y a pas de limite Chaque widget Membre de l'équipe est une carte, donc vous ajoutez plus de membres en dupliquant le widget et en déposant des copies dans leurs propres colonnes Construisez une ligne à trois cartes ou une grande grille à plusieurs rangées ; la mise en page reste cohérente car les copies héritent du design de l'original.
Quelles variantes de conception le widget Team Member inclut-il ?
Onze préréglages. Gratuit : Basic One à Basic Five et Arrondi Pro : Circle Gradient, Circle No Gradient, Social Left on Hover, Social Right on Hover et Content on Hover Chacun change la disposition des cartes, comme des photos circulaires ou des icônes sociales qui apparaissent en vol stationnaire, sans changer votre contenu.
Puis-je ajouter des liens vers les réseaux sociaux à chaque membre de l'équipe ?
Oui. Activez Affichage des profils sociaux dans la section Profils sociaux, puis utilisez Ajouter un élément pour ajouter chaque profil avec son icône et son URL Ajoutez uniquement les liens qu'un membre utilise, puisqu'un élément sans URL affiche toujours son icône.
Quelle est la différence entre les widgets Team Member et Team Slider ?
Le widget Team Member affiche les membres sous forme de grille statique de cartes, un widget par personne Le widget Team Slider met les membres dans un carrousel coulissant avec un répéteur, des flèches et une lecture automatique Utilisez Team Member pour une grille fixe et Team Slider lorsque l'espace est restreint.
Envelopper #
Le widget Team Member transforme une liste de personnes en une section d'équipe soignée : ajoutez une photo, un nom, un rôle, une biographie et des liens sociaux, choisissez l'une des variantes de conception (6 gratuites, 11 avec Pro), puis stylisez la carte et dupliquez-la. sur vos colonnes. Voir le Page du widget Membre de l'équipe pour les démos de chaque variation Pour une version glissante, voir le Widget Team Slider1, associe-le au Widget de boîte d'informations pour les services, parcourez l'intégralité Widgets et extensions Master Addons&, et vérifiez le page de tarification pour ce que chaque plan comprend.
