Comment créer une section pour les membres de l'équipe dans WordPress (sans utiliser de plugin)

Comment créer une section pour les membres de l'équipe dans WordPress

Une section réservée aux membres de l'équipe est un espace dédié dans un site web où vous pouvez présenter les personnes talentueuses qui composent votre équipe et votre organisation. C'est un endroit où vous pouvez mettre en valeur leur expertise, leurs réalisations et leurs réussites.

L'objectif premier d'un site web n'est pas seulement de capter l'attention, mais aussi de mettre les gens en contact. Honnêtement, la connexion humaine peut laisser une impression durable. C'est la raison pour laquelle la plupart des organisations établies maintiennent une section consacrée à l'équipe sur leur site web.

Si votre site web est sur WordPress, c'est merveilleux. Dans cet article de blog, nous allons vous montrer un tutoriel facile sur la façon de créer une section pour les membres de l'équipe dans WordPress sans utiliser de plugins. Restez avec nous jusqu'à la fin.

Créer de belles tables
Avec l'éditeur de blocs

Comment créer une section pour les membres de l'équipe dans WordPress

Il existe de nombreux constructeurs de pages et plugins de blocs personnalisés qui vous permettent de créer une section de membres de l'équipe sur votre site. Mais n'oubliez pas que l'éditeur de blocs Gutenberg propose plus de 95+ blocs par défaut, que vous pouvez également utiliser pour créer une section membre de l'équipe.

Une fois que vous savez les utiliser, vous n'aurez pas besoin d'utiliser des plugins supplémentaires dans de nombreux cas. Ce tutoriel sera expliqué en utilisant ces blocs par défaut. Suivez les étapes avec moi.

Étape 01 : Rédiger un nom pour la section de l'équipe à l'aide du bloc de paragraphes

Chaque section du site web doit avoir un nom/titre afin que les gens puissent la différencier. De la même manière, la section de votre équipe doit avoir un nom, comme par exemple

  • Notre équipe
  • Rencontrer l'équipe
  • Membres de l'équipe
  • L'équipe derrière
  • Rencontrez nos experts

Rédiger un titre au début en utilisant le bloc de paragraphe. Alignez le titre au centre et mettez-le en gras, et augmenter sa taille.

Rédigez le titre de votre section d'équipe en utilisant le bloc Paragraphe

Étape 02 : Regrouper le bloc

En regroupant le bloc, vous pouvez ajouter plusieurs blocs un par un dans la section de groupe spécifiée. Le plus grand avantage est que vous pouvez procéder à une personnalisation approfondie entre eux, ce qui n'est pas possible avec des blocs normaux non groupés.

Cliquez sur l'icône à trois points dans la barre d'outils. Rechercher et cliquer sur l'option Groupe sur la liste.

Grouper le bloc de paragraphes

Une fois le bloc regroupé, vous verrez l'icône Gutenberg plus (+) dans la section du groupe. Vous pouvez maintenant ajouter de nouveaux blocs à l'intérieur de celle-ci.

Option d'ajout de bloc Gutenberg dans la section groupe

Étape 03 : Ajouter une brève description de la section de l'équipe

L'ajout d'une brève description de la section consacrée à l'équipe aura des effets bénéfiques sur le référencement et aidera les utilisateurs à comprendre le contexte de la section.

Ajouter le bloc Paragraphe dans la section du groupe.

Ajouter une brève description de la section de l'équipe

Il suffit d'écrire ce que vous voulez décrire à propos de la section. Vous pouvez réduire la largeur du contenu du bloc en utilisant l'option de remplissage.

Vous pouvez personnaliser chaque bloc immédiatement après l'avoir ajouté. Mais nous le ferons une fois que la mise en page complète sera prête.

Ajouter une description de la section de l'équipe

Étape 04 : Ajouter des membres d'équipe

Vous devez maintenant créer une mise en page distincte dans cette section pour afficher les membres de votre équipe. Vous pouvez les présenter de différentes manières. Nous avons vu jusqu'à présent que la plupart des sites web présentent leurs sections d'équipe sous forme de lignes, de colonnes et de boîtes.

Nous présenterons donc également notre section d'équipe sous la forme d'une boîte à colonnes. Sélectionner l'ensemble du groupe par en cliquant sur l'icône du groupe dans la barre d'outils. Appuyez sur l'icône plus (+).

Trouver et ajouter le bloc Colonne.

Ajouter le bloc Colonne pour afficher les membres de l'équipe

Sélectionnez le nombre de colonnes en fonction du nombre de membres de l'équipe que vous souhaitez afficher. Comme nous allons afficher trois membres, nous sélectionnons trois colonnes.

Sélectionner le nombre de colonnes

