Mit diesem Baustein zeigst du deine Leistungen in zwei Varianten: entweder als interaktive Bildpaare mit Schieberegler oder als gegenübergestellte Textinhalte mit Symbolen. Deine Besucher können so Unterschiede unmittelbar erkennen.
Voraussetzungen
Es gibt keine besonderen Voraussetzungen.
So gehst du vor
Der Baustein hat zwei verschiedene Ansichten – als Bildpaare oder als Text-Inhalte. Welche Art du einstellen möchtest, bestimmt dein erster Schritt.
Bildpaare einrichten
Klicke auf Bildpaar hinzufügen, um ein neues Paar zu erstellen.
Fülle den Bereich Kopf aus:
- Kleine Überschrift: Optional; ein kurzer Vorspann über der Hauptüberschrift
- Überschrift: Die Hauptüberschrift des Bausteins
- Einleitung: Optional; Fließtext unter der Überschrift, um den Sinn zu erklären
Im Bereich Bildpaare stellst du die Beschriftungen ein:
- Beschriftung links: Der Text, der über dem Vorher-Bild angezeigt wird
- Beschriftung rechts: Der Text, der über dem Nachher-Bild angezeigt wird
Für jedes Bildpaar:
- Lade das Bild für Vorher hoch (es wird links vom Schieberegler angezeigt)
- Lade das Bild für Nachher hoch (es wird rechts vom Schieberegler angezeigt)
- Trage optional eine Bildunterschrift ein, um das Paar zu beschreiben
- Ein Paar wird erst angezeigt, wenn beide Bilder gespeichert sind
Um die Reihenfolge zu ändern, nutze die Pfeile neben jedem Paar. Um ein Paar zu löschen, klicke auf das X.
Wiederhole Schritt 4 für weitere Bildpaare oder klicke erneut auf Bildpaar hinzufügen.
Text-Inhalte nebeneinander stellen
Klicke auf Vorteil hinzufügen, um einen Vergleichspunkt zu erstellen.
Fülle den Bereich Kopf aus wie oben beschrieben.
Im Bereich Inhalt (Zettel + App) stellst du ein:
- Beschriftung links: Der Titel für die linke Spalte (z. B. „Vorher")
- Beschriftung rechts: Der Titel für die rechte Spalte (z. B. „Nachher")
- Trage für jede Seite einen Überschrift, einen Text und wähle optional ein Symbol – jede Spalte kann ein eigenes Aussehen bekommen
- Jedem Vorteil wird automatisch eine Farbe zugewiesen; sie wechseln zwischen Weinrot, Gelb, Creme und Dunkel
Um die Reihenfolge zu ändern, nutze die Pfeile. Um einen Punkt zu löschen, klicke auf das X.
Klicke erneut auf Vorteil hinzufügen, um weitere Vergleichspunkte zu erstellen.
Optional: Trage eine Fußnote ein, um zusätzliche Informationen unter allen Vorteilen anzuzeigen.
Block benennen und speichern
Oben rechts kannst du dem Block einen Namen geben (z. B. „Vorher und nachher" oder „Transformation"). Dieser Name hilft dir später, den Block in der Seite zu finden – deine Besucher sehen ihn nicht. Speichere deine Änderungen durch Schließen des Bearbeitungsbereichs oder durch die Schaltfläche zum Abspeichern.
Aufbau des Blocks
Kopf-Bereich:
- Kleine Überschrift: Dient als Ankündigung über der Hauptüberschrift
- Überschrift: Fasst das Thema zusammen
- Einleitung: Erklärt kurz, wofür der Vergleich steht
Bildpaare:
- Jedes Paar besteht aus zwei Bildern gleicher Größe (4:3-Format, fest)
- Der Besucher schiebt einen Regler, um zwischen Vorher und Nachher zu wechseln
- Eine Bildunterschrift beschreibt optional, worum es in diesem Paar geht
Text-Inhalte:
- Zwei Spalten stehen sich gegenüber
- Jede Spalte hat einen Titel, einen beschreibenden Text und optional ein Symbol
- Die Farben wechseln automatisch, um Unterschiede deutlich zu machen
- Eine Fußnote kann Hinweise geben, die für alle Punkte gelten
Block-Label (Name): Das ist die interne Bezeichnung für dich – deine Besucher sehen sie nicht.
Was danach passiert
Der Block wird in deine Seite eingefügt und ist sofort sichtbar. Du kannst jederzeit zurück zur Bearbeitung und weitere Bildpaare oder Vergleichspunkte hinzufügen, die Reihenfolge ändern oder Inhalte überarbeiten. Sobald du die Seite veröffentlichst, sehen deine Besucher den fertigen Vergleich – mit dem Schieberegler zum Durchziehen oder den nebeneinander angeordneten Text-Kästen.
Tipps und Hinweise
- Bilder in gleicher Auflösung nutzen: Damit der Schieberegler smooth läuft, sollten Vorher- und Nachher-Bild etwa die gleiche Größe haben.
- Aussagekräftige Paare wählen: Zeige Unterschiede, die deine Besucher wirklich interessieren – nicht zu viele, damit die Seite nicht überlädt wirkt.
- Farben bewusst einsetzen: Bei Text-Inhalten helfen die automatischen Farben, Punkte zu unterscheiden. Nutze das, um die Lesbarkeit zu verbessern.
- Symbole sprechend wählen: Ein Symbol fasst einen Vergleichspunkt visuell zusammen – nutze es, wenn es passt, lass es weg, wenn es nur schmückt.