Elementor-Vorher-Nachher-Bild-Slider: Kostenloses Vergleichs-W
Image Comparison ist ein kostenloses Master Addons Widget, das ein Vorher - und ein Nachher-Bild in einem Frame mit einem Griff dazwischen stapelt Besucher ziehen oder wischen den Griff, um die Änderung zu enthüllen Fügen Sie jeder Seite ein Etikett hinzu, wählen Sie Horizontal (links und rechts) oder Vertikal (oben und unten), legen Sie fest, wo der Griff beginnt, und stylen Sie den Griff, die Beschriftungen und die Überlagerung. Weder freier Elementor noch Elementor Pro haben einen Vorher-Nachher-Schieberegler, also füllt dieses Widget diese Lücke auf freiem Elementor.
So fügen Sie einen Vorher-Nachher-Schieberegler in Elementor hinzu
Sie benötigen Elementor und das kostenlose Master Addons Plugin von WordPress.org.
- Überprüfen Sie, ob der Bildvergleich unter eingeschaltet ist Master-Addons, Widgets.
- Suchen Sie im Elementor-Editor nach Bildvergleich Und auf die Seite ziehen.
- Wählen Sie auf der Registerkarte Vorher das erste Bild und die Bezeichnung aus und machen Sie dann dasselbe auf der Registerkarte Nachher.
- Stellen Sie in den Einstellungen das sichtbare Verhältnis ein und wählen Sie horizontal oder vertikal.
- Halten Sie den Move-Griff auf Maus-Drag/Swipe für Telefone oder verwenden Sie eine Pro-Option auf Desktop-orientierten Seiten.
- Stylen Sie den Griff und die Etiketten auf der Registerkarte Stil und testen Sie dann den Schieberegler auf einem Telefon.
Für Designtipps und Beispiele lesen Sie die Vor und nach Schieberegler. Jede Einstellung ist in der aufgeführt Einstellungen für das Bildvergleichs-Widget.
Ziehen und Wischen Sie vorher nach dem Schieberegler
Hochladen der Vorher und Nach Bilder, jeweils mit eigenem Label und Bildauflösung In Einstellungen, Sichtbares Verhältnis (%) Setzt, wo der Griff beginnt, Orientierung Horizontal (die Voreinstellung) oder Vertikal ist, und Überlagerung Etiketten zeigt oder versteckt. Griff bewegen Ist Mouse Drag/Swipe im kostenlosen Plugin Master Addons Pro fügt Mouse Move, bei dem der Griff dem Cursor folgt, und Mouse Click hinzu.
- Drag & Wipe-Arbeit auf Desktop - und Touchscreens.
- Starten Sie den Griff außermittig, um das Ergebnis hervorzuheben.
- Verwenden Sie Bilder mit den gleichen Pixelabmessungen, damit die beiden Seiten in einer Linie stehen.
Anpassbare Overlay- und Clear-Etiketten
Einschalten Überlagerung Vorher-Nachher-Beschriftungen auf den Bildern zu zeigen Der Overlay-Stil-Bereich hat Normal - und Hover-Hintergründe Die Etikett Abschnitt stilisiert jede Seite separat mit Farbe, Typografie, Umrandung, Umrandungsradius, Rand und Polsterung, so dass Sie “Vor” und “Nachher” in “Alt” und “Neu” oder andere Wörter ändern können.
- Benutzerdefinierter Beschriftungstext in jeder Sprache.
- Getrennte Stile für die Vorher-Nachher-Etiketten.
- Ein anderer Overlay-Hintergrund auf hover.
Professionelles Griff- und Behälterstyling
Die Griff Abschnitt legt die Farbe und Größe der Griffleiste, die Breite und Höhe des Griffkastens sowie die Symbolfarbe, den Rand und den Randradius für Normal und Hover fest. Layoutstil Fügt einen Rand, eine Polsterung und einen Rand um den gesamten Schieberegler hinzu. Der Randradius und der Box Shadow auf dem Container sind Master Addons Pro-Optionen.
- Passen Sie die Grifffarbe Ihrer Marke an.
- Eine dünne Stange mit rundem Griffkasten für einen sauberen Look.
- Abgerundete Ecken und ein Schatten auf dem Behälter mit Pro.
Bildvergleich: Kostenlos vs. Pro
Elementor hat in seinem kostenlosen oder Pro-Plugin kein Vorher-Nachher-Widget. Hier ist, was das kostenlose Master Addons-Widget enthält und was Pro hinzufügt.
| Merkmal | Kostenlos | Master Addons Pro |
|---|---|---|
| Vorher-Nachher-Bilder mit Beschriftung | Ja | Ja |
| Horizontale und vertikale Ausrichtung | Ja | Ja |
| Ausgangspunkt des sichtbaren Verhältnisses | Ja | Ja |
| Maus-Drag/Swipe-Handle | Ja | Ja |
| Maus-Bewegungs- und Mausklickgriffe | Nein | Ja |
| Griff, Etiketten - und Overlay-Styling | Ja | Ja |
| Container-Grenzradius und Box Shadow | Nein | Ja |
Für die meisten Vorher-Nachher-Slider reicht die kostenlose Version Pro macht Sinn, wenn der Griff dem Cursor folgen soll oder abgerundete Ecken und einen Schatten ohne benutzerdefiniertes CSS benötigt Um stattdessen Notizen auf einem Bild anzuheften, siehe Bild Hotspot (Pro).
Häufig gestellte Fragen zum Bildvergleich
Ist das Bildvergleichs-Widget kostenlos?
Ja. Das Widget ist kostenlos mit Drag and Swipe, Beschriftungen, sowohl Ausrichtungen als auch Griffstyling. Master Addons Pro fügt Maus-Move- und Maus-Click-Griffe sowie Containerrandradius und Box-Shadow hinzu.
Funktioniert es auf Telefonen?
Ja, mit dem kostenlosen Mouse Drag/Swipe-Griff Besucher wischen, um den Teiler zu verschieben Die Option Pro Mouse Move basiert auf Hover, funktioniert also nicht auf Touchscreens.
Hat Elementor einen Vorher-Nachher-Schieberegler?
Nein. Weder free Elementor noch Elementor Pro beinhalten einen Bildvergleich oder vorher und nachher Widget, daher benötigen Sie ein Addon wie dieses.
Wann sollte ich die Vertikale Ausrichtung verwenden?
Verwenden Sie Vertical für hohe Bilder, wie zum Beispiel Ganzkörperporträts, Gebäudefassaden oder lange Screenshots. Das Vorher-Bild sitzt oben und das Nachher-Bild unten, mit einem Auf- und Ab-Griff.
Wird die Verwendung von zwei hochauflösenden Bildern meine Seite verlangsamen?
Es kann, wenn die Bilder sehr groß sind, die Einstellung Bildauflösung sinnvoll verwenden (z.B. “Groß” statt 'Voll') und Ihre Bilder vor dem Upload immer für das Web optimieren Das Element selbst ist leicht, aber die Bilddateigröße ist der Hauptfaktor für die Leistung.
Kann ich mehr als zwei Bilder vergleichen?
Nein. Jedes Widget vergleicht zwei Bilder. Für mehr Paare fügen Sie ein Widget pro Paar hinzu oder zeigen Sie mehrere Bilder in der Bild Karussell.
Trendige Elementor-Widgets und -Erweiterungen
Erstellen Sie anspruchsvolle Websites in kürzerer Zeit.
Glasmorphie
Container-extras
Muster
![Master Addons Post/Page Duplicator-Erweiterung für Elementor: MA Duplicator Zeilenlink in der WordPress Pages-Liste, der eine Landing Page erstellt - [Duplicated #128] Entwurf](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Post-/Seitenduplikator
