Logo Slider

Un mur de logos clients pousse le reste de votre page vers le bas et ne montre toujours qu'une poignée de marques Un curseur de logo intègre toute la liste dans une bande compacte qui tourne d'elle-même Le Logo Slider widget dans Modules complémentaires principaux pour Elementor construit cette bande à partir de n'importe quel ensemble d'images de logo, puis ajoute des effets de survol, des info-bulles, une lecture automatique et des flèches de navigation sans plugin de curseur séparé.

Chaque logo peut se lier au site du client, passer à une deuxième image en vol stationnaire, ou révéler le nom de la marque et une courte description Ce guide parcourt le widget depuis le premier glisser sur la toile jusqu'au carrousel fini sur la page live.

Ce que fait le widget Logo Slider #

Le widget prend une liste d'images de logo et le transforme en un carrousel réactif et jouant automatiquement Vous contrôlez combien de logos montrent à la fois, à quelle vitesse ils tournent et ce qui se passe lorsqu'un visiteur survole un. Il fonctionne sur le moteur Swiper, donc le curseur est tactile sur les téléphones et les tablettes dès le début.

Il se trouve dans le groupe Slider Widgets de Master Addons, à côté du Carrousel d'images et Galerie Slider widgets Ces deux-là sont construits pour les photos et les galeries Le Logo Slider est construit pour les marques : les logos restent petits, régulièrement espacés et alignés sur une seule rangée.

Avant de commencer #

• WordPress avec Élémenteur installé et actif.
• Modules complémentaires principaux pour Elementor installé et actif. Nouveau au plugin ? voir le guide d'installation.
• Vos logos clients ou partenaires prêts comme fichiers image Les logos de mêmes dimensions sont plus beaux ; quelque chose autour de 300 x 150 pixels avec un fond transparent ou blanc fonctionne bien.

Comment ajouter le widget Logo Slider #

Dans l'éditeur Elementor, ouvrez le Éléments panneau et recherche pour Logo Slider(ou faites défiler vers la section Addons principaux) Faites glisser le widget sur votre page Il se charge avec six éléments d'espace réservé nommés Nom de marque, de sorte que vous voyez la forme du curseur tout de suite et remplacez les espaces réservés un par un.

Ajoutez vos logos dans la section Articles de logo #

Dans le Contenu onglet, ouvrez Articles de logo. Chaque entrée de la liste est un logo Cliquez sur un élément pour l'étendre, ou utilisez les icônes de copie et de suppression à droite de chaque ligne Le Ajouter un élément bouton en bas étend la liste à autant de logos que vous avez besoin.

Sous la liste des éléments se trouvent trois paramètres qui s'appliquent à l'ensemble du curseur :

• Résolution de l'image : la taille WordPress sert pour chaque logo, de la vignette jusqu'au Full Les logos sont de petits fichiers, donc Full va généralement bien.
• Titre HTML Tag : la balise de titre enroulée autour du nom de la marque sur hover, H5 par défaut Choisissez une balise qui correspond à la structure de titre de votre page.
• Sélectionnez Événement : ce qui déclenche l'effet de survol Comme le note le panneau, cela ne se déclenche que lorsqu'un type de survol est activé sur le Logo Client.

À l'intérieur de chaque élément, cliquez sur le Logo Client champ pour ouvrir la médiathèque WordPress Téléchargez vos fichiers logo ou choisissez-en déjà là Le panneau de pièce jointe affiche les dimensions du fichier, pratique pour vérifier que tous les logos partagent la même taille.

Définissez le lien et l'effet de survol pour chaque logo #

Chaque élément de logo porte le sien Lien champ Coller l'URL du client et le logo devient cliquable sur la page en direct L'icône d'engrenage ouvre les options habituelles du lien Elementor, comme l'ouverture dans un nouvel onglet.

Le Survolez ? dropdown décide de ce qui se passe lorsqu'un visiteur déplace la souris sur le logo Il a trois modes :