Bien que nous ayons mentionné trois colonnes, vous serez peut-être surpris de constater qu'il n'y a qu'une seule colonne après l'ajout du bloc. Ne vous inquiétez pas ! Les colonnes apparaîtront lorsque vous passerez votre souris et cliquerez alternativement sur l'espace blanc à droite.

Voir la vidéo ci-dessous.

Vous pouvez ajouter de nouveaux blocs à l'intérieur du bloc parent. Venez à la première colonne. Ajouter le bloc Image à l'intérieur de celui-ci. Vous pouvez ensuite télécharger une image à partir de la médiathèque ou de votre disque local.

Ajouter le bloc Image dans la première colonne

Vous pouvez voir que nous avons déjà ajouté une image. Nous avons l'aligner sur le centre. Vous pouvez redimensionner l'image à l'aide des cercles du bord.

Une fois l'image terminée, appuyez sur la touche Entrée de votre clavier pour obtenir la nouvelle option d'ajout de blocs. Par défaut, c'est le bloc paragraphe qui apparaît.

Ajouter l'image et le nom du membre de l'équipe

Ajoutez le nom du membre de l'équipe, sa désignation et une brève introduction à son sujet. Nous les avons ajoutés en utilisant le bloc de paragraphe.

Indiquer le nom du membre de l'équipe, sa désignation et une introduction.

Nous allons maintenant lier les profils sociaux personnels des membres de l'équipe dans la même colonne par le biais de blocs sociaux.

Nous lierons ici quatre profils populaires. Créez donc quatre colonnes supplémentaires à l'intérieur de la colonne mère à l'aide de blocs de colonnes.

Ajouter le bloc Icônes sociales dans la colonne parentale sous le nom et l'introduction du membre de l'équipe.

Ajouter le bloc Icônes sociales

Le bloc d'icônes sociales intègre toutes les plateformes de médias sociaux les plus populaires. Une fois le bloc d'icônes sociales ajouté, vous pourrez choisir les blocs qui vous conviennent en cliquant sur le bouton icône plus (+). La vidéo jointe ci-dessous explique le processus.

Cliquez sur les icônes sociales un par un. Vous obtiendrez une boîte dans laquelle vous pourrez copier-coller les liens des profils sociaux respectifs. Complétez la section sociale de cette manière.

Ajouter des liens aux icônes de partage social

Sélectionner l'ensemble de la colonne parentale. Venez au Onglet Styles. Supprimez les espaces inutiles entre les blocs que vous avez ajoutés horizontalement à l'aide de la fonction Option d'espacement des blocs.

Supprimer les espaces inutiles entre les blocs

Ajouter une couleur de fond dans la colonne du membre de l'équipe. Pour une meilleure apparence, ajouter un rembourrage horizontal pour ajouter de l'espace autour de la colonne.

De même, complétez les deux autres colonnes de droite en ajoutant de nouveaux membres à l'équipe.

Vous pouvez voir que nous avons rempli les trois colonnes avec trois membres de l'équipe et leurs informations.

Les membres de l'équipe sont ajoutés à la section des membres de l'équipe

Étape 05 : Styliser la section de l'ensemble des membres de l'équipe

Sélectionner toute la section des membres de l'équipe en cliquant sur le bouton Icône de groupe dans la barre d'outils.

Sélectionner toute la section des membres de l'équipe

Ajouter une couleur de fond à la section de l'équipe qui vous semble la plus appropriée. Ensuite, vous pouvez changer la couleur du texte individuellementen sélectionnant les blocs de paragraphes respectifs un par un.

Suivant, ajouter du rembourrage à la fois verticalement et horizontalement pour créer un espace blanc autour de la section entière.

Ajouter une couleur d'arrière-plan à la section de l'équipe

Enfin, ajoutez un rayon à la section de l'équipe pour que le coin de la bordure ait une forme semi-ronde. Cela donnera un aspect différent à la section.

Étape 06 : Prévisualisation de la section Équipe sur le site web

Enfin, passez à la partie frontale de la page et voyez à quoi ressemble la section consacrée à l'équipe.

Prévisualisation de la section Équipe sur le frontend

Conclusion

Vous pouvez également créer et personnaliser la section des membres de l'équipe de différentes manières. Nous venons de présenter ici un processus de base dont vous pouvez vous inspirer pour créer et réaliser d'autres designs merveilleux.

Si vous rencontrez un problème dans ce tutoriel, n'hésitez pas à nous en faire part dans les commentaires. Enfin, avant de quitter notre site, prenez quelques minutes pour explorer cet article sur Comment créer une boîte de contenu dans WordPress.



L'équipe Tableberg

L'offre de réservation anticipée est en ligne dès maintenant !
Texte par défaut de la barre de notification