Bildvergleich
Ein Bild sagt mehr als tausend Worte, aber ein Vergleich ist unbezahlbar Mit dem Bildvergleichselement können Sie Änderungen, Upgrades oder Unterschiede mit einem interaktiven Schieberegler präsentieren Platzieren Sie zwei Bilder nebeneinander und lassen Sie Besucher einen Griff ziehen, um das “Nachher” über das “Vorher” zu enthüllen. Perfekt für Renovierungen, Fitnessergebnisse, Produkt-Makeovers oder jede visuelle Fortschrittsgeschichte. Mit voller Kontrolle über Griff, Etiketten und Overlay können Sie einen überzeugenden, professionellen Vergleich erstellen, der in Sekundenschnelle anspricht und überzeugt.
Interaktiver Drag-and-Reveal-Slider
Die Magie liegt in der Interaktion Laden Sie Ihre “Before” - und “After” - Bilder hoch, stellen Sie dann das anfängliche Visible Ratio ein, wie bei 50% beginnend, um beide gleich anzuzeigen Benutzer können den Griff klicken und ziehen, um zwischen den beiden Bildern zu gleiten, wodurch sie die direkte Kontrolle über die Enthüllung, die Ausrichtung (horizontal oder vertikal) wählen und die Interaktion auf Mouse Drag oder Touch Swipe einstellen können Es ist eine immersive Möglichkeit, Veränderungen zu demonstrieren.
- Intuitive Steuerung: Benutzer ziehen einen Griff, um die beiden Bilder interaktiv zu vergleichen.
- Flexible Ausrichtung: Erstellen Sie horizontale (links/rechts) oder vertikale (oben/unten) Vergleichsschieber.
- Einstellbarer Startpunkt: Stellen Sie die anfängliche Aufteilung ein (z. B. 30% vorher, 70% danach), um das Ergebnis hervorzuheben.
Anpassbare Overlay- und Clear-Etiketten
Stellen Sie sicher, dass die Betrachter verstehen, was sie sehen Aktivieren Sie das Overlay, um die Beschriftungen “Vorher” und “Nachher” direkt auf den Bildern anzuzeigen Füllen Sie diese Beschriftungen vollständig an: Ändern Sie den Text, die Typografie, die Farben und den Hintergrund Sie können sogar einen Farbverlauf für die Overlay-Style the Normal und Hover-Zustände getrennt, und steuern Sie die Polsterung, Ränder und Ränder des Overlays für einen polierten, integrierten Look.
- Benutzerdefinierter Etikettentext: Ändern Sie “Vorher/Nachher” in etwas wie “Alt/Neu,” “Original/Erweitert,” usw.
- Stilvoller Overlay-Hintergrund: Verwenden Sie einfarbige Farben, Farbverläufe oder sogar Bilder für die Etikettenhintergründe.
- Klarer visueller Kontext: Stellen Sie sicher, dass sich Zuschauer nie fragen, welches Bild welches ist.
Professionelles Griff- und Behälterstyling
Der Schieberegler sollte wie ein Teil Ihres Designs aussehen, kein generisches Werkzeug. Passen Sie den Griff vollständig an: Ändern Sie die Farbe und Größe der Leiste, stylen Sie die Drag-Box mit Symbolen, Farben und Hintergründen und fügen Sie Box Shadow und Border Radius hinzu. Anschließend stylen Sie den Hauptbehälter (Layout-Stil) mit Rändern, Polstern und Schatten. Jedes Element (vom Griff über die Etiketten bis zum Behälter) kann auf Ihre Marke zugeschnitten werden.
- Drag-Griff-Design: Gestalten Sie die Schieberleiste und die ausziehbare Box mit Symbolen, Farben und Hover-Effekten.
- Container Polish: Fügen Sie dem Widget Ränder, Schatten und Abstände hinzu, damit es nahtlos in Ihr Layout passt.
- Responsive Touch: Der Griff ist so konzipiert, dass er sowohl auf Desktop- als auch auf Touchscreen-Geräten leicht zu greifen und zu ziehen ist.
Häufig gestellte Fragen zum Bildvergleich
Kann ich damit mehr als zwei Bilder vergleichen?
Nein, dieses Element ist speziell für einen direkten, nebeneinander liegenden Vergleich zweier Bilder konzipiert Es eignet sich perfekt für Vorher/Nachher-Szenarien Um mehrere Bilder oder Zustände zu präsentieren, sollten Sie stattdessen einen Gallery Slider oder ein Image Carousel verwenden.
Wie funktioniert das auf Mobiltelefonen?
Perfekt! der Schieberegler ist voll berührungsfreundlich Benutzer können nach links/rechts (oder nach oben/unten) wischen, um den Griff zu bewegen Das Element ist responsive, und Sie können Einstellungen wie Etikettengröße und Griffgröße für Mobilgeräte im responsiven Bearbeitungsmodus von Elementor anpassen.
Kann ich den Text auf den Etiketten ändern?
Absolut. Sie können den Standardtext “Vor” und “Nachher” direkt in den Inhaltseinstellungen auf alles ändern, was Sie möchten Damit können Sie die Beschriftungen für jedes Szenario anpassen, wie “Tag/Nacht,” “Ohne/Mit,” oder “Produkt A/Produkt B.”
Was nützt die vertikale Ausrichtung am besten?
Vertikale Schieberegler eignen sich hervorragend zum Vergleich hoher Bilder, wie Ganzkörperporträts, Gebäudefassaden oder jede „Top-Vs.-Bottom-” Transformation. Es ist auch eine einzigartige visuelle Wahl, die Ihren Vergleich auf einer Seite mit horizontalem Inhalt hervorheben kann.
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 den Schieberegler mit dem "Nachher" Bild größtenteils versteckt starten?
Ja, benutze die Einstellung Sichtbares Verhältnis, wenn du es auf 90% stellst, nimmt das Bild “Vorher” 90% des Speicherplatzes ein und versteckt den größten Teil des Bildes “Nachher”, bis der Benutzer den Griff zieht Das ist großartig, um eine Überraschungsoffenbarung zu erstellen.
Trendige Elementor-Widgets und -Erweiterungen
Erstellen Sie anspruchsvolle Websites in kürzerer Zeit.
Glasmorphie
Container-extras
Muster
Post-/Seitenduplikator
