Il y a beaucoup à dire sur le renforcement de l’autorité de la marque, mais l’essentiel est simple : tout se résume à la confiance. Bien sûr, la confiance est difficile à gagner et une bonne réputation est facile à perdre. Donc, si un client a misé sur vous et que cela a porté ses fruits, vous devez tirer parti de ce fait à votre meilleur avantage. Si vous l’avez, affichez-le, en d’autres termes. Et un carrousel de clients est un moyen de le faire.
Mais qu’est-ce qu’un carrousel de clients, exactement ? Quels sont ses cas d’utilisation et où le placer au mieux sur votre site ? Dans ce didacticiel, nous tenterons de répondre à ces questions et plus encore, avant de vous montrer comment créer un carrousel de clients pour vos sites Web WordPress. Nous utiliserons notre propre plug-in Qi Addons for Elementor pour le faire. Si vous l’utilisez déjà et si vous êtes certain vous avez besoin d’un carrousel de clients sur votre site Web, passez directement à la section « Comment faire » de l’article.
Si vous préférez les didacticiels vidéo, vous pouvez voir à quel point vous pouvez configurer rapidement et facilement un carrousel de clients pour votre site Web dans la vidéo ci-dessous :
Cependant, si vous les préférez sous forme de texte, lisez la suite.
Voici ce dont nous aimerions vous parler :
Dans la conception de sites Web, un carrousel est un type d’affichage animé caractérisé par l’illusion de la rotation, semblable à l’attraction de fête foraine dont il tire son nom. Les écrans de type carrousel peuvent être utilisés à diverses fins, notamment des galeries de photos, des vidéos, des articles de blog, des témoignages et des portefeuilles de clients, le sujet même de cet article.
Un carrousel de clients est donc un type de carrousel utilisé pour afficher un portefeuille de clients. Vous travaillez depuis longtemps, vous avez un bon palmarès, vous avez gagné votre réputation dans le milieu. Certains clients de renom vous ont choisi plutôt que vos concurrents. Alors, si les NDA le permettent, pourquoi ne pas vous montrer ? Pourquoi ne pas mettre en place une exposition bien en vue de votre plus gros poisson et en pêcher encore plus ?
Un carrousel de clients est généralement situés sur les pages de destination et les pages de vente, semblable à des témoignages. Contrairement aux témoignages, qui sont des déclarations de clients ou des opinions d’experts, où les clients utilisent leurs propres mots pour décrire leur expérience de travail avec vous, les affichages clients permettent à la propre image de marque des clients de parler d’elle-même.
Outre l’installation de WordPress et la création d’un site Web, il y a quelques choses que vous devez faire pour commencer à mettre en place un carrousel de clients sur votre site Web.
Nous vous montrerons comment créer un carrousel de clients saisissant en utilisant notre propre Modules Qi pour Elementor. Pour utiliser Qi Addons, vous devez installer et activer Elementor, l’éditeur visuel de pages. Qi Addons ne fonctionnera pas avec d’autres éditeurs de page. Cependant, il fonctionnera avec la version gratuite d’Elementor, tant que vous disposez de la dernière version.
Après avoir installé Elementor, vous devez installer Qi Addons for Elementor. C’est un plugin riche en contenu qui ajoute énormément aux capacités déjà impressionnantes d’Elementor. Le carrousel des clients est inclus dans la version gratuite, aux côtés de 59 autres widgets polyvalents et magnifiquement conçus. Donc, tout ce que vous avez à faire est d’installer les dernières versions des deux plugins, et vous êtes prêt à partir.
Nous vous montrerons comment créer le design présenté dans la vidéo dans l’introduction, étape par étape. Notez également que la vidéo a été réalisée avec une version antérieure du widget Qi Addons. Qi Addons est un produit de qualité avec des mises à jour régulières, et cela est inévitable. Les mêmes options sont toujours là, mais sont organisées différemment dans la nouvelle version décrite dans le texte.
Nous vous montrerons comment configurer un carrousel de clients dans le cadre d’une page. Pour commencer, nous avons créé une page et lui avons donné un titre.
Tout d’abord, recherchez l’élément du carrousel des clients dans le menu de gauche et faites-le glisser où vous le souhaitez sur la page.
Le widget devrait maintenant être sélectionné, et le widget Contenu L’onglet doit être ouvert.
La section générale
La première section est la Général section. Ici, vous pouvez ajouter des classes personnalisées si vous connaissez leurs identifiants en utilisant le Classe personnalisée champ. Vous pouvez également choisir d’avoir Articles en boîte (images) au lieu de simples, ainsi que choisir un Type de survol. La Type de survol contrôle affecte le comportement de chacune des images en rotation. Nous n’utiliserons pas le type d’affichage des éléments en boîte, tandis que, pour le type de survol, nous utiliserons Opacitérendant l’image légèrement plus transparente au survol de la souris.
Le carrousel est constitué d’objets animés qui sont, dans ce cas, appelés éléments. Vous pouvez ajouter autant d’éléments que vous le souhaitez en cliquant sur le + Ajouter un élément bouton. Nous ajouterons deux éléments aux trois par défaut, pour un total de cinq.
Pour remplir un élément, vous devez le développer. Vous pouvez le faire en cliquant sur le Article bar. Pour ajouter une image, cliquez sur le Image client champ pour remplacer l’espace réservé. Vous pouvez ajouter une image à partir de votre médiathèque ou en télécharger une à partir de votre appareil.
Nous avons sélectionné une image dans notre médiathèque. Pour ajouter une image à votre carrousel, cliquez sur le Insérer un média bouton.
Avec l’image sélectionnée, il reste les options d’un Titre du client (le nom d’un client), le Lien client (au cas où vous voudriez inclure un lien vers leur site Web), et un Icône Client, au cas où vous utilisez une mise en page qui nécessite ou autorise une icône (ce que nous ne faisons pas). Vous pouvez également choisir un Image de survol du client, si vous avez sélectionné un comportement de survol qui modifie l’image. Nous avons entré un nom d’espace réservé et # pour le lien.
Après avoir fait la même chose pour le reste de nos articles, nous allons passer à la Paramètres du curseur partie de la Contenu languette.
Section Paramètres du curseur
Ce sont les options qui affectent principalement l’animation du carrousel lui-même. La Activer la boucle de curseur control vous permet de boucler le carrousel sur lui-même : rejouez-le une fois qu’il est terminé. Nous l’avons mis en place pour Oui aux fins de cette démonstration. La Activer les diapositives centrées le contrôle est réglé sur Non par défaut, et nous le laisserons là. Cependant, si vous avez plusieurs colonnes, vous pouvez utiliser cette option pour vous assurer que vous avez une diapositive centrée à tout moment. La Activer la lecture automatique du curseur vous permet de faire tourner le carrousel automatiquement ou de l’empêcher de le faire.
La Durée de la diapositive permet de régler le temps pendant lequel une position du carrousel est statique, tandis qu’avec la Durée de l’animation de diapositive vous pouvez définir, sans surprise, la durée de l’animation (mouvement). Les deux champs acceptent des valeurs en millisecondes. Nous sommes allés avec 4000 millisecondes pour le Durée de la diapositiveen changeant de la valeur par défaut 5000mais nous avons laissé le Durée de l’animation de diapositive par défaut 5000.
Ensuite, le Activer la navigation par curseur et Activer la pagination du curseur les contrôles sont utilisés pour activer et désactiver les flèches et les puces sur le widget. Nous allons éteindre les deux. En utilisant le Proportions d’images menu, vous pouvez sélectionner les dimensions des images que vous utilisez dans votre slider. Nous sommes satisfaits de la taille de nos images, nous la laisserons donc à Original, mais il existe une gamme de tailles et de rapports d’aspect que vous pouvez choisir pour votre propre conception. La Activer les colonnes partielles est réglé sur Non par défaut, ce qui signifie que nous n’avons que des colonnes complètes. Si réglé sur Oui, cela vous permettrait d’ajouter une colonne partielle au carrousel presque comme une sorte de taquinerie. Nous n’utiliserons pas cette option pour cette conception.
Jusqu’au Nombre de colonnes est concerné, nous sélectionnerons Cinq, car les logos de nos clients sont suffisamment petits pour tenir. Cependant, ils ne s’adapteront pas aussi bien à tous les écrans. C’est pourquoi nous avons sélectionné Personnalisé dans le Colonnes responsives menu et réglez le nombre d’éléments affichés sur Cinq, Troisou Deux, en fonction de la largeur de l’écran. Enfin, nous laisserons le Espace entre les éléments à la valeur par défaut de 30 pixels.
Comment styliser le carrousel de vos clients
Passons à la Style onglet, nous constatons que les deux premières sections sont les Style de navigation du curseur et le Style de pagination du curseur. Comme nous ne les utilisons pas pour cette conception, ces sections n’auront aucune option disponible. Nous dirons ici que ceux-ci contiennent une myriade d’options pour styliser les flèches et les puces du carrousel de vos clients, au cas où celles-ci seraient activées.
La Style la section est la suivante. Ici, vous pouvez définir un Alignement pour les éléments (nous le laisserons par défaut Centre), ainsi que le style du titre du client. Pour le Balise de titrenous sélectionnerons H5et nous ne changerons pas non plus le Couleur du titre ou la Typographie du titre. Qu’il suffise de dire qu’il existe de nombreuses options pour tous les styles imaginables.
La Titre Survoler Souligner contrôle, s’il est réglé sur Oui, ajoutera une ligne animée sous le titre du client. Il permettra également au Titre Souligné Animation Durée contrôle, qui vous permet de choisir entre un Long et un Court animation.
Le contrôle final de la Style partie de la Style l’onglet est le Images Marge Bas. Nous ne l’utiliserons pas pour cette démonstration, mais vous pouvez l’utiliser pour augmenter la distance entre l’image et le titre.
Finalement, le Style en boîte et Style d’icône les sections ne sont également utilisées que lorsque Articles en boîte et Icônes clientsrespectivement, sont activés et configurés dans le Général languette.
Et c’est ainsi que nous avons créé un carrousel de clients astucieux en quelques minutes, en utilisant seulement deux plugins gratuits.
En conclusion
Comme vous pouvez le voir, montrer vos grands clients peut être fait facilement et rapidement en utilisant Elementor et nos propres Qi Addons. Si vous pensez que le site Web de votre entreprise peut être amélioré par ce type d’affichage, vous savez où aller pour la conception prête à l’emploi incroyablement polyvalente.
Soutenez notre effort ❤️
Si vous avez apprécié cet article, pensez à laisser un pourboire pour nous aider à continuer à publier du contenu de qualité.
