Comment afficher votre équipe dans WordPress

Lorsque vous entrez dans les eaux du commerce en ligne et créez une entreprise en ligne – ou utilisez des outils numériques pour développer votre entreprise en ligne – vous pouvez facilement vous retrouver submergé par la variété d’outils dont vous disposez. Si vous vous en tenez aux fondamentaux, cependant, vous trouverez sur votre liste de contrôle l’établissement et le maintien de la confiance des clients. Il y a plus d’une chose que vous pouvez faire pour le rayer – ajouter des témoignages à vos sites Web peut aider, par exemple. Mais humaniser votre entreprise et afficher votre équipe sur votre site Web WordPress est également un excellent moyen de le faire.

C’est pourquoi nous avons inclus un widget d’équipe dans notre plugin Qi Addons for Elementor – pour vous donner un moyen simple de montrer à vos clients ou clients que vous et votre équipe êtes de vraies personnes, tout comme eux. Qi Addons est une superbe collection de widgets Elementor qui rend encore meilleur un éditeur de site déjà génial en vous donnant une option facile pour faire quelque chose d’aussi extraordinaire que la mise en place d’un affichage d’équipe.

D’autre part, si vous préférez utiliser l’éditeur Gutenberg pour créer des pages sur votre site Web, vous devez utiliser notre plugin Qi Blocks for Gutenberg. Il a un bloc d’équipe, ainsi que 47 autres blocs gratuits et 33 premium. Cet article vous montrera comment créer un affichage d’équipe pour votre site Web WordPress en utilisant les deux plugins.

Afficher votre équipe avec Qi Addons pour Elementor

Nous utiliserons l’un des exemples de la page de l’addon pour montrer comment afficher votre équipe dans WordPress en utilisant le Modules Qi pour Elementor brancher. Nous avons également créé un didacticiel vidéo pour cela, vous pouvez donc le regarder si vous préférez regarder des vidéos plutôt que de lire des articles.

Pour commencer, cependant, vous devez vous assurer que le plugin est installé. Vous devriez également avoir installé Elementor, donc votre première étape devrait être d’aller sur le tableau de bord de votre site Web, en naviguant vers Plugins> Ajouter un nouveauet trouver, installer et activer les deux plugins.

Avec cela à l’écart, l’étape suivante consiste à préparer le champ pour ajouter le widget. Trouvez un article ou une page que vous souhaitez modifier et créez une section à quatre colonnes. En raison du fonctionnement du widget, nous devrons l’utiliser quatre fois – une fois pour chaque membre de l’équipe.

Les paramètres de section et de colonne nécessiteront également quelques ajustements pour obtenir les bons résultats. Nous avons basculé la largeur du contenu sur Pleine largeur pour la section dans Mise en page > Mise en page. Puis dans Avancé > Grille des modules complémentaires Qode Essential, nous avons choisi oui pour l’option « Créer cette ligne dans ‘Dans la grille' » et avons laissé le comportement de la ligne de la grille par défaut.

En ce qui concerne les colonnes, nous leur avons ajouté du rembourrage. Nous sommes allés à Avancé > Avancé et ajouté un rembourrage de 18px à droite sur la colonne la plus à gauche. Le suivant a 12px à droite et 6px à gauche. La suivante a 6px à droite et 12px à gauche, et la dernière colonne a 18px de rembourrage à droite.

Bien sûr, vous devez vous rappeler que ces paramètres peuvent ne pas produire les mêmes résultats dans tous les cas. Il sera différent en fonction du thème que vous utilisez, et vous aurez peut-être besoin de quelques ajustements supplémentaires pour le rendre parfait. C’est juste comment nous l’avons fait.

Ajout du contenu au widget d’équipe

Lorsque notre zone de travail est configurée, la prochaine étape consiste à ajouter le premier widget. Nous l’avons ajouté à la colonne la plus à gauche et nous le configurerons entièrement avant de le dupliquer pour remplir les colonnes restantes. C’est notre point de départ.

Dans les paramètres de style généraux, vous avez la possibilité de choisir la disposition du widget et de choisir les différentes manières d’afficher la carte d’informations. Vous pouvez également sélectionner le nom, le rôle, l’image, les proportions de l’image et ajouter des liens vers les médias sociaux ou les contacts, avec les icônes qui les accompagnent.

Nous avons conservé les informations par défaut sous la mise en page et rempli le nom et le poste du membre imaginaire de notre équipe. Nous avons également ajouté une photo et conservé ses proportions d’origine car elles s’adaptent bien. En ce qui concerne les réseaux sociaux, nous en avons ajouté un autre et défini des icônes appropriées pour Twitter, Pinterest et Instagram.

Avec cela, nous avons ajouté tout le contenu dont nous avions besoin pour le premier widget. La prochaine étape consiste à le coiffer.

Styliser le widget d’équipe

Les options de style fournies par le widget sont réparties sur plusieurs onglets. Ils vous permettront de choisir le style général et l’espacement entre les éléments, vous offrant des options de style de contenu supplémentaires. Nous allons commencer par le haut et aborder d’abord les options de style.

Les options générales de style vous permettent d’ajuster l’étiquette de nom du membre de l’équipe, mais également les options de couleur et de typographie pour le nom et le rôle. Les options de typographie en question incluent tout, de la famille et de la taille des polices à la hauteur des lignes et à l’espacement des lettres. Il existe donc de nombreuses façons de personnaliser le widget.

La première chose que nous avons faite ici a été de changer la balise de nom en H5 à partir du H4 par défaut. Nous n’avons pas changé la couleur du nom ou la typographie, mais nous avons changé les deux pour le rôle. Pour la couleur, nous avons utilisé #c4c4c4. Pour la typographie, nous avons changé la taille à 16px et le poids à 500.

