Le bloc Membre de l’équipe vous permet de présenter les membres de votre équipe sur n’importe quelle page SeedProd avec une mise en page de profil entièrement personnalisable. Affichez la photo, le nom, le titre du poste, la description et les liens des réseaux sociaux de chaque personne dans une carte soignée et professionnelle.
Ce bloc est idéal pour les pages À propos, les pages de destination et toute section où l’établissement de la confiance et de la crédibilité est important. Vous avez un contrôle total sur la forme de l’image, le style du séparateur, l’apparence des icônes sociales et le style typographique de chaque élément de texte — donnant à votre section d’équipe un aspect qui correspond à votre marque.
Ajouter le bloc Membre de l’équipe à vos pages
Suivez ces étapes pour ajouter un bloc Membre de l’équipe à votre page SeedProd :
Étape 1 : Ajouter le bloc
Sous Design > Blocs, faites glisser le bloc Membre de l’équipe dans la section souhaitée de votre page.
Étape 2 : Configurer les paramètres de contenu
Une fois ajouté, cliquez sur le bloc Membre de l’équipe pour ouvrir ses paramètres. Dans l’onglet Contenu, les paramètres sont organisés en quatre sections.
Général :
- Image : Téléchargez ou sélectionnez la photo du membre de l’équipe. Définissez la largeur de l’image (en px ou %) et définissez éventuellement une hauteur fixe. Entrez un texte alternatif pour décrire l’image pour l’accessibilité.
- Position de l’image : Choisissez où l’image apparaît par rapport au texte — Haut, Gauche ou Droite.
- Nom : Entrez le nom du membre de l’équipe (par défaut : « John Doe »). Choisissez la balise HTML utilisée pour le rendre (H1–H6, div, span ou p), définissez l’alignement du texte et ajustez la marge inférieure.
- Afficher le poste : Activez ou désactivez le titre du poste (Oui/Non). Lorsqu’il est activé, entrez le texte du poste, définissez son alignement et ajustez la marge inférieure.
- Afficher la description : Activez ou désactivez la biographie ou la description (Oui/Non). Lorsqu’il est activé, entrez le texte de la description, définissez son alignement et ajustez la marge inférieure.
Zone d’image :
- Forme : Choisissez la forme appliquée à la photo du membre de l’équipe — Par défaut, Arrondie, Cercle ou Personnalisée (qui active les contrôles de rayon de coin individuels).
- Marge inférieure de l’image : Définissez l’espacement sous l’image.
Séparateur :
- Séparateur : Activez ou désactivez une ligne décorative (Oui/Non).
- Position : Choisissez où la ligne de séparation apparaît — Sous le nom, Sous le poste ou Sous la description.
- Largeur : Définissez la largeur de la ligne de séparation.
- Style : Choisissez le style de ligne — Solide, Pointillé ou Tirets.
- Épaisseur : Définissez l’épaisseur de la ligne de séparation en pixels.
- Couleur : Choisissez la couleur de la ligne de séparation.
- Alignement du séparateur : Définissez l’alignement horizontal du séparateur — Gauche, Centre ou Droite.
- Marge inférieure du séparateur : Définissez l’espacement sous la ligne de séparation.
Icônes sociales :
- Icônes sociales : Activez ou désactivez les icônes des réseaux sociaux (Oui/Non).
- Éléments d'icône : Ajoutez, réorganisez et configurez des liens sociaux individuels. Pour chaque élément, choisissez une icône, saisissez le titre d'affichage et l'URL de destination. Utilisez Ajouter un nouvel élément pour ajouter des icônes supplémentaires, ou faites glisser les éléments pour les réorganiser.
- Largeur de l'icône : Définissez la taille des icônes sociales.
- Espacement de l'icône : Définissez l'espacement à l'intérieur de chaque bouton d'icône.
- Forme : Choisissez la forme des conteneurs d'icônes — Par défaut, Arrondie, Cercle ou Personnalisée.
- Alignement des icônes sociales : Définissez l'alignement horizontal de la rangée d'icônes sociales — Gauche, Centre ou Droite.
Étape 2a : Choisir un style de modèle
Dans l'onglet Modèles, vous pouvez appliquer un design prédéfini à votre bloc Membre de l'équipe. Trois modèles sont disponibles : Effet rayé, Séparateur et Arrière-plan. La sélection d'un modèle applique instantanément son style, que vous pouvez ensuite personnaliser davantage dans les onglets Contenu et Avancé.
Étape 3 : Personnaliser le design
Dans l'onglet Avancé, vous pouvez personnaliser l'apparence visuelle de votre bloc Membre de l'équipe.
Styles :
- Typographie du nom : Définissez la famille de polices, la taille, le poids, le style, la hauteur de ligne, l'espacement des lettres et la casse pour le nom du membre de l'équipe.
- Typographie de la désignation : Définissez les propriétés typographiques du texte du titre du poste.
- Typographie de la description : Définissez les propriétés typographiques du texte de la biographie ou de la description.
- Couleur du nom : Définissez la couleur du nom du membre de l'équipe.
- Couleur de la désignation : Définissez la couleur du titre du poste.
- Couleur de la description : Définissez la couleur du texte de la description.
- Ombre du texte : Appliquez une ombre au texte en utilisant des tailles prédéfinies (Aucune, Cheveux, et des préréglages plus grands).
Espacement :
- Marge : Définissez l'espacement extérieur autour du bloc sur les quatre côtés, avec des contrôles indépendants pour ordinateur, tablette et mobile.
- Rembourrage : Définissez l'espacement intérieur à l'intérieur du wrapper du bloc sur les quatre côtés, avec des contrôles par appareil.
Bordure :
- Style de bordure : Choisissez parmi Aucun, Pleine, Pointillée ou Tirets.
- Largeur de bordure : Définissez des largeurs individuelles pour les bordures supérieure, droite, inférieure et gauche.
- Couleur de bordure : Choisissez la couleur de la bordure.
- Rayon de bordure : Arrondissez les coins du bloc indépendamment pour chaque coin, ou utilisez le bouton de synchronisation pour appliquer un rayon uniforme.
Arrière-plan :
- Style d'arrière-plan : Choisissez une couleur unie, un dégradé (avec type, angle, position et deux arrêts de couleur) ou un arrière-plan d'image (avec des options de position, répétition, taille et attachement).
- Atténuation de l'arrière-plan : Ajoutez une superposition avec une opacité réglable par-dessus une image d'arrière-plan pour améliorer la lisibilité du texte.
Attributs :
- Classe personnalisée : Ajoutez une ou plusieurs classes CSS personnalisées au wrapper du bloc pour un style ciblé.
- ID CSS : SeedProd génère automatiquement un ID CSS unique pour ce bloc. Vous pouvez l'utiliser pour référencer le bloc dans du CSS ou JavaScript personnalisé.
- Attributs personnalisés : Ajoutez des attributs HTML personnalisés à l'élément wrapper du bloc. Entrez chaque attribut sur une nouvelle ligne en utilisant le format clé|valeur.
Visibilité de l'appareil :
- Masquer sur ordinateur : Basculez pour masquer le bloc lorsqu'il est affiché sur les écrans d'ordinateur.
- Masquer sur tablette : Basculez pour masquer le bloc lorsqu'il est affiché sur les écrans de tablette.
- Masquer sur mobile : Basculez pour masquer le bloc lorsqu'il est affiché sur les écrans mobiles.
Effets d'animation :
- Effet de défilement : Appliquez une animation déclenchée par le défilement au bloc, y compris les options de défilement vertical et horizontal avec des contrôles de direction, de vitesse et de décalage de la fenêtre d'affichage.
- Effet de souris : Appliquez un effet de parallaxe piloté par le mouvement de la souris au bloc.
Étape 4 : Enregistrez vos modifications
Une fois que vous avez terminé de configurer le bloc Membre de l'équipe et de personnaliser son apparence, assurez-vous de sauvegarder votre travail.
Vous avez ajouté avec succès un bloc Membre de l'équipe à votre page ! Une section d'équipe bien conçue renforce la crédibilité et aide les visiteurs à se connecter avec les personnes derrière votre marque. Expérimentez avec les formes d'image, les styles de séparateur et les options d'arrière-plan pour créer une vitrine d'équipe qui semble soignée et fidèle à la marque.