Allgemeine Beschreibung
Der Vergleich-Schieber (oft auch “Vorher-Nachher-Slider” genannt) ist ein interaktives Tool, mit dem Nutzer zwei übereinanderliegende Bilder durch Verschieben eines Trennbalkens direkt vergleichen können. Dies eignet sich hervorragend, um visuelle Veränderungen, Varianten oder Zustände eindrucksvoll zu demonstrieren.Einsatzmöglichkeiten (Inspiration)
Du kannst den Vergleich-Schieber für verschiedene Zwecke nutzen:- Vorher-Nachher-Effekte: Zeige die Wirkung von Reinigungsmitteln, Bildbearbeitung oder Renovierungen.
- Produktvarianten: Vergleiche zwei Farben oder Ausführungen desselben Artikels.
- Technische Details: Visualisiere das Innenleben eines Geräts im Vergleich zum geschlossenen Gehäuse.
- Zeitsprünge: Stelle historische und aktuelle Aufnahmen eines Ortes gegenüber.
Featureübersicht:
Das Portlet bietet dir folgende Kernfunktionen:- Intuitive Bedienung: Nutzer können den Schieberegler einfach mit der Maus oder dem Finger bewegen.
- Anpassbares Design: Steuere die Farbe und das Symbol des Griffs (Handle).
- Flexible Ausrichtung: Lege fest, in welche Richtung der Vergleich funktionieren soll.
Inhalt
In diesem Reiter pflegst du die beiden Bilder ein, die miteinander verglichen werden sollen (das “Vorher”- und das “Nachher”-Bild).
Bild Vorher: Lade hier das erste Bild (das Ausgangsbild) hoch oder wähle es aus der Medienverwaltung aus. Dieses Bild liegt standardmäßig links oder oben. Bild Nachher: Lade hier das zweite Bild (das Vergleichsbild) hoch. Dieses Bild wird über das erste gelegt und durch den Schieberegler sichtbar gemacht.
- Bild lazy laden: Aktiviere diese Option, um das “Vorher”-Bild verzögert zu laden. Dies verbessert die Ladezeit der Seite, wenn der Slider nicht sofort im sichtbaren Bereich ist.
- Bild bevorzugt laden: Aktiviere diese Option, um das “Vorher”-Bild mit hoher Priorität zu laden. Dies wird empfohlen, wenn der Slider ganz oben auf der Seite platziert ist (“Above the Fold”), um den LCP-Wert zu optimieren.
- Alternativ Text: Hinterlege einen beschreibenden Text für das “Vorher”-Bild. Dies ist wichtig für die Barrierefreiheit (Screenreader) und die Suchmaschinenoptimierung (SEO).
- Title Tag: Gib hier den Titel-Tag für das “Vorher”-Bild ein (wird oft beim Überfahren mit der Maus angezeigt).
- Alternativ Text: Hinterlege einen eigenen beschreibenden Text speziell für das “Nachher”-Bild.
-
Title Tag: Gib hier den Titel-Tag für das “Nachher”-Bild ein.
Darstellung
In diesem Reiter konfigurierst du das visuelle Erscheinungsbild des Sliders und seiner Bedienelemente.
- Label verwenden?: Entscheide hier, ob Textbeschriftungen (Labels) auf den Bildern angezeigt werden sollen (z. B. “Nein”).
- Farbe des Vergleichsliders: Wähle über den Farbwähler oder durch Eingabe eines Hex-Codes, die Farbe für die Trennlinie und den Anfasser (Handle).
- Darstellung des Vergleichsliders: Bestimme das Symbol für den Anfasser in der Mitte des Sliders. Die Optionen sind:
- Kreis mit Pfeilen
- Pfeile
- Ausrichtung des Vergleichsliders: Lege die Bewegungsrichtung des Sliders fest (z. B. Horizontal für einen Vergleich von links nach rechts).