Logo-Slider

Eine Wand aus Client-Logos drückt den Rest Ihrer Seite nach unten und zeigt immer noch nur eine Handvoll Marken an Ein Logo-Slider passt die ganze Liste in einen kompakten Streifen, der sich von selbst dreht Die Logo-Slider Widget in Master-Addons für Elementor Erstellen Sie diesen Streifen aus einem beliebigen Satz von Logo-Bildern und fügen Sie dann Hover-Effekte, Tooltips, Autoplay und Navigationspfeile ohne separates Schieberegler-Plugin hinzu.

Jedes Logo kann auf die Seite des Kunden verlinken, im Hover zu einem zweiten Bild tauschen oder den Markennamen und eine kurze Beschreibung preisgeben. Dieser Leitfaden geht durch das Widget vom ersten Ziehen auf die Leinwand bis zum fertigen Karussell auf der Live-Seite.

Was das Logo Slider Widget macht #

Das Widget nimmt eine Liste mit Logo-Bildern und macht daraus ein responsives, automatisch spielendes Karussell, Sie steuern, wie viele Logos gleichzeitig angezeigt werden, wie schnell sie sich drehen und was passiert, wenn ein Besucher über einem schwebt. Es läuft auf der Swiper-Engine, sodass der Schieberegler von Anfang an berührungsfreundlich auf Telefonen und Tablets ist.

Es befindet sich in der Slider Widgets-Gruppe der Master Addons, neben dem Bild Karussell und Galerie-schieber Widgets. Diese beiden sind für Fotos und Galerien gebaut Der Logo Slider ist für Markenzeichen gebaut: Logos bleiben klein, gleichmäßig verteilt und in einer einzigen Reihe ausgerichtet.

Bevor Sie beginnen #

• WordPress Mit Elementor Installiert und aktiv.
• Master-Addons für Elementor Installiert und aktiv Neu im Plugin? siehe die Installationsführung.
• Ihre Client - oder Partnerlogos bereit als Bilddateien Logos mit den gleichen Abmessungen sehen am besten aus; etwas um die 300 mal 150 Pixel mit transparentem oder weißem Hintergrund funktioniert gut.

So fügen Sie das Logo Slider Widget hinzu #

Öffnen Sie im Elementor-Editor die Elemente Panel und suchen nach Logo-Slider‘oder scrollen Sie zum Abschnitt Master Addons Ziehen Sie das Widget auf Ihre Seite Es wird mit sechs Platzhalterelementen namens Brand Name geladen, so dass Sie die Schiebereglerform sofort sehen und die Platzhalter einzeln ersetzen.

Fügen Sie Ihre Logos im Bereich Logo-Elemente hinzu #

In der Inhalt Tab, öffnen Logo-elemente. Jeder Eintrag in der Liste ist ein Logo Klicken Sie auf ein Element, um es zu erweitern, oder verwenden Sie die Symbole zum Kopieren und Löschen rechts in jeder Zeile Die Artikel hinzufügen Button unten erweitert die Liste auf so viele Logos, wie Sie benötigen.

Unter der Artikelliste sitzen drei Einstellungen, die für den gesamten Schieberegler gelten:

• Bildauflösung: Die Größe WordPress dient für jedes Logo, von Miniaturansicht bis Voll Logos sind kleine Dateien, sodass Full normalerweise in Ordnung ist.
• Titel HTML Tag: Das Überschriften-Tag umschlang den Markennamen im Hover, standardmäßig H5. Wählen Sie ein Tag, das zur Überschriftenstruktur Ihrer Seite passt.
• Wählen Sie Ereignis: Was den Hover-Effekt auslöst Wie das Panel anmerkt, wird dieser nur ausgelöst, wenn ein Hover-Typ auf dem Client-Logo aktiviert ist.

Klicken Sie in jedem Element auf die Kundenlogo Feld zum Öffnen der WordPress-Mediathek Laden Sie Ihre Logodateien hoch oder wählen Sie bereits dort aus. Das Anhangspanel zeigt die Dateimasse an und ist praktisch für die Überprüfung, ob alle Logos die gleiche Größe haben.

Legen Sie den Link- und Hover-Effekt für jedes Logo fest #

Jeder Logo-Artikel trägt seinen eigenen Link Feld. Fügen Sie die URL des Clients ein und das Logo wird auf der Live-Seite anklickbar Das Zahnrad-Symbol öffnet die üblichen Elementor-Linkoptionen, wie z.B. das Öffnen in einem neuen Tab.

Die Schweben? Dropdown entscheidet, was passiert, wenn ein Besucher die Maus über das Logo bewegt Es hat drei Modi:

