Faites glisser dans le Widget Logo Slider[traduction], ajoutez chaque logo comme rangée de répéteurs, définissez des diapositives à la vue pour le bureau, la tablette et le mobile, et activez la lecture automatique avec boucle C'est un widget gratuit, l'un des toute une famille de widgets de carrousel1, et tout cela prend environ cinq minutes.
La configuration est facile Ce qui n'est pas facile, c'est de faire en sorte que douze logos de douze entreprises différentes ressemblent à leur place dans la même rangée C'est le problème réel avec chaque bande de logo, et la seconde moitié de cela la couvre.
Étape 1 : Ajouter le widget Logo Slider
Recherchez dans le panneau Elementor le slider” d'“logo et faites-le glisser Cela fait partie du plugin gratuit Master Addons, et la panne free-versus-Pro a la liste complète de ce qui se trouve d'autre dans ce niveau. Le Documentation du Logo Slider couvre chaque contrôle si vous voulez la version de référence La plupart des plugins d'addon expédient un widget de logo d'une sorte, et le comparaison des plugins de Carrousel dit lesquels l'ont mis derrière un permis.
Étape 2 : Ajoutez vos logos
Chaque logo est une rangée de répéteurs : l'image du logo, un lien facultatif et un texte de survol ou une image de survol en option Le texte alternatif provient du champ Texte Alt de l'image dans la Médiathèque.
Deux choses à faire ici que la plupart des gens sautent :
Écrivez du vrai texte alternatif. Logo“Acme Corp,” non “logo-1.png.” Une bande de logo est l'un des rares endroits où le texte alt transporte des informations authentiques, car les noms de sociétés sont le contenu Les utilisateurs de lecteurs d'écran n'obtiennent rien de douze images appelées“image.”
Liez chaque logo seulement si la destination est utile Lier les logos des clients aux sites Web des clients envoie votre trafic loin d'une page où il était en train de convertir Reliez-les à vos études de cas à la place, ou ne les reliez pas du tout Une bande de logo fonctionne bien comme un signal de confiance statique.
Étape 3 : Disposition et comportement
Les bandes de logo ont des valeurs par défaut différentes des carrousels d'images, car le travail est différent Personne n'étudie un logo Ils l'enregistrent en une demi-seconde.
- Diapositives par vue : six sur ordinateur, quatre sur tablette, deux ou trois sur mobile Densité plus élevée qu'un carrousel photo, car les logos sont petits et le point est la quantité.
- Lecture automatique : sur. C'est le contraire de la règle du témoignage Il n'y a rien à lire, donc le mouvement continu ne coûte rien et montre plus de logos qu'une ligne statique.
- Vitesse: plus lent que ce qui semble juste. 4000 à 6000 ms. Une bande de logo rapide se lit comme agité.
- Boucle: allumé, et assurez-vous d'avoir au moins deux fois vos diapositives à la vue Six-per-view a besoin de douze logos minimum ou le wrap sautera visiblement.
- Flèches et points : off. Une bande de logo n'est pas quelque chose que les gens naviguent.
Définissez le délai de lecture automatique sur 0 et le carrousel devient un chapiteau continu au lieu de marcher glissade par glissière C'est le look que les sites les plus modernes utilisent pour les bandes de logo, et le guide du chapiteau couvre les paramètres en détail.
Étape 4 : Rendre les logos incompatibles cohérents
Voici le vrai problème Vous avez douze logos Quatre sont des mots-symboles larges, trois sont des icônes carrées, deux ont un énorme rembourrage interne cuit dans le PNG, et un est un grand cachot empilé Déposez-les dans une rangée à la même largeur et cela ressemble à une demande de rançon.
Dimensionnement par largeur est l'erreur Un mot-symbole large réglé sur 160 px de large est visuellement minuscule ; une icône carrée à 160 px de large est énorme Ils sont le même nombre et ils ne se ressemblent en rien.
Taille par zone optique à la place. Exportez chaque logo sur la même toile, donnez à chaque marque une hauteur visuelle similaire d'environ 40 à 50 px dans la bande finale, et ajustez les fichiers individuels vers le haut ou vers le bas jusqu'à ce qu'ils aient l'air équilibrés Le widget affiche chaque logo à la même Résolution d'image, donc cet équilibrage se produit dans les fichiers de Squint à la rangée : tout logo qui saute est trop grand, tout qui disparaît est trop petit Faites confiance à votre œil sur les chiffres, car votre œil est ce que les visiteurs utiliseront.
Les cartes de produits présentent le même décalage par rapport à l'autre direction, où les photos de portraits et de carrés dans une bande sont ce qui fait un produit carrousel regardez pas cher Le correctif il y a un rapport d'aspect fixe plutôt qu'une hauteur fixe.
Deux autres solutions pour le même problème :
Recadrer le rembourrage cuit. Les logos exportés à partir de kits de marque comportent souvent un espace libre généreux à l'intérieur du fichier image. Ce remplissage est invisible et rend le logo plus petit que celui de ses voisins à la même hauteur. Recadrer la boîte de délimitation visible avant de le télécharger.
Utilisez SVG là où vous le pouvez. Les logos sont des illustrations vectorielles Un SVG reste net à n'importe quelle taille, pèse une fraction d'un PNG et, c'est la partie utile, peut être recoloré avec du CSS, ce qui rend le traitement en niveaux de gris inférieur trivial.
Étape 5 : Le vol stationnaire en niveaux de gris
Logos désaturés au repos, couleur sur le vol stationnaire C'est le traitement par défaut pour une raison : douze logos répartis en douze palettes de marque, c'est le chaos visuel, et les niveaux de gris les transforment en une seule texture cohérente.
Le curseur de logo n'a pas de commutateur en niveaux de gris, il y a donc deux façons de le faire Téléchargez des fichiers en niveaux de gris comme le logo client et les versions couleur comme l'image du logo Hover, ou ajoutez un filtre en niveaux de gris CSS aux logos avec CSS personnalisé et supprimez-le en vol stationnaire Le paramètre Opacité dans les éléments de carrousel peut réduire les logos à environ 0,6 au repos et 1 en vol stationnaire Si vous utilisez CSS, maintenez la transition à 200 à 300 ms. Plus rapide que cela et il vacille ; plus lent et il semble collant.
Un cas où vous ne devriez pas le faire : si les logos sont des mentions de presse plutôt que des clients, le type de bande Forbes et TechCrunch, laissez-les en couleur. Ces logos sont reconnus par leur couleur et leur désaturation vous coûte la reconnaissance que vous achetiez.
La bande finie
Où le mettre : immédiatement en dessous du héros, ou immédiatement en dessous de l'appel principal à l'action Les deux positions fonctionnent car les deux sont des moments où un visiteur décide de vous faire confiance.
Où ne pas le mettre : le pied de page Une bande de logo dans le pied de page est une décoration Personne ne défile sur le pied de page pour être convaincu.
Les bandes de logo sont l'une des rares sections où un widget d'origine bat un widget conçu, c'est pourquoi aucune des vingt Constructeur de widgets designs essaie de le remplacer Si vous souhaitez que les designs Pro soient destinés à d'autres sections, le page de tarification a les niveaux.
Combien de logos ?
Huit à seize. Moins de huit ans et une bande défilante attirent l'attention sur le peu qu'il y en a, car une rangée statique de six semble plus confiante que six logos en cyclisme Plus de seize ans, personne ne voit la moitié arrière, alors menez avec les noms que les gens reconnaîtront.
Et si vous n'avez que quatre clients : afficher quatre, dans une rangée statique, à une taille décente Un carrousel est une façon de gérer l'abondance Utiliser un pour cacher la rareté fait le contraire de ce que vous voulez.
Questions fréquemment posées
Elementor a-t-il un widget de carrousel logo ?
Pas dans le noyau Ni Elementor free ni Pro n'incluent de carrousel de logo dédié, bien que le carrousel d'images de base puisse afficher une simple rangée de logos. Le curseur de logo Master Addons gratuit ajoute des liens par logo, du texte en survol ou des images en survol, des info-bulles et une bande de style chapiteau lorsque la vitesse de lecture automatique est réglée sur 0.
Comment puis-je faire défiler un carrousel logo en continu dans Elementor ?
Activez la lecture automatique et la boucle infinie, puis réglez le délai de lecture automatique à 0. un délai de zéro supprime la pause sur chaque diapositive, de sorte que la piste se déplace continuellement au lieu de passer. Réglez la vitesse sur 4000 à 6000 ms pour qu'elle se lise comme calme plutôt que frénétique.
Comment faire des logos de la même taille dans un carrousel ?
Définissez une hauteur de conteneur fixe, 40 à 50 px, et laissez la largeur s'exécuter automatiquement, plutôt que de fixer la largeur. Ensuite, ajustez les logos individuels à l'œil nu, car un mot-symbole large et une icône carrée à la même mesure semblent complètement différentes. Recadrez d’abord tout remplissage cuit dans les fichiers image.
Les logos doivent-ils être en niveaux de gris ou en couleur ?
Échelle de gris au repos avec couleur sur le vol stationnaire pour les logos des clients et des partenaires, car elle transforme une douzaine de palettes en conflit en une seule bande cohérente. Conservez les logos de la presse et des médias en couleur, car ceux-ci sont reconnus par leur couleur et leur désaturation perd la reconnaissance.
Combien de logos doit-il y avoir dans un carrousel logo ?
Huit à seize. Moins de huit semble mieux comme une rangée statique qu'une bande mobile, car le défilement attire l'attention sur le peu qu'il y en a. Plus de seize signifie que la moitié arrière n'est jamais vue, alors mettez les noms reconnaissables en premier.
Puis-je lier chaque logo à une page différente ?
Oui, chaque ligne de répéteur a son propre champ de lien Réfléchissez si vous le souhaitez, cependant : lier les logos des clients aux sites clients envoie le trafic de conversion. Les relier à vos propres études de cas permet au visiteur de rester et de faire plus de travail.
Suivant
Photographies plutôt que logos ? widget différent, valeurs par défaut différentes : comment créer un carrousel d'images dans Elementor. Il y a aussi une collection de vingt modèles de curseurs nommés, dont huit sont libres d'importer« Bien qu'aucune ne soit une bande de logo, donc pour les logos, le Logo Slider reste l'outil ».
Si la bande cesse de bouger après une mise à jour du plugin de mise en cache, c'est un problème d'initialisation Swiper et le correctif est là. Tout ce qui est en forme de carrousel vit sur le Widgets de carrousel d'éléments page.