• Aucun: le logo se trouve juste là Propre et simple.
• Texte: le logo s'estompe et a Nom de marque plus court Description apparaître à sa place.
• Image: le logo passe à une deuxième image que vous choisissez.

Avec Texte sélectionné, deux champs apparaissent Tapez le nom de la marque et une description d'une ligne, et le widget les affiche sur le logo en vol stationnaire Cela convient aux agences qui veulent dire ce qu'elles ont fait pour chaque client sans quitter le curseur.

Avec Image sélectionné, a Image du logo Hover le champ apparaît à la place Une astuce courante : utilisez un logo en niveaux de gris comme image principale et la version en couleur comme image de vol stationnaire, de sorte que les logos s'allument lorsque les visiteurs se déplacent sur la bande.

Ajouter une infobulle à un logo #

Chaque article a également un Info-bulle basculer. Allumez-le et une petite bulle apparaît lorsque les visiteurs survolent ce logo. Le Paramètres tab contrôle le comportement :

• Contenu: le texte à l'intérieur de l'info-bulle.
• Placement : où se trouve la bulle, Top par défaut.
• Suivre le curseur : laissez l'infobulle suivre la souris au lieu de rester fixe.
• Animation et déclenchement : comment l'info-bulle apparaît, Échelle sur Hover par défaut.

Le Style tab en dehors des paramètres stylise la bulle elle-même : couleurs, typographie et espacement Les info-bulles fonctionnent bien pour les étiquettes courtes comme“Partner depuis 2019” qui n'ont pas besoin du mode de survol du texte intégral.

Configurez les flèches de navigation #

Ouvrir le Navigation section pour contrôler la façon dont les visiteurs déplacent le curseur à la main Le Navigation dropdown définit le type de contrôle, avec des flèches comme choix standard.

• Afficher la barre de défilement?: ajoute une barre dragable sous le curseur.
• Position des flèches : Centre met une flèche de chaque côté du curseur Le centre supérieur ou le centre inférieur regroupe les deux flèches au-dessus ou en dessous.
• Placement : garde les flèches À l'intérieur de la boîte à curseur ou les déplace à l'extérieur.
• Cacher la flèche sur mobile?: laisse tomber les flèches sur de petits écrans, où le balayage fait le travail.
• Icône suivante et icône précédente : échangez les chevrons par défaut contre n'importe quelle icône de la bibliothèque Elementor.

Réglez le comportement du carrousel #

Le Paramètres du carrousel section entraîne le mouvement du curseur C'est là qu'une rangée statique de logos devient la bande rotative que les visiteurs attendent.

• Diapositives par colonne : combien de logos affichent à la fois, de 1 à 6. quatre ou cinq conviennent à la plupart des mises en page de bureau, et l'icône réactive vous permet de définir un nombre plus petit par appareil.
• Mise en page : Carousel est le curseur plat standard.
• Hauteur automatique : laisse la hauteur du curseur suivre la rangée de logo.
• Vitesse de lecture automatique et de lecture automatique : faites pivoter les logos automatiquement La vitesse est le délai en millisecondes, donc 5000 signifie un nouvel ensemble toutes les cinq secondes.
• Pause sur Hover : arrête la rotation pendant que le curseur est au-dessus du curseur, qui se marie bien avec les effets de vol stationnaire et les info-bulles.
• Diapositives à faire défiler : combien de logos avancent par pas.
• Glissière centrale, curseur de préhension, mode sans glissement : centrez le logo actif, montrez un curseur de saisie ou laissez les visiteurs lancer librement la bande.
• Boucle: exécute le curseur sans fin, ce qui est ce qu'une bande de logo veut presque toujours Une chose à regarder : la boucle a besoin de plus de logos que le nombre de diapositives par colonne Avec cinq colonnes et seulement cinq logos, il n'y a rien de plus à faire pivoter.

Style le curseur de logo #

Passer au Style onglet. Quatre sections couvrent l'apparence du curseur : éléments de carrousel, éléments de carrousel, icône et navigation.

Articles de carrousel #

Cette section encadre chaque cellule du logo, avec les états Normal, Hover et Actif.

• Arrière-plan, type de bordure, rayon de bordure, ombre de boîte : donnez à chaque logo un cadre de type carte ou laissez le tout vide pour une bande propre.
• Rembourrage et espace d'article : espace à l'intérieur de chaque cellule et la distance entre les logos L'écart est le moyen le plus rapide de faire respirer une bande bondée.
• Mode Ombre et Opacité : ombres de bord douces et transparence pour les logos.

Volez les objets du carrousel #

Cette section stylise l'état de survol que vous avez choisi dans l'onglet Contenu, y compris la superposition de texte.

• Arrière-plan, bordure, ombre de boîte, rembourrage, marge : le cadre autour d'un logo plané.
• Nom Couleur, Nom Typographie, Espacement : le texte de marque qui apparaît en mode survol de texte.

Icône #

La section Icône stylise la petite icône affichée avec le contenu du survol : sa couleur, son arrière-plan, sa bordure, son remplissage, sa marge et sa taille de police.

Flèches de navigation #

La section Navigation stylise les boutons fléchés, avec des états Normal et Hover séparés.

• Couleur et arrière-plan : le glyphe flèche et le bouton derrière.
• Type de bordure, rayon de bordure, rembourrage, taille : façonnez les boutons ; un rayon complet fait les boutons ronds que vous voyez sur la plupart des sites modernes.
• Espace entre les flèches : l'écart entre les deux boutons lorsqu'ils sont assis ensemble au-dessus ou au-dessous du curseur.

Le résultat sur la page #

Prévisualiser ou publier, et le curseur fonctionne en direct : les logos tournent sur la minuterie de lecture automatique, répondent aux flèches et tirent leurs effets de survol et leurs info-bulles Voici la bande finie avec cinq logos par vue et une flèche de chaque côté.

Cas d'utilisation courants #

• Bandes de logo client sur les pages d'accueil des agences et des indépendants, chaque logo étant lié à une étude de cas.
• Carrousels partenaires et sponsors pour les pages d'intégration d'événements, d'organisations à but non lucratif et de SaaS.
• Les“Tels que présentés dans les barres de presse” avec les logos de publication reliant à la couverture.
• Présentoirs de marques sur les sites de distributeurs et de détaillants répertoriant les étiquettes qu'ils portent.
• Piles technologiques sur les sites de portefeuille, en utilisant des info-bulles pour nommer chaque outil.

Conseils pour un meilleur curseur de logo #

• Gardez chaque logo de la même taille. Des dimensions mixtes font sauter la rangée lorsqu'elle glisse L'exportation de tous les logos sur des toiles identiques, telles que 300 par 150, maintient la bande stable.
• Utilisez le survol en niveaux de gris à couleur. Définissez une image principale en niveaux de gris et la version couleur comme image du logo Hover. La bande reste silencieuse jusqu'à ce que les visiteurs interagissent avec elle.
• Activez Pause sur Hover avec lecture automatique. Personne ne peut lire une info-bulle sur une cible en mouvement.
• Cacher les flèches sur mobile. Le glissement les remplace et la bande reste propre sur les petits écrans.
• Faites correspondre les diapositives par colonne à la largeur du logo. Les logos de mots-clés larges nécessitent moins de colonnes que les marques d'icônes compactes. Si un logo semble pressé, réduisez le nombre d'un avant de toucher les fichiers image.

Foire aux questions #

Envelopper #

Le widget Logo Slider couvre l'ensemble du travail d'un carrousel de logo client dans Elementor : un répéteur pour les logos, les liens par logo et les effets de survol, les info-bulles, la lecture automatique avec boucle et le style jusqu'aux boutons fléchés. Pour les curseurs photo et galerie, regardez le Carrousel d'images et Galerie Slider widgets. Parcourir l'ensemble complet de Widgets et extensions Master Addons& voir le page de tarification pour ce que Pro ajoute en haut.