Inhaltsverzeichnis
Die Master Addons Bildvergleichs-Widget Lassen Sie einen kostenlosen Vorher-Nachher-Slider in jede Elementor-Seite, kein Elementor Pro und kein zusätzliches Plugin-Abonnement fallen. Sie installieren Master-Addons, ziehen das Widget auf Ihre Seite, laden zwei Bilder hoch und Besucher erhalten einen ausziehbaren Griff, der zwischen ihnen wischt.
Diese Anleitung geht durch jede Einstellung: Aktivieren des Widgets, Hinzufügen zu einer Seite, die Maßregel, die fast jeden bei seinem ersten Versuch auslöst, Orientierung, das sichtbare Verhältnis, Grifftyp, Styling und was zu tun ist, wenn sich der Schieberegler auf dem Handy falsch verhält Weitere Vorher-Nachher-Designideen, sobald die Mechanik klickt, finden Sie im Vollständiger Vorher-Nachher-Showcase-Leitfaden.
Was Sie brauchen, bevor Sie beginnen
- WordPress mit Elementor installiert und aktiv Die kostenlose Version von Elementor reicht.
- Master Addons für Elementor installiert und aktiv Der kostenlose Plan deckt dieses Widget ab Siehe die Installationsführung Wenn das Plugin für Sie neu ist.
- Zwei Bilder auf genau die gleichen Pixelabmessungen zugeschnitten Mehr darüber, warum es in einem Moment wichtiger ist, als die Leute erwarten.
Schritt 1: Aktivieren Sie das Bildvergleichs-Widget
Master Addons wird mit Dutzenden von Widgets ausgeliefert, und nicht alle werden standardmäßig bei jeder Installation geladen Gehe zu Master-Addons → Widgets In Ihrem WordPress-Dashboard und bestätigen Bildvergleich Einschaltet ist, wenn es einen Moment später nicht im Elementor's Elements Panel auftaucht, ist dies fast immer der Grund.
Schritt 2: Fügen Sie das Widget zu Ihrer Seite hinzu
Öffnen Sie eine Seite mit Elementor, suchen Sie im Elements-Panel nach Bildvergleich (suchen Sie nach dem lila MA-Abzeichen), und ziehen Sie es auf Ihre Seite Es wird mit zwei Platzhalterbildern und einem funktionierenden Schieberegler geladen, sodass Sie das Layout sehen können, bevor Sie eine einzelne Einstellung berühren.
Schritt 3: Laden Sie Ihre Vorher-Nachher-Bilder hoch
Öffnen Sie die Inhalt Tab, dann die Bilder Abschnitt. Es hat eine Vorher Tab und ein Nach Tab, und jedes hat sein eigenes Bildfeld, Etikettenfeld und Bildauflösungseinstellung Wählen Sie das Vorher-Foto auf der Registerkarte Vorher ein, wechseln Sie zu Nachher, und setzen Sie das zweite Foto Es ist einfach, beide Bilder versehentlich auf dieselbe Registerkarte hochzuladen, also überprüfen Sie, welche Registerkarte aktiv ist, bevor Sie ein Bild auswählen.
Geben Sie auf jedem Tab ein kurzes Label ein, wenn Sie eine Überlagerungsbeschriftung wünschen, etwa “Vorher” und “Nachher” oder “Altes Design” und “Neu gestalten”
Die Regel, die alle auslöst: Passende Bilddimensionen
Beide Bilder müssen genau die gleichen Pixelabmessungen, die gleiche Breite und die gleiche Höhe haben, wenn ein Foto 1600 ×1000 und das andere 1200 ̄FT800 ist, streckt oder schneidet der Schieber einen davon, um zu passen, und der Vergleich sieht verzerrt oder falsch ausgerichtet aus, sobald jemand den Griff zieht.
Beheben Sie dies, indem Sie beide Bilder vor dem Hochladen in identische Abmessungen schneiden, in welchem Editor Sie normalerweise verwenden oder mit dem WordPress-eigenen Eingebauter Bildbearbeiter Nach dem Upload hilft das Festlegen einer festen Bildauflösung auf beiden Tabs im Widget, es wird jedoch kein völlig anderes Seitenverhältnis zwischen den beiden Quellfotos behoben.
Schritt 4: Legen Sie die Ausrichtung fest
Im Abschnitt Einstellungen wechselt der Orientierungs-Kipphebel zwischen einem vertikalen Split (Links-Rechts-Wisch, die Voreinstellung) und einem horizontalen Split (Ober-Unter-Wisch) Vertikal passt zu weiten Landschaftsaufnahmen Horizontal liest sich normalerweise besser für große oder Porträtbilder, da ein schmaler Links-Rechts-Spaltband nicht genug von einem hohen Foto auf einmal zeigt.
Schritt 5: Legen Sie das sichtbare Verhältnis und den Grifftyp fest
Visible Ratio setzt, wo der Griff sitzt, wenn die Seite lädt, in Prozent Öffnen Sie es um 50% für einen neutralen ersten Eindruck, oder starten Sie es näher an einer Seite, wenn Sie möchten, dass das Vorher-Nachher-Bild bei Belastung dominiert.
Move Handle entscheidet, was die Folie auslöst: Ziehen oder Wischen, Klicken oder Schweben. Drag funktioniert gut auf dem Desktop, wo Besucher erwarten, zu greifen und zu ziehen. Hover fühlt sich auf einer Maus schick an, kann aber bei Touch-Benutzern, die überhaupt nie mit dem Mauszeiger fahren, fehlzünden. Ziehen/Wischen oder Klicken ist daher die sicherere Standardeinstellung, wenn ein Großteil Ihres Datenverkehrs mobil ist.
Schritt 6: Gestalten Sie den Slider
Die Registerkarte Stil umfasst Layout-Stil (Grenze, Radius, Kastenschatten um das gesamte Widget), Griff (Farbe, Größe, Symbol) und Etikett (Per-Seiten-Farbe, Typografie, Hintergrund und Abstand für die Beschriftungsüberlagerung). Nichts davon ändert die Funktionsweise des Schiebers, nur das Aussehen, sodass es sicher ist, einen ersten Durchgang zu überspringen und zurückzukommen, sobald die Mechanik stimmt.
Mobil- und Touch-Verhalten
Elementor ist standardmäßig responsive, so ändert das Widget ohne extra Setup die Größe mit dem Viewport, was eigentlich auf einem Telefon getestet werden muss, ist die Einstellung Handle verschieben Drag and Wipe funktioniert natürlich mit einem Finger, und Klick funktioniert auch Hover existiert nicht auf einem Touchscreen, so dass ein Schieberegler, der auf Hover eingestellt ist, einfach still für mobile Besucher steht und nur das startende Visible Ratio ohne Möglichkeit zum Verschieben anzeigt.
Elementoreigener Leitfaden zum Responsive Design Deckt die Breakpoint-Grundlagen ab, wenn Sie auch die Größe des Widgets selbst für Tablets oder Mobiltelefone ändern müssen, getrennt vom Griffverhalten.
Master-Addons vs. andere Elementor-Vergleichsoptionen
| Option | Kosten | Orientierungssteuerung | Griffauslöser |
|---|---|---|---|
| Master Addons Bildvergleich | Kostenlos | Horizontal & vertikal | Ziehen/wischen, klicken, schweben |
| Bildvergleich wesentlicher Add-ons | Kostenlose Stufe verfügbar | Ja | Ziehen |
| Vorher-nach-Bild-Vergleichs-Slider (WordPress.org) | Kostenloses, eigenständiges Plugin | Begrenzt | Ziehen |
| Elementor Pro (Muttersprachler) | Kein eingebautes Widget | Nicht anwendbar | Nicht anwendbar |
Elementor core, frei oder Pro, hat kein eigenes natives Bildvergleichs-Widget, welchen Weg Sie auch nehmen, Sie installieren so oder so ein Drittanbieter-Widget, also der ehrliche Vergleich ist zwischen diesen Widgets, nicht zwischen einem Plugin und “integriertem Elementor”
Fehlerbehebung bei häufigen Problemen
- Widget fehlt im Elements-Panel: Überprüfen Sie Master-Add-ons → Widgets erneut und bestätigen Sie, dass der Bildvergleich aktiviert ist.
- Slider sieht gestreckt oder schief aus: Die beiden Bilder haben nicht die gleichen Pixelabmessungen; Zuschneiden Sie sie passend.
- Griff wird sich auf einem Telefon nicht bewegen: Der Verschiebungsgriff ist auf Verschieben eingestellt; Schalten Sie es auf Ziehen/Wischen oder Klicken.
- Etiketten werden nicht angezeigt: Bestätigen Sie, dass der Overlay-Umschalter in den Einstellungen aktiviert ist und dass auf beiden Registerkarten tatsächlich ein Label eingegeben wurde.
Wenn Ihnen diese Drag-to-Reveal-Interaktion gefällt, ist die Bild Hotspot Widget und die Widget für Bild-Hover-Effekte Verwenden Sie ein ähnliches Hover-and-Click-Muster zum Kommentieren oder Animieren von Bildern.
Häufig gestellte Fragen
Wie macht man einen Bildschieberegler in Elementor?
Installieren Sie ein Widget, das es unterstützt, da weder kostenlos noch Pro Elementor nativ eines ausliefert Das kostenlose Master Addons Plugin fügt ein Bildvergleichs-Widget hinzu, das Sie auf die Seite ziehen, dann laden Sie zwei Bilder hoch und legen die Ausrichtung, das Verhältnis und den Handle aus den Abschnitten Inhalt und Einstellungen fest.
Wie füge ich einen Bilderschieber in WordPress hinzu?
Installieren Sie Elementor plus ein Widget-Plugin wie Master Addons, und ziehen Sie dann das Bildvergleichs-Widget auf eine beliebige Seite. Es funktioniert im Elementor-Editor und nicht über einen separaten WordPress-Einstellungsbildschirm, sodass kein Shortcode gespeichert werden kann.
Wie macht man einen Vorher-Nachher-Bildschieber?
Laden Sie ein Vorher-Bild und ein Nachher-Bild mit identischen Pixelabmessungen in die Vorher-Nachher-Registerkarten des Widgets hoch und wählen Sie dann die vertikale oder horizontale Ausrichtung. Das Widget generiert den ausziehbaren Teiler automatisch, Sie entwerfen diesen Teil nicht selbst.
Wie zeigt man vorher und nachher auf einer Folie?
Ein Vorher-Nachher-Schieber stapelt die beiden Bilder im selben Rahmen mit einem Trenner dazwischen, so ersetzt eine Folie zwei statische Bilder Besucher ziehen oder tippen auf den Griff, um den Trenner zu bewegen und mehr von dem einen oder anderen Bild zu enthüllen.
Wie bearbeite ich einen Schieberegler in Elementor?
Wählen Sie das Bildvergleichs-Widget auf der Leinwand und seine Einstellungen öffnen sich im linken Bereich Die Registerkarte Inhalt enthält die Bilder und Beschriftungen, und die darunter liegenden Abschnitte Einstellungen und Stil steuern das Verhältnis, das Griffverhalten und das visuelle Styling. Ändert die Vorschau live auf der Leinwand.
Wie kann man vergleichen, wenn zwei Bilder gleich sind?
Das Bildvergleichs-Widget ist für eine visuelle, nebeneinander liegende Enthüllung und nicht für ein Diff auf Pixelebene konzipiert. Wenn Sie die beiden Bilder benötigen, um sich sauber auszurichten, was das Widget für ein sauberes Ergebnis benötigt, schneiden Sie sie vor dem Hochladen auf die gleiche Breite und Höhe zu, anstatt sich auf das Widget zu verlassen, um eine Nichtübereinstimmung zu erkennen.
Wie macht man ein Vorher-Nachher-Bild?
Sowohl die Vorher - als auch die Nachher-Version mit der gleichen Auflösung und dem gleichen Framing aufnehmen oder exportieren, passend zuschneiden, wenn sie sich nicht aneinanderreihen, dann beides in ein Vergleichs-Widget wie Master Addons Image Comparison hochladen Passendes Framing ist wichtiger als das Anpassen der Kameraeinstellungen für ein überzeugendes Ergebnis.
Verwandte Lektüre
