TechBlogSD - Tout pour le développement WordPress et WEB
Instructions WEB et WordPress, actualités, revues de thèmes et plugins

Comment ajouter un widget de membre d’équipe dans Weebly ?

19

Le widget membre de l’équipe est très utile pour présenter le résumé de chacun des membres de votre équipe ainsi qu’une photo et une brève introduction. Vous pouvez l’utiliser dans le site Weebly à des fins telles que montrer les membres de l’équipe de votre site, organisation ou entreprise. Vous pouvez ajouter un widget de membre d’équipe dans Weebly en utilisant l’application gratuite Weebly ou avec un code personnalisé. Dans cet article, nous expliquerons les problèmes liés à l’application par défaut et à l’utilisation de code personnalisé.

Application membre de l’équipe Weebly

Vous pouvez connecter une application gratuite « Team Cards » à votre site à partir du centre d’applications de Weebly. C’est une option simple car l’application provient également des développeurs de Weebly.

Comment ajouter un widget de membre d'équipe dans Weebly ?

Application de cartes d’équipe Weebly

Cependant, l’application contient de nombreux bugs et crée une mauvaise expérience utilisateur lorsque vous essayez de modifier le contenu dans l’éditeur. La fenêtre contextuelle des paramètres masquera le contenu que vous souhaitez modifier et vous ennuiera tout le temps. Cela fait plus de 5 ans et Weebly n’a pas corrigé et optimisé cette application. Ainsi, au lieu d’attendre que Weebly mette à jour l’application, vous pouvez essayer les cartes de membre de l’équipe ci-dessous.

Pensons à un widget de membre d’équipe typique avec des profils sociaux et discutons plus en détail de la façon d’ajouter un widget de membre d’équipe dans le site Weebly à l’aide de l’ élément traditionnel " Embed Code ". Le widget dont nous parlons ressemblera ci-dessous avec deux cartes de membre.

Comment ajouter un widget de membre d'équipe dans Weebly ?

Widget du panneau des membres de l’équipe

Fonctionnalités du widget de membre de l’équipe

  • Chaque carte de membre d’équipe comprend les éléments suivants :
    • Image de profil
    • Nom et désignation
    • Brève description
    • Icônes sociales vers des liens de profil social
  • Vous pouvez ajouter plusieurs cartes de membre d’équipe en plaçant l’élément « Code d’intégration » l’un à côté de l’autre.
  • Les couleurs et les polices de chaque carte de membre de l’équipe sont faciles à personnaliser selon vos besoins.
  • Le widget utilise des icônes sociales impressionnantes de Font, éliminant ainsi le besoin d’images d’icônes sociales. Vous pouvez ajouter Twitter, Facebook, Skype, LinkedIn ou toute autre icône sociale aux membres de l’équipe. Cela signifie essentiellement que vous pouvez ajouter différents ensembles d’icônes sociales à différents membres de l’équipe en fonction du profil qu’il a réellement.

Étapes de l’ajout d’un widget de membre d’équipe

Vous trouverez ci-dessous les étapes pour ajouter un widget de membre d’équipe à votre site Weebly.

  • Liens d’icônes CSS
  • Ajout de code CSS
  • Téléchargement d’images de profil
  • Ajout de code HTML

Étape #1 – Lier les icônes CSS

La première étape consiste à lier la source CSS des icônes de police géniales à votre site. Connectez-vous à votre site Weebly et ajoutez le code ci-dessous dans la section "Paramètres > SEO > Code d’en-tête".

<link rel="stylesheet" href="https://www.webnots.com/resources/font-awesome/css/font-awesome.min.css">

Comment ajouter un widget de membre d'équipe dans Weebly ?

Ajouter un code d’en-tête au niveau du site Weebly

Étape #2 – Ajout de code CSS

L’étape suivante consiste à ajouter le code CSS ci-dessous dans le fichier "main.less" de votre site.

