Der Vorher Nachher Umschaltblock ermöglicht es Ihnen, interaktive Bildvergleiche auf Ihren SeedProd-Seiten zu erstellen. Dieser Block zeigt zwei Bilder nebeneinander mit einem anpassbaren Schieberegler, den Besucher ziehen können, um den Vorher- und Nachher-Zustand anzuzeigen und so ein ansprechendes visuelles Vergleichserlebnis zu schaffen.
Vorher-Nachher-Vergleiche eignen sich perfekt, um Transformationen, Produktverbesserungen, Designänderungen, Gewichtsverlustergebnisse, Haussanierungen, Fotobearbeitungseffekte oder jedes Szenario zu präsentieren, in dem Sie die Auswirkungen von Veränderungen visuell demonstrieren möchten. Der interaktive Schieberegler erleichtert es den Besuchern, die Unterschiede in ihrem eigenen Tempo zu erkunden.
Hinzufügen des Vorher Nachher Umschaltblocks zu Ihren Seiten
Befolgen Sie diese Schritte, um einen Vorher Nachher Umschaltblock zu Ihrer SeedProd-Seite hinzuzufügen:
Schritt 1: Block hinzufügen
Ziehen Sie unter Design > Blöcke den Vorher Nachher Umschaltblock in den gewünschten Bereich Ihrer Seite.
Der Vorher Nachher Umschaltblock befindet sich unter Design > Erweitert und kann in jeden Bereich Ihrer Seite gezogen werden.
Schritt 2: Inhaltseinstellungen konfigurieren
Sobald der Block hinzugefügt wurde, klicken Sie auf den Vorher Nachher Umschaltblock, um seine Einstellungen zu öffnen. Im Tab Inhalt können Sie Ihre Vergleichsbilder hochladen und das Verhalten des Schiebereglers konfigurieren.
Bild:
- Vorher-Bild: Klicken Sie auf Neues Bild auswählen, um das „Vorher“-Bild hochzuladen oder auszuwählen, das auf der linken (oder oberen) Seite des Vergleichs angezeigt wird
- Eigenes Bild verwenden oder Stock-Bild verwenden: Wählen Sie, ob Sie Ihr eigenes Bild von Ihrem Computer hochladen oder aus Stock-Bildbibliotheken auswählen möchten
- Bildquelle: Zeigt die Quell-URL Ihres ausgewählten Vorher-Bildes an
- Vorher-Beschriftung: Geben Sie benutzerdefinierten Text ein, der über dem Vorher-Bild angezeigt wird (z. B. „Vorher“, „Original“, „2023“). Dies hilft den Besuchern zu verstehen, was sie sehen
- Nachher-Bild: Klicken Sie auf Neues Bild auswählen, um das „Nachher“-Bild hochzuladen oder auszuwählen, das auf der rechten (oder unteren) Seite des Vergleichs angezeigt wird
- Eigenes Bild verwenden oder Stock-Bild verwenden: Wählen Sie, ob Sie Ihr eigenes Bild hochladen oder aus Stock-Bibliotheken für das Nachher-Bild auswählen möchten
- Bildquelle: Zeigt die Quell-URL Ihres ausgewählten Nachher-Bildes an
- Nachher-Beschriftung: Geben Sie benutzerdefinierten Text ein, der über dem Nachher-Bild angezeigt wird (z. B. „Nachher“, „Verbessert“, „2024“)
Ausrichtung:
- Schieberegler-Ausrichtung: Wählen Sie zwischen Vertikal (Schieberegler bewegt sich nach oben und unten) oder Horizontal (Schieberegler bewegt sich nach links und rechts). Horizontal ist am gebräuchlichsten für Seiten-an-Seiten-Vergleiche
- Ausrichtung: Legen Sie die Ausrichtung des gesamten Vergleichsblocks innerhalb seines Containers fest
- Beim Hovern bewegen: Umschalten, um die automatische Bewegung des Schiebereglers zu aktivieren, wenn Besucher mit der Maus über den Vergleich fahren. Wenn aktiviert, folgt der Schieberegler dem Cursor, ohne dass Klicks oder Ziehen erforderlich sind
- Überlagerungsfarbe: Fügen Sie Ihren Bildern eine halbtransparente Farbüberlagerung hinzu, um einen einzigartigen visuellen Effekt zu erzielen oder Beschriftungen hervorzuheben
Laden Sie Ihre Vorher-Nachher-Bilder hoch, fügen Sie Beschriftungen hinzu und konfigurieren Sie die Ausrichtung und das Verhalten des Schiebereglers.
Vergleichsgriff:
- Anfänglicher Griff-Offset: Legen Sie fest, wo der Schieberegler beim Laden der Seite beginnt, als Prozentsatz (z. B. beginnt 50 in der Mitte, 25 zeigt mehr vom Vorher-Bild)
- Griff-Farbe: Wählen Sie die Farbe für den Schiebereglergriff und die Trennlinie zwischen den Bildern
- Griff-Dicke: Passen Sie die Breite der Trennlinie an, die die beiden Bilder trennt
- Kreisbreite: Steuern Sie die Größe des kreisförmigen Griffs, den Besucher zum Verschieben des Schiebereglers ziehen
- Kreisradius: Passen Sie die Rundheit des Griffkreises an. Höhere Werte erzeugen einen runderen Griff
- Dreieckgröße: Legen Sie die Größe der Richtungspfeile fest, die auf dem Griff erscheinen und angeben, in welche Richtung gezogen werden soll
Passen Sie das Erscheinungsbild des Vergleichsgriffs an, einschließlich Farbe, Größe und Startposition.
Schritt 3: Design anpassen
Im Tab Erweitert können Sie das visuelle Erscheinungsbild Ihres Vorher-Nachher-Umschaltblocks anpassen:
Stile der Vorher/Nachher-Beschriftung:
- Beschriftungs-Typografie: Steuern Sie die Schrifteigenschaften für die Vorher- und Nachher-Beschriftungen, einschließlich Schriftfamilie, Größe, Stärke und Stil
- Beschriftungs-Farbe: Legen Sie die Textfarbe für die Vorher- und Nachher-Beschriftungen fest, um sicherzustellen, dass sie auf Ihren Bildern sichtbar sind
- Hintergrundfarbe: Fügen Sie eine Hintergrundfarbe hinter den Beschriftungen hinzu, um die Lesbarkeit zu verbessern, insbesondere wenn Ihre Bilder unterschiedliche Helligkeiten aufweisen
Abstand:
- Rand: Steuern Sie den äußeren Abstand um Ihren Vorher-Nachher-Umschaltblock (oben, rechts, unten, links). Dies bestimmt, wie viel Platz zwischen dem Vergleich und den umgebenden Elementen erscheint
- Innenabstand: Passen Sie den inneren Abstand innerhalb Ihres Vorher-Nachher-Umschaltblocks an (oben, rechts, unten, links). Dies schafft Freiraum zwischen den Bildern und den Blockrändern
Attribute:
- CSS-ID: Zeigt die automatisch generierte eindeutige Kennung für Ihren Vorher-Nachher-Umschaltblock an. Diese ID wird automatisch von SeedProd für benutzerdefinierte Stile oder JavaScript-Ziele erstellt
- Benutzerdefinierte Klasse: Fügen Sie benutzerdefinierte CSS-Klassen hinzu, um bestimmte Stile aus Ihrem Theme oder benutzerdefinierten CSS anzuwenden.
- Benutzerdefinierte Attribute: Fügen Sie dem Wrapper-Element des Blocks HTML-Attribute hinzu. Geben Sie jedes Attribut in eine neue Zeile im Format ein: attribut-name|wert (z. B. data-comparison|before-after)
Gerätesichtbarkeit:
- Auf Desktop ausblenden: Blenden Sie den Vorher-Nachher-Umschaltblock auf Desktop-Bildschirmen aus
- Auf Tablet ausblenden: Blenden Sie den Vorher-Nachher-Umschaltblock auf Tablet-Geräten aus
- Auf Mobilgeräten ausblenden: Blenden Sie den Vorher-Nachher-Umschaltblock auf Mobilgeräten aus
Animationseffekte:
- Eingabeanimation: Wählen Sie aus verschiedenen Animationseffekten, die abgespielt werden, wenn der Vergleichsblock ins Sichtfeld scrollt. Optionen sind Bounce, Fade In, Zoom In, Rotate In und viele mehr. Dies lenkt die Aufmerksamkeit auf Ihren interaktiven Vergleich
Der Tab Erweitert bietet Optionen zum Stylen von Beschriftungen, Anpassen von Abständen und Konfigurieren der Geräte-Sichtbarkeit und Animationen.
Schritt 4: Speichern Sie Ihre Änderungen
Sobald Sie die Konfiguration des Vorher-Nachher-Umschaltblocks abgeschlossen und dessen Darstellung angepasst haben, stellen Sie sicher, dass Sie Ihre Arbeit speichern.
Sie haben erfolgreich einen Vorher-Nachher-Umschaltblock zu Ihrer Seite hinzugefügt! Dieser interaktive Block erstellt ansprechende visuelle Vergleiche, mit denen Besucher die Unterschiede zwischen zwei Bildern in ihrem eigenen Tempo erkunden können. Experimentieren Sie mit verschiedenen Griff-Farben, Schieberegler-Ausrichtungen und Hover-Effekten, um ein Vergleichserlebnis zu schaffen, das Ihr Publikum fesselt und Transformationen oder Verbesserungen effektiv demonstriert.