uSquare, un plugin wordpress pour présenter votre équipe

En cette belle rentrée 2013 j’ai décidé de commencer l’année avec un plugin coup de cœur que certains d’entre vous connaissent peut-être déjà.

Le plugin Usquare est un plugin WordPress payant (ne partez pas à la vue de ce mot, celui-ci est à seulement 9€) très bien développé et proposant une interface vraiment très agréable. Ce plugin vous servira à présenter votre équipe ou personnel d’entreprise à travers un design très épuré et très attirant. En effet, répartis en système de blocs, les membres de l’équipe seront chacun illustrés par une photo, un nom prénom et un poste attribué. Mais cela n’est pas tout puisqu’un simple clic sur chaque bloc vous permettra de déplier le profil de la personne pour dévoiler une description plus détaillée ainsi que des liens vers ses différents profils externes (facebook, linkedin, google+, etc.).

Nous noterons aussi que ce plugin propose un large choix de personnalisation. De nombreuses options vous sont proposées, vous permettant ainsi de modifier la taille des blocs, leur position, les couleurs d’arrières-plans, etc. Sur le coup pour ceux qui sont vraiment intéressés par le plugin, je les invites à l’acheter. Le prix est très bas et la qualité est bien là !

uSquare – Tutoriel simple et efficace

La première étape de notre tutoriel va être d’installer notre plugin. Pour cela, rendez-vous dans la rubrique Extensions > Ajouter du menu wordpress. Dans le menu du haut, cliquez sur envoyer et charger le .zip correspondant au plugin uSquare. Cliquez ensuite sur Installer maintenant.

Une fois le plugin installé, activez-le en cliquant sur Activer l’extension. Dans le menu, cliquez ensuite sur uSquare > Add New. Dans le champ du haut de page, vous pourrez donner un titre à votre équipe. Pour ma part je la nommerais « Notre Équipe« .

Maintenant nous allons créer notre premier membre de l’équipe. Pour cela cliquez sur +Add New Item. Une nouvelle fenêtre apparaît. En Title, nous mettrons le nom et prénom de la personne puis son poste dans le champ Description. En dessous, vous pourrez choisir une photo de profil en cliquant sur Change et en chargeant la photo souhaitée. Enfin dans la partie Content, vous pouvez si vous le souhaitez donner une description plus détaillée de la personne.

Vous avez en dessous plusieurs options disponibles (ne pas ouvrir le bloc, couleur des textes, ajouter un lien à l’image, etc). A vous de voir ce que vous souhaitez.

Dans la colonne de droite, nous allons maintenant ajouter les réseaux sociaux sur lesquels est présente la personne. Je précise que le mail doit être précédé de la commande mailto: pour pouvoir fonctionner. Au passage vous pouvez aussi définir une couleur d’arrière plan à votre bloc.

Sachez qu’à tout moment vous pouvez cliquer sur le bouton Preview en haut à droite afin d’avoir un aperçu de votre uSquare et des dernières modifications apportées.

Une fois que vous avez fini votre item, vous pouvez sauvegarder (Save uSquare) et créer un nouvel item pour définir un autre membre de votre équipe. Lorsque que votre équipe est au complet, vous pouvez jeter un œil aux options qui se trouvent à droite. Celles-ci vous permettent de gérer la vitesse d’ouverture du bloc, l’animation d’ouverture, la taille des blocs selon la résolution de l’écran (pour un meilleur responsive) ainsi que les options de typographie.

Dernière étape: il ne vous reste plus qu’à récupérer le shortcode de votre uSquare en cliquant sur uSquare dans le menu et en copiant le shortcode correspondant à votre équipe. Pour ma part je copie le code [[usquare id= »1″]] que j’irais ensuite coller dans ma page « Équipe » que j’aurais créée auparavant.

Et découvrez ici la démo du plugin sur leur site internet.