Zurück zum Support Inhalte und Medien Blöcke Bildervergleichsblock

Bildervergleichsblock

Platziere mit dem Bildvergleichsblock zwei Bilder nebeneinander (oder übereinander) und verwende einen Slider, um Unterschiede zwischen den Bildern aufzuzeigen. Ein Beispiel:

Bildervergleichsblock

Um einen Bildervergleichsblock hinzuzufügen, klickst du auf das Block-Einfügen-Icon. Daraufhin öffnet sich die Block-Bibliothek, in der du den Bildervergleichsblock auswählen kannst.

Eine detaillierte Anleitung zum Hinzufügen von Blöcken findest du hier.

GIF, wie ein Bildervergleichsblock hinzugefügt wird
Den Bildervergleichsblock hinzufügen

Der Block funktioniert am besten mit zwei Bildern in derselben Breite und Höhe.

Du kannst Bilder sowohl zum „Vorher“- als auch zum „Nachher“-Ort in den Block ziehen. Klicke entweder auf den Hochladen-Button oder wähle ein Bild aus den hochgeladenen Bildern deiner Mediathek aus:

Bildervergleichsblock – Bild hochladen
Bilder dem Bildervergleichsblock hinzufügen

Du kannst den Block nach dem Hochladen der Bilder beschriften.

Wenn du die falschen Bilder hochlädst oder die Reihenfolge ändern möchtest, musst du den Block löschen und von vorne beginnen.


Block-Einstellungen

Jeder Block weist neben den Optionen in der Toolbar des Blocks auch spezifische Optionen in der Editor-Seitenleiste auf. Wenn die Seitenleiste nicht angezeigt wird, klicke einfach auf das Zahnrad-Icon neben dem Veröffentlichen-Button.

Die Blockeinstellungen sind in der Seitenleiste zu finden.
Blockeinstellungen

Ausrichtungseinstellungen

Mit den Ausrichtungseinstellungen kannst du von nebeneinander zu untereinander wechseln.

Einstellungen des Bildervergleichsblocks
Einstellungen des Bildervergleichsblocks

Erweitert

Unter dem Tab Erweitert kannst du eine CSS-Klasse zu deinem Block hinzufügen, sodass du individuelles CSS erstellen und den Block gestalten kannst. Hier findest du weitere Informationen.

Im Tab Erweitert kannst du deinem Block eine CSS-Klasse hinzufügen.
Im Tab Erweitert kannst du deinem Block eine CSS-Klasse hinzufügen.
Copied to clipboard!