Statische Side-by-Side-Bilder werden Ihrer Arbeit nicht gerecht Ein Fotoschnitt, eine Hausrenovierung, eine Produkttransformation, sie alle verdienen etwas Besseres als zwei nebeneinander sitzende Bilder Ein Elementorbild-Vergleichsschieber Behebt das Besucher ziehen einen Griff über das Bild, um die Vorher-Nachher-Versionen selbst zu enthüllen, und dieses bisschen Interaktion hält sie länger auf Ihrer Seite.
Ich habe das Master Addons Image Comparison Widget auf Client-Landingpages verwendet, und es erhält durchweg mehr Engagement als statische Screenshots. Dieses Tutorial behandelt Einrichtung, Anpassung und einige Dinge, die es wert sind, vor der Veröffentlichung zu wissen Die Freies Elementor-Widget vor/nach dem Schieberegler Teil von Master Addons ist, sitzt es wie jedes andere Widget im Elementor-Panel und kann in etwa zwei Minuten ausgeführt werden.
Was dieser Leitfaden abdeckt:
- Was für ein Bildvergleichs-Slider ist
- Wer braucht einen Vorher/Nachher-Schieber
- Was man mit dem kostenlosen Widget bekommt
- So erstellen Sie eine (Schritt für Schritt)
- Tipps für einen besseren Vergleich
- Fehlerbehebung bei häufigen Problemen
- Master Addons vs. Alternativen
- Warum Master Addons
- Starten Sie durch
- Häufig gestellte Fragen
Was ist ein Bildvergleichs-Slider?
Ein Bildvergleichsschieber legt zwei Bilder übereinander mit einem dragierbaren Trenner dazwischen, Benutzer schieben es nach links und rechts (oder nach oben und unten), um ein Bild über das andere zu legenSie stellen ein “vorher” Bild und ein “nachher” Bild im Editor ein, den Rest übernimmt das Widget.
Diese haben Sie sicher schon auf Fotoportfolios, zahnmedizinischen Webseiten, oder Immobilienseiten gesehen, die Renovierungsprojekte zeigen, statt passiv zwei separate Fotos zu betrachten, interagieren Besucher physisch mit dem VergleichDiese Interaktion verlängert die Zeit auf der Seite, was Ihnen hilft SEO und senkt die Absprungraten.
Wer braucht einen Vorher-Nachher-Slider in Elementor?
Wer eine Transformation zeigen will Das sind die Anwendungsfälle, die mir am häufigsten begegnen:
Webdesigner und Agenturen
Website-Redesigns sehen in einem Vergleichs-Slider großartig aus Lassen Sie einen potenziellen Client zwischen dem alten und dem neuen Design ziehen, schafft Sie mehr Vertrauen, als es ein flacher Screenshot jemals tun wird Sie können dies mit dem koppeln Widget für Bild-Hover-Effekte Wenn Sie zusätzliche visuelle Vielfalt auf Portfolioseiten wünschen.
Fotografen und Fotoeditoren
Die wohl natürlichste Passform Wenn Sie Retusche, Farbkorrektur - oder Restaurierungsarbeiten durchführen, können potenzielle Clients mit einem Bildvergleichs-Slider genau sehen, was Sie tun können Rohdatei links, bearbeitete Version rechts Sagt mehr als jede Bildunterschrift könnte.
E-Commerce-Shops
Verkauf von Hautpflege, Reinigungsmitteln oder irgendetwas mit sichtbaren Ergebnissen? A Vorher nach dem Bildvergleich Auf Ihrer Produktseite überzeugender als ein Absatz Kopie Ich habe gesehen, dass das besonders gut funktioniert für Kosmetik - und Heimwerkerprodukte, bei denen der optische Unterschied dramatisch ist.
Immobilien und Architektur
Renovierungsprojekte passen natürlich zusammen Mach ein Foto bevor die Arbeit losgeht, mach ein anderes wenn es erledigt ist, lass beides in das Vergleichs-Widget fallen Dein Portfolio wird interaktiver, und Besucher neigen dazu mehr Zeit damit zu verbringen deine Projekte zu durchstöbern.
Digitale Vermarkter
Analytics Dashboards, Anzeigenleistung, Website Traffic Charts Zeigen Sie die Ergebnisse “bevor Sie mit uns arbeiten” und “nach der Zusammenarbeit mit uns” mit einem Drag-to-Compare-Slider Funktioniert besser, als zwei Screenshots in eine Fallstudie einzufügen.
Master Addons Bildvergleich Widget: Was Sie bekommen
Es gibt mehrere Möglichkeiten, eine hinzuzufügen Vorher nach dem Schieberegler in Elementor. Einige erfordern eigenständige Plugins, einige benötigen benutzerdefinierten Code und einige sind hinter Premium-Addon-Abonnements gesperrt. Master-Addons enthalten die Bildvergleichs-Widget In der kostenlosen Version Beachtenswert, da die meisten konkurrierenden Addons (Ultimate Addons, PowerPack, The Plus Addons) dieses Feature hinter eine Paywall stellen.
Das Widget beinhaltet:
- Native Elementorintegration: Ziehen und Ablegen aus dem Elementor-Panel Keine Shortcodes, keine separate Einstellungsseite Installieren Sie aus dem WordPress Plugin Repo Und es wird sofort in Ihrer Widget-Liste angezeigt.
- Kostenlos zu verwenden: Das Bildvergleichs-Widget ist Teil der kostenlosen Version Keine Pro-Lizenz erforderlich.
- Griffsteuerung: Maus-Drag and Wipe in der kostenlosen Version Mouse Move (hover) und Mouse Click Griffe werden mit Master Addons Pro geliefert Es werden sowohl horizontale als auch vertikale Vergleichsorientierungen unterstützt.
- Benutzerdefinierte Etiketten: Ändern Sie den Text “Vor” und “Nachher” in alles, was Sie wollen, in jeder Sprache Etikettenfarben, Typografie und Positionierung sind alle einstellbar.
- Responsiv: Funktioniert auf Desktop, Tablet und Mobilgeräten. Touch- und Wischgesten funktionieren auf Mobilgeräten.
Master Addons hat 80+ Widgets und Erweiterungen Gesamt. Das Bildvergleichs-Widget ist eines, das bei Landingpage - und Portfolio-Projekten viel auftaucht.
So erstellen Sie einen Vorher-Nachher-Schieberegler in Elementor (Schritt für Schritt)
Bevor du anfängst, brauchst du beides Elementor Und Master Addons installiert und aktiviert Beides ist kostenlos Gehe zu Plugins > Neues hinzufügenSuchen Sie nach jedem Pluginnamen, installieren Sie ihn und aktivieren Sie ihn.
Schritt 1: Aktivieren Sie das Bildvergleichs-Widget
Das Bildvergleichs-Widget ist standardmäßig aktiviert Wenn Sie einige Widgets ausgeschaltet haben, um Ihr Panel schlank zu halten, überprüfen Sie, ob es noch eingeschaltet ist Gehen Sie zu Master-Addons > Add-ons & Erweiterungen In Ihrem WordPress-Dashboard und bestätigen Bildvergleich wird umgeschaltet Die Bildvergleichsdokumentation Vollständige Setup-Details hat Während Sie in diesem Dashboard sind, werden Sie vielleicht andere Widgets bemerken, die es wert sind, eingeschaltet zu werden, wie Animierte Überschrift oder Galerie-schieber.
Schritt 2: Öffnen Sie eine Seite in Elementor
Eine neue Seite erstellen oder eine bestehende mit Elementor öffnen, ich habe für dieses Tutorial eine neue Landingpage erstellt, aber der Vergleichsschieberegler fällt auf die gleiche Weise in jede vorhandene Seite.
Schritt 3: Fügen Sie das Bildvergleichs-Widget hinzu
Suchen Sie im Elementor-Panel links nach “Bildvergleich” (daneben sehen Sie das Symbol Master Addons) Ziehen Sie das Widget in Ihre Seite, wo immer der Schieberegler angezeigt werden soll.
Schritt 4: Laden Sie Ihre Vorher-Nachher-Bilder hoch
Klicken Sie auf das Widget und Sie sehen zwei Bilder-Upload-Felder: eines für das Vorher-Bild, eines für das Nachher-Bild Laden Sie beide hoch, und die Vorschau aktualisiert sofort mit dem Trenngriff in der Mitte.
Schnelle Heads-up: Beide Bilder sollten die gleichen Abmessungen haben. Wenn das eine 1200 ×800 und das andere 900 ×600 ist, schaut das Layout ab Schneiden Sie sie vor dem Hochladen auf die gleiche Größe Dies bringt die Leute mehr als alles andere auf den Punkt.
Schritt 5: Anpassen des Etikettentextes
Auf den Standard-Labels steht “Before” und “After,” aber man kann diese in alles ändern Produkt verkaufen? “Ohne” und “Mit” Renovieren anzeigen verwenden? “Tag 1” und “Ferished” ausprobieren Die Labelfelder akzeptieren jeden Text, auch nicht-englische Zeichen, also ist die Lokalisierung kein Problem.
Schritt 6: Konfigurieren der Schiebereglereinstellungen
Im Bereich Einstellungen des Reiters Inhalt gibt es noch einige weitere Optionen, die es wert sind, angepasst zu werden:
- Ausrichtung: Wechseln Sie zwischen horizontalem (links/rechts) und vertikalem (oben/unten) Vergleich.Horizontal ist die Standardeinstellung und funktioniert in den meisten Fällen.
- Sichtbarkeitsverhältnis: Steuert, wo der Teiler startet Setzen Sie ihn auf 50% für eine zentrierte Aufteilung, oder verschieben Sie ihn, um zunächst mehr von einem Bild anzuzeigen.
- Overlay: Die Overlay-Ebene, die die Bezeichnungen Vorher und Nachher enthält, ein - oder ausblenden. Seine Farbe wird im Tab Stil eingestellt.
- Griff bewegen: Mouse Drag/Swipe ist kostenlos und funktioniert auf Desktop - und Touchscreens Mouse Move (der Griff folgt dem Cursor) und Mouse Click sind Pro-Optionen Mouse Move fühlt sich auf dem Desktop flüssig an, aber Touchscreens haben keinen Hover, also behalten Sie Drag/Swipe bei, wenn ein Großteil Ihres Traffics mobil ist.
Wählen Sie die Ausrichtung für große oder weite Fotos
Horizontal (links und rechts) passt zu weiten Landschaftsaufnahmen wie z.B. Zimmer, Webseiten und Straßenansichten Vertikal (oben und unten) liest sich meist besser bei hohen oder Portraitbildern, denn ein schmaler linker und rechter Streifen zeigt nicht genug von einem hohen Foto auf einmal, legen Sie sowohl auf der Vorher - als auch auf der Nachher-Reiter eine feste Bildauflösung fest, damit die beiden Bilder gleich groß geladen werden.
Schritt 7: Gestalten Sie den Slider
Wechseln Sie zur visuellen Anpassung auf die Registerkarte Stil Sie können die Farbe und Größe der Griffstange ändern, die Griffbox stylen, einen Rand und eine Polsterung um den Vergleichsbehälter herum hinzufügen und Etikettenfarbe, Typografie, Rand und Abstand anpassen Randradius und Box Shadow auf dem Behälter sind Pro-Optionen Verbringen Sie hier ein paar Minuten, um das Design Ihrer Website zu treffen. Es gibt genügend Kontrolle, dass Sie am Ende keinen generisch aussehenden Schieberegler erhalten.
Hit Publish und Ihr Vorher nach dem Slider Live ist Etwa zwei Minuten von Anfang bis Ende, vorausgesetzt, Ihre Bilder sind fertig.
Tipps für einen besseren Bildvergleich
Das Widget übernimmt die technische Seite, aber der Vergleich selbst ist nur so gut wie Ihr Setup. Ein paar Dinge habe ich beim Erstellen dieser auf Client-Sites aufgegriffen:
Passen Sie Ihre Bildabmessungen an
Ich habe das schon erwähnt, aber es ist der Fehler, den ich am häufigsten sehe Wenn dein Vorher-Bild 1920 ×1080 ist und dein Nachher-Bild 800 ×600, zwingt der Schieber sie zum Ausrichten und das Ergebnis sieht verzerrt aus Beide Bilder vor dem Hochladen auf genau die gleichen Pixelmaße schneiden Jedes Mal.
Halten Sie die Zusammensetzung ähnlich
Machen Sie beide Fotos aus dem gleichen Winkel, gleicher Entfernung, gleicher Einrahmung, ist Ihr Vorher-Foto eine weite Aufnahme und das Nachher eine Nahaufnahme, landet der Kontrast nicht so, wie Sie es sich wünschen Der Schieberegler sieht am besten aus, wenn der einzige Unterschied zwischen den beiden Bildern die tatsächliche Veränderung ist.
Zentrieren Sie die Transformation
Setzen Sie die sichtbarste Änderung in die Nähe der Bildmitte Dort beginnt der Teiler, also fällt es den Leuten als erstes auf, wenn sie mit dem Schieber interagieren, wenn die Änderung auf eine Seite aus ist, passen Sie das Sichtbarkeitsverhältnis an, um darauf aufmerksam zu machen.
Übertreiben Sie es nicht
Ein starker Vergleich pro Seitenabschnitt reicht schon Seiten mit fünf oder sechs übereinander gestapelten Schiebern habe ich gesehen, und es verwässert den Aufprall, such dir dein bestes Vorher-Nachher-Paar aus und zeig das mit, wenn du mehrere Vergleiche hast, dann organisiere sie in einem Filterbare Bildergalerie oder Bild Karussell Stattdessen.
Fügen Sie einen CTA in der Nähe hinzu
Wenn der Vergleich auf einer Verkaufs - oder Portfolioseite sitzt, lassen Sie direkt darunter einen Call-to-Action-Button fallen Jemand, der gerade eine beeindruckende Transformation durchgeschleppt hat, ist bereits engagiert Ein “Get a Free Quote” oder “Shop Now” Button genau dort konvertiert tendenziell gut.
Fehlerbehebung: Wenn sich der Slider nicht verhält
Die meisten Setups funktionieren einfach, aber ein paar Dinge bringen die Leute zum Stolpern. So repariere ich die, nach denen ich gefragt werde.
- Der Schieberegler taucht nicht auf. Neun von zehn Fällen wurde das Widget deaktiviert Gehen Sie zu Master-Addons, dann Addons und Erweiterungen, und bestätigen Bildvergleich ist umgeschaltet Wenn es an ist und immer noch fehlt, löschen Sie Ihren Cache (LiteSpeed, WP Rocket oder Cloudflare), damit eine alte Kopie der Seite nicht mehr bedient wird.
- Der Griff zieht nicht. Dies ist fast immer ein JavaScript-Konflikt oder ein Caching-Plugin, das das Skript des Widgets kombiniert oder verschoben hat Master Addons Skripte von JS combine and defer, cleare the cache, and test again ausschließen.
- Die beiden Bilder wirken gestreckt oder falsch ausgerichtet. Es sind unterschiedliche Dimensionen Sowohl identische Pixelabmessungen zuschneiden als auch neu hochladen, das ist die häufigste Ursache.
- Es funktioniert auf dem Desktop, aber nicht auf dem Handy. Überprüfen Sie, ob kein überlaufversteckter Container den Touch-Bereich beschneidet und dass nichts über dem Schieberegler sitzt, der den Wisch auffängt. Touch funktioniert sofort, sodass ein Wischfehler fast immer ein Layout- oder Z-Index-Problem ist.
- Die Vorher-Nachher-Etiketten werden abgeschnitten. Kürzen Sie den Beschriftungstext oder reduzieren Sie die Schriftgröße des Beschriftungs unter der Registerkarte Stil; Sehr lange Beschriftungen können auf kleinen Bildschirmen über das Bild hinauslaufen.
Wenn keiner von diesen es repariert, posten Sie die Details in der Support-Forum für Master Addons Mit deinem Theme und aktiven Plugins ist es meist ein Konflikt, der sich schnell festnagelt.
Bildvergleichs-Widget vs. Alternativen
Ein kurzer Blick darauf, wie Master Addons im Vergleich zu anderen Wordpress Bildvergleich Schieberegler Optionen für Elementor:
| Merkmal | Master Addons | Ultimative Addons (VAE) | ElementeKit | PowerPack |
|---|---|---|---|---|
| Kostenloses Bildvergleichs-Widget | Ja | Nein (nur Pro) | Ja | Nein (nur Pro) |
| Horizontal + vertikal | Ja | Ja | Ja | Ja |
| Benutzerdefinierter Beschriftungstext | Ja | Ja | Ja | Ja |
| Maus-Hover-Modus | Ja | Ja | Nein | Ja |
| Sichtverhältnisregelung | Ja | Ja | Nein | Ja |
| Mobile Berührung/Wischen | Ja | Ja | Ja | Ja |
| Gesamte Widgets im Add-on | 80+ | 40+ | 90+ | 60+ |
Der große Unterschied ist die freie Verfügbarkeit, wer nicht für ein Pro Addon bezahlen möchte, nur um einen Vorher-Nachher Slider zu bekommen, für den stehen Master Addons und ElementsKit zur Auswahl Master Addons beinhaltet auch Textüberlagerungstechniken und Bild-Hover-Effekte In der kostenlosen Ebene erhalten Sie also einen größeren Satz an Bildtools ohne Upgrade.
Warum Master-Addons für Ihren Bildvergleich?
Das Bildvergleichs-Widget ist eines von 80+ Elementen und Erweiterungen in Master-Addons für Elementor. Viele User installieren es für ein Widget und nutzen am Ende mehrere andere im selben Projekt So bin ich auch damit angefangen.
Über einzelne Widgets hinaus erhalten Sie eine Themenbauer Für benutzerdefinierte Header, Footer und Archivseiten. Es gibt eine Popup-builder Mit Exit-Intent und Scroll-Triggern Und ein Vorlagenbibliothek Mit vorgefertigten Abschnitten können Sie mit einem Klick importieren.
V3.0.0 ist deutlich schneller als ältere Versionen, das Plugin wird aktiv gepflegt und läuft auf 30.000+ WordPress-Seiten. Master Addons Pro Fügt den Widget Builder, den White Label-Modus und Premium-Unterstützung hinzu, wenn Sie diese sofort benötigen.
Beginnen Sie
Einrichten eines Vorher nach dem Bildvergleich Schieberegler In Elementor dauert ein paar Minuten mit Master Addons Kein Code, kein Premium Addon Kauf, kein separates Vergleichs-Plugin zu installieren Das Widget ist kostenlos, funktioniert mit jedem Elementor-Setup, und die Anpassung deckt alles ab von Beschriftungstext bis hin zu Trennfarbe.
Master Addons kostenlos herunterladen und probieren Sie das Bildvergleichs-Widget bei Ihrem nächsten Projekt aus. Wenn Sie mehr über Ihre Elementor-Builds benötigen, schauen Sie es sich an Die Pro-Pläne.
Verwandte Lektüre: Elementorbild Karussell Tutorial | Elementorfilterbare Galerie-Plugins | 25 Elementortext-über-Bild-Techniken
Am liebsten ansehen? hier ein kurzer walkthrough in Elementor:
Häufig gestellte Fragen
Wie füge ich einen Vorher-Nachher-Schieberegler in Elementor hinzu?
Master Addons installieren (kostenlos), Seite in Elementor öffnen, Bildvergleich-Widget im Panel suchen, und auf Ihre Seite ziehen, Vorher-Nachher-Bilder hochladen, Etiketten anpassen, wenn Sie wollen, und veröffentlichen Dauert etwa zwei Minuten.
Gibt es ein kostenloses Bildvergleichs-Widget für Elementor?
Ja. Master Addons enthält ein kostenloses Bildvergleichs-Widget mit horizontalen und vertikalen Modi, benutzerdefinierten Beschriftungen, einem Drag-and-Swipe-Griff und Stiloptionen. Hover-and-Click-Griffe, Containerrandradius und Box-Shadow benötigen Master Addons Pro.
Was ist das beste Vorher-Nachher-Slider-Plugin für WordPress?
Für Elementor-Benutzer ist Master Addons eine solide kostenlose Option mit nativer Integration und mehreren Steuerungsstilen. Wenn Sie nicht auf Elementor sind, arbeiten eigenständige Plugins wie BEAF (Before After Gallery) mit Gutenberg und anderen Buildern zusammen.
Wie erstellt man Vorher-Nachher-Bilder ohne Codierung?
Elementor mit dem Master Addons Image Comparison Widget verwenden Ziehen Sie es auf Ihre Seite, laden Sie zwei Bilder hoch, konfigurieren Sie Einstellungen aus dem visuellen Panel Kein Code an irgendeiner Stelle benötigt.
Kann ich den Bildvergleichs-Slider mobil verwenden?
Ja. Das Widget ist responsive und unterstützt Touch-Gesten Besucher wischen mit dem Finger über den Teiler, um Bilder zu vergleichen, genauso wie beim Ziehen auf dem Desktop.
Welche Größe sollten Vorher-Nachher-Bilder haben?
Beide Bilder müssen genau die gleichen Abmessungen haben.1200 ×800 oder 1920 ×1080 sind gängige Wahl Nicht übereinstimmende Größen bewirken, dass der Schieberegler sie zwangsweise ausrichtet, was den Vergleich verzerrt.
Wie mache ich einen horizontalen und vertikalen Bildvergleich?
Suchen Sie in den Widget-Einstellungen unter der Registerkarte Inhalt nach der Option Orientierung Wechseln Sie zwischen Horizontal (linker/rechter Teiler) und Vertikal (oberer/unterer Teiler) Horizontal ist die Voreinstellung.
Verlangsamt ein Bildvergleichsschieber meine Seite?
Nicht sinnvoll, solange Ihre Bilder optimiert sind Das Widget-Skript ist leicht; das eigentliche Gewicht sind die beiden Bilder selbst Servieren Sie sie als komprimiertes WebP in der Größe, die sie tatsächlich anzeigen, und halten Sie jedes um 150 KB oder weniger, und der Schieberegler fügt eine vernachlässigbare Ladezeit hinzu.
Warum funktioniert mein Bildvergleichs-Slider nach meiner Veröffentlichung nicht?
Fast immer Caching oder ein Skriptkonflikt Säubern Sie Ihren Seitencache (LiteSpeed, Cloudflare oder WP Rocket) und laden Sie hart nach Wenn der Handle immer noch nicht zieht, schließen Sie Master Addons JavaScript von jeder Combine - oder Defer-Einstellung aus, löschen Sie den Cache, und testen Sie erneut Ein kürzlich deaktiviertes Bildvergleichs-Widget im Master Addons Addons and Extensions-Panel ist die andere häufige Ursache.