.team { position: relative; min-height: 1px; width:330px; } .person-details figure { display: block; overflow: hidden; background: #FFFFFF; border: 1px solid rgba(216, 216, 216, 0.73); border-radius: 5px; margin: 0; } .person-details figure figcaption { padding: 15px; } .margin-bottom-10 { margin-bottom: 10px; } .person-details figure small { font-size: 65%; } .h4 small { font-weight: normal; line-height: 1; color: #b3b3b3; } .person-details-icons { background: #bc5e43; padding: 10px; text-align: center; margin: 0; } .list-inline { padding-left: 0; list-style: none; margin-left: -5px; } .list-inline > li { display: inline-block; padding-left: 5px; padding-right: 5px; } .person-details-icons [class^="fa-"]:before, .person-details-icons [class=" fa-"]:before { color: #ffffff; padding: 0; } a:hover { opacity: 0.5; }

Comment ajouter un widget de membre d'équipe dans Weebly ?

Modification du fichier CSS principal dans Weebly

Si vous ajoutez ce CSS dans la section d’en-tête du site ou d’une page, assurez-vous d’ajouter le code dans les balises < style >…</ style >.

Étape #3 – Téléchargement d’images de profil

Téléchargez les photos de profil des membres de votre équipe dans la section « Atouts » de l’éditeur de code Weebly et le chemin du fichier d’image téléchargé devrait ressembler à – « http://votre-site-weebly.com/files/theme/profile1.png ».

Étape #4 – Ajout de code HTML

La dernière étape consiste à ajouter le code HTML ci-dessous dans l’ élément « Intégrer le code » sur la page sur laquelle vous souhaitez ajouter des membres de l’équipe.

<div class="person-details margin-bottom-30">  <div class="team"> <figure> <img style="width:330px; height:200px" src="https://img.webnots.com/2015/08/Testimonial2.jpg"> <figcaption> <h4 class="margin-bottom-10">Isabel Tietz <small>- Plugin Developer</small> </h4> <div style="text-align:justify;">Super specialist on PHP template design and development for Weebly and WordPress platforms.</div> </figcaption> <ul class="list-inline person-details-icons"> <li> <a href="#">    <i class="fa fa-twitter">   </i> </a> </li> <li> <a href="#"> <i class="fa fa-linkedin">   </i> </a> </li> <li> <a href="#"> <i class="fa fa-facebook">   </i> </a> </li> <li> <a href="#"> <i class="fa fa-skype">   </i> </a> </li> <li> <a href="#"> <i class="fa fa-google-plus">   </i> </a> </li> </ul> </figure> </div> </div>

Personnalisation du widget

L’ajout du code HTML ci-dessus activera une carte de membre de l’équipe et vous pourrez personnaliser le widget en modifiant la section appropriée.

  • Remplacez l’URL de l’image par la vôtre à partir de l’étape 3 et utilisez les attributs de hauteur et de largeur pour ajuster la position et la visibilité de l’image de profil.

  • Les

    La section contient le nom, la désignation et une brève description qui peut être modifiée selon vos besoins.

  • Utilisez toutes les icônes sociales disponibles avec le code approprié. Par exemple, utilisez le code <i class="fa fa-instagram"> pour ajouter l’icône Instagram.

  • Utilisez pour fournir un écart entre les éléments sociaux en fonction de la position sur votre site.

  • Remplacez le # par les liens sociaux du membre de l’équipe.

  • Ajoutez d’autres membres de l’équipe en plaçant les éléments « Embed Code » côte à côte.

  • Vous pouvez modifier les couleurs et la taille de la police dans le code CSS. Nous avons limité la largeur de chaque carte d’équipe à 330px pour une meilleure apparence sur les appareils mobiles, vous pouvez essayer de modifier cette largeur si vous avez un "nom + désignation" plus long.

Remarque : Les images dans le widget sont strictement à des fins de démonstration et n’indiquent pas de vrais membres de l’équipe.

Source d’enregistrement: www.webnots.com
Leave A Reply

Ce site utilise des cookies pour améliorer votre expérience. Nous supposerons que cela vous convient, mais vous pouvez vous désinscrire si vous le souhaitez. J'accepte Plus de détails