Le prochain ensemble d’options concerne les icônes – leur couleur par défaut, la couleur qu’elles ont au survol et leur taille. Nous avons changé la couleur par défaut en #1e1e1e, la couleur de survol en #c4c4c4 – afin qu’elle corresponde au rôle – et la taille en 15px.

Les dernières options sous Style général sont les options de survol d’image et la couleur et la typographie du texte, qui ne s’appliquent qu’à des dispositions de widget spécifiques. Comme la nôtre n’en fait pas partie, nous avons uniquement modifié les options de survol de l’image en Zoom.

Notre prochain arrêt concerne les options de style d’espacement.

Le style d’espacement, comme son nom l’indique, vous permet de définir l’espacement entre les différents éléments que vous avez sur votre widget. C’est là que vous pouvez définir les marges pour le nom et le rôle, l’espace entre les icônes, la marge supérieure pour le contenu dans son ensemble et la marge inférieure pour le texte – que nous n’avons pas car nous n’avons pas choisi le disposition qui le permet.

De haut en bas, les valeurs que nous avons entrées sont 10px, 5px, 25px et 22px.

Les options de style de contenu restent, ce qui vous permet de choisir l’alignement du contenu. Nous n’y avons rien changé, et notre premier widget d’équipe a été fait.

Étant donné que ce widget possède tous les paramètres dont nous avons besoin, la meilleure façon de créer les quatre autres consiste à dupliquer l’original trois fois, puis à modifier le contenu des widgets. C’est aussi simple que de cliquer avec le bouton droit sur le widget, de choisir « dupliquer », puis de faire glisser le widget résultant vers une colonne libre. Après le changement de contenu, voici ce que nous avons obtenu.

Bien sûr, vous pouvez choisir des paramètres complètement différents pour obtenir des cartes de contenu animées, des bordures entre les widgets et de nombreux autres éléments passionnants. La meilleure façon d’utiliser ce court tutoriel est comme source d’inspiration.

Afficher votre équipe avec Qi Blocks pour Gutenberg

Voyons maintenant comment vous pouvez créer le même affichage d’équipe à l’aide du bloc Team du plug-in Qi Blocks for Gutenberg. Après avoir installé et activé le plugin, vous devez définir votre champ de travail – créez une colonne pour chaque membre de l’équipe que vous souhaitez afficher. Nous en avons fait quatre avant d’ajouter le bloc au premier.

Vous trouverez les paramètres de bloc dans la barre latérale des paramètres sur le côté droit. Les paramètres de contenu s’ouvrent en premier par défaut, vous permettant de choisir la disposition du contenu du bloc, le nom, le rôle et l’image du membre de l’équipe, ainsi qu’une option pour ajouter des liens vers les réseaux sociaux.

Nous avons rempli le bloc avec notre contenu, en ajoutant Twitter, Pinterest et Instagram en tant que réseaux sociaux.

C’est tout le contenu dont nous aurons besoin pour le premier bloc d’informations sur l’équipe afin que nous puissions continuer à le styliser.

Styliser le bloc d’équipe

L’onglet Style contient différentes options de style pour le contenu général, le nom, le rôle, le texte et les réseaux sociaux. Commençons avec Style > Contenuun ensemble d’options dans lesquelles vous pouvez définir le comportement de l’image au survol, configurer l’espace entre les icônes, la marge supérieure du contenu et l’alignement du contenu.

Nous avons choisi Zoom comme comportement de survol de notre image. De plus, nous avons défini 25px pour notre espace entre les icônes et 22px pour la marge supérieure.

Sous Style > Nom, vous pouvez définir la balise du nom et ajuster sa couleur. Sous Typographie, vous aurez accès à un ensemble complet d’options de typographie, et vous aurez également la possibilité de définir la marge inférieure du nom. Nous avons changé la balise en H5 et mis la marge inférieure à 5px.

Pour Style > Rôlevous obtenez les mêmes options pour Nom moins la balise. Ici, nous avons changé la couleur du nom en # c4c4c4, défini la taille de la police sur 16 pixels dans les options de typographie, le poids sur 500 et la hauteur de ligne sur 23 pixels. Nous avons défini la marge inférieure à 10 pixels.

Nous n’avons pas de texte dans notre mise en page, nous pourrions donc ignorer Style > Texte. Les options que vous y trouverez vous permettront de choisir la couleur et la typographie.

Passer à Style > Réseaux sociaux, vous verrez quelques options de couleur pour le remplissage, le trait et le survol. Vous pourrez également ajuster la taille de l’icône. Nous définissons notre couleur de remplissage sur # 1e1e1e et la couleur de survol sur # c4c4c4.

Remplir le reste avec le premier ensemble de blocs de membres de l’équipe est facile. Créez des copies du premier et modifiez son contenu pour chaque nouveau membre de l’équipe, et vous aurez bientôt tout l’affichage prêt à être mis en ligne sur votre site Web.

Enveloppons-le !

Vous ne devez jamais sous-estimer le pouvoir qu’une simple galerie de membres d’équipe peut avoir sur les personnes qui visitent votre site Web, qu’il s’agisse de clients ou de futurs ajouts à l’équipe. Vous devez vous concentrer sur la façon dont vous affichez votre équipe dans WordPress. Comme nous l’avons démontré, le widget QI Addons for Elementor’s Team ne vous noiera pas dans les options, mais il ne vous laissera pas en vouloir plus – il frappe juste au bon endroit pour rester simple mais très utile.