• Keine: Das Logo sitzt einfach da Sauber und schlicht.
• Text: Das Logo verblasst und ein Markenname Plus kurz Beschreibung An seiner Stelle erscheinen.
• Bild: Das Logo wird auf ein zweites Bild ausgetauscht, das Sie auswählen.

Mit Text Ausgewählt erscheinen zwei Felder Geben Sie den Markennamen und eine einzeilige Beschreibung ein, und das Widget zeigt sie über dem Logo auf hover Dies passt zu Agenturen, die sagen wollen, was sie für jeden Kunden getan haben, ohne den Schieberegler zu verlassen.

Mit Bild Ausgewählt, a Hover-Logo-Bild Feld erscheint stattdessen Ein üblicher Trick: Verwenden Sie ein Graustufenlogo als Hauptbild und die Vollfarbversion als Schwebebild, sodass Logos leuchten, wenn sich Besucher über den Streifen bewegen.

Fügen Sie einem Logo einen Tooltip hinzu #

Jeder Artikel hat auch eine Tooltip Umschalten Schalten Sie es ein und eine kleine Blase erscheint, wenn Besucher mit der Maus über dieses Logo fahren Die Einstellungen Tab steuert das Verhalten:

• Inhalt: Der Text im Tooltip.
• Platzierung: Wo die Blase sitzt, standardmäßig oben.
• Folgen Cursor: Lassen Sie den Tooltip der Maus folgen, anstatt fixiert zu bleiben.
• Animation und Auslöser: Wie der Tooltip erscheint, Skalieren Sie standardmäßig mit dem Mauszeiger.

Die Stil Tab neben Einstellungen styles die Blase selbst: Farben, Typografie, und Abstände Tooltips funktionieren gut für kurze Labels wie “Partner seit 2019”, die nicht den Volltext-Hover-Modus benötigen.

Richten Sie die Navigationspfeile ein #

Öffnen Sie die Navigation Abschnitt, um zu steuern, wie Besucher den Schieberegler von Hand bewegen Die Navigation Dropdown legt den Steuertyp fest, wobei Pfeile die Standardauswahl sind.

• Scrollbar anzeigen?: Fügt eine ausziehbare Leiste unter dem Schieberegler hinzu.
• Pfeilposition: Center legt einen Pfeil auf jede Seite des Schiebers Oben Mitte oder unten Mitte gruppiert beide Pfeile darüber oder darunter.
• Platzierung: Behält die Pfeile im Inneren des Schiebereglers oder bewegt sie außerhalb davon.
• Pfeil auf Mobilgeräten ausblenden?: Lassen Sie die Pfeile auf kleinen Bildschirmen fallen, wo das Wischen die Aufgabe erfüllt.
• Nächstes Symbol und vorheriges Symbol: Tauschen Sie die Standard-Chevrons gegen ein beliebiges Symbol in der Elementor-Bibliothek aus.

Das Karussellverhalten abstimmen #

Die Karusselleinstellungen Abschnitt treibt die Bewegung des Schiebers an Hier wird eine statische Logosreihe zu dem Drehstreifen, den Besucher erwarten.

• Folien pro Spalte: Wie viele Logos auf einmal anzeigen, von 1 bis 6. Vier oder fünf passen zu den meisten Desktop-Layouts, und mit dem responsiven Symbol können Sie eine kleinere Anzahl pro Gerät festlegen.
• Layout: Karussell ist der Standard-Flachschieber.
• Autohöhe: Lassen Sie die Schieberhöhe der Logoreihe folgen.
• Autoplay- und Autoplay-Geschwindigkeit: Dreh die Logos automatisch Die Geschwindigkeit ist die Verzögerung in Millisekunden, 5000 bedeutet also alle fünf Sekunden einen neuen Satz.
• Pause bei Hover: Stoppt die Drehung, während sich der Cursor über dem Schieberegler befindet, der gut mit Hover-Effekten und Tooltips gekoppelt ist.
• Folien zum Scrollen: Wie viele Logos pro Schritt vorankommen.
• Mittelfolie, Greif Cursor, Drag Free Mode: Zentrieren Sie das aktive Logo, zeigen Sie einen Greifercursor oder lassen Sie Besucher den Streifen frei werfen.
• Schleife: Schieberegler endlos laufen lässt, was ein Logo-Streifen fast immer will Eines zum Anschauen: Schleife braucht mehr Logos als die Slides pro Spaltenanzahl Bei fünf Spalten und nur fünf Logos gibt es nichts extra zum Drehen.

Stil des Logo-Sliders #

Wechseln Sie zu den Stil Tab. Vier Abschnitte behandeln das Aussehen des Schiebereglers: Karussellgegenstände, Karussellgegenstände mit dem Mauszeiger, Symbol und Navigation.

Karussellartikel #

Dieser Abschnitt umrahmt jede Logozelle mit Normal-, Hover- und Aktivzuständen.

• Hintergrund, Grenztyp, Grenzradius, Kastenschatten: Geben Sie jedem Logo einen Rahmen im Kartenstil oder lassen Sie alles leer, um einen sauberen Streifen zu erhalten.
• Polsterung und Artikellücke: Raum innerhalb jeder Zelle und der Abstand zwischen den Logos Der Spalt ist der schnellste Weg, einen überfüllten Streifen zum Atmen zu bringen.
• Schattenmodus und Opazität: Weiche Kantenschatten und Transparenz für die Logos.

Karussellartikel schweben #

In diesem Abschnitt wird der Hover-Status, den Sie in der Registerkarte Inhalt ausgewählt haben, einschließlich der Textüberlagerung, gestylt.

• Hintergrund, Rand, Kastenschatten, Polsterung, Rand: Der Rahmen um ein schwebendes Logo.
• Name Farbe, Name Typografie, Abstand: Der Markennamentext, der im Text-Hover-Modus angezeigt wird.

Symbol #

Der Symbolabschnitt gestaltet das angezeigte kleine Symbol mit Hover-Inhalt: Farbe, Hintergrund, Rand, Polsterung, Rand und Schriftgröße.

Navigationspfeile #

Im Navigationsbereich werden die Pfeiltasten mit separaten Normal- und Hover-Zuständen gestaltet.

• Farbe und Hintergrund: Die Pfeilglyphe und den Knopf dahinter.
• Randtyp, Randradius, Polsterung, Größe: Form die Knöpfe; ein voller Radius macht die runden Knöpfe, die Sie auf den meisten modernen Seiten sehen.
• Raum zwischen Pfeilen: Der Spalt zwischen den beiden Tasten, wenn sie über oder unter dem Schieber zusammensitzen.

Das Ergebnis auf der Seite #

Vorschau oder Veröffentlichung, und der Schieberegler läuft live: Logos drehen sich auf dem Autoplay-Timer, reagieren auf die Pfeile, und feuern ihre Hover-Effekte und Tooltips Hier ist der fertige Streifen mit fünf Logos pro Ansicht und einem Pfeil auf jeder Seite.

Häufige Anwendungsfälle #

• Kundenlogostreifen auf Agentur - und Freelancer-Homepages, wobei jedes Logo auf eine Fallstudie verlinkt.
• Partner und Sponsor Karussells Für Veranstaltungen, gemeinnützige Organisationen und SaaS-Integrationsseiten.
• “Wie in” Presseleisten dargestellt Mit Veröffentlichungslogos, die auf die Berichterstattung verweisen.
• Markenvitrinen Auf Händler- und Einzelhändlerseiten, auf denen die Etiketten aufgeführt sind, die sie tragen.
• Technologiestapel Auf Portfolioseiten, Verwendung von Tooltips zur Benennung jedes Tools.

Tipps für einen besseren Logo-Slider #

• Behalten Sie jedes Logo in der gleichen Größe. Durch gemischte Abmessungen springt die Reihe beim Gleiten. Durch den Export aller Logos auf identischen Leinwänden, beispielsweise 300 x 150, bleibt der Streifen stabil.
• Verwenden Sie den Graustufen-zu-Farb-Schweber. Legen Sie ein Graustufen-Hauptbild und die Farbversion als Hover-Logo-Bild fest. Der Streifen bleibt ruhig, bis Besucher damit interagieren.
• Schalten Sie Pause auf Hover mit Autoplay ein. Niemand kann einen Tooltip auf einem sich bewegenden Ziel lesen.
• Pfeile auf dem Handy ausblenden. Durch Wischen werden sie ersetzt und der Streifen bleibt auf kleinen Bildschirmen sauber.
• Passen Sie Folien pro Spalte der Logobreite an. Wide wordmark logos benötigen weniger Spalten als kompakte Icon-Markierungen, wenn ein Logo gequetscht aussieht, lassen Sie die Zählung um eins fallen, bevor Sie die Bilddateien berühren.

Häufig gestellte Fragen #

Einwickelnd #

Das Logo Slider Widget deckt den ganzen Job eines Client-Logo-Karussells in Elementor ab: ein Repeater für die Logos, Per-Logo-Links und Hover-Effekte, Tooltips, Autoplay mit Loop, und Styling bis hinunter zu den Pfeiltasten Für Foto - und Galerie-Slider, schauen Sie sich die Bild Karussell und Galerie-schieber Widgets. Durchsuchen Sie den gesamten Satz von Master Addons Widgets und Erweiterungen, und sehen Sie sich die an Preisseite Für das, was Pro oben hinzufügt.