Zurück zum Support Inhalte und Medien Blöcke Diashow-Block

Diashow-Block

In diesem Ratgeber erfährst du, wie du zu einem Beitrag oder einer Seite mit dem Diashow-Block eine interaktive Bild-Diashow hinzufügen kannst.

So sieht er auf der Website aus:

Inhaltsverzeichnis

Den Diashow-Block hinzufügen

Um den Diashow-Block hinzuzufügen, klicke auf das + Block-Inserter-Icon und suche nach „Diashow“. Klicke darauf, um den Block dem Beitrag oder der Seite hinzuzufügen.

Screenshot, der zeigt, wie mit dem + Block-Inserter-Button oben links im Block-Editor einen Diashow-Block hinzugefügt wird.
Füge einen neuen Block hinzu und suche nach Diashow.

💡

Du kannst auch über die Tastatur in einer neuen Zeile „/slideshow“ eingeben und die Eingabetaste drücken, um schnell einen neuen Diashow-Block hinzuzufügen.

Screenshot, der zeigt, wie durch Eingabe von / und „slideshow“ in einem neuen Block im Editor-Hauptbereich ein Diashow-Block hinzugefügt wird.
Gib „/slideshow“ in einem neuen Block ein.

Weitere Informationen findest du in unserer ausführlichen Anleitung zum Hinzufügen von Blöcken.

Bilder hinzufügen

Wenn du einen Diashow-Block hinzufügst, werden dir zwei Optionen angezeigt: Hochladen und Bilder auswählen.

Beispiel für das Hochladen oder Hinzufügen von Bildern aus der Mediathek, aus Google Fotos, aus dem kostenlosen Fotoarchiv von Pexels oder von Openverse-Bildern mit dem Diashow-Block.
Hochladen oder Auswählen von Bildern im Diashow-Block.

Mit der Option Hochladen kannst du ein neues Bild oder mehrere Bilder von deinem Computer auf deine Website hochladen.

Mit der Option Bilder auswählen kannst du Bilder aus den in deiner Mediathek vorhandenen Bildern oder aus Google Fotos, dem kostenlosen Fotoarchiv von Pexels oder aus Openverse-Fotoarchiven auswählen.

Zusätzliche Bilder hinzufügen

Mit der Option zum Hochladen von Bildern unter der von dir erstellten Diashow kannst du mehr Bilder zu deiner Diashow hinzufügen:

Screenshot, der zeigt, wie mit der Option zum Hochladen von Bildern weitere Bilder zur Diashow hinzugefügt werden.
Zusätzliche Bilder zu einer Diashow hinzufügen.

Diashow bearbeiten

Du kannst den Button Diashow bearbeiten in der Toolbar verwenden, um Bilder hinzuzufügen oder zu entfernen oder ihre Reihenfolge zu ändern.

Screenshot, der die Option „Diashow bearbeiten“ in der Toolbar des Diashow-Blocks zeigt.
Button „Diashow bearbeiten“ in der Toolbar des Diashow-Blocks.

Bilder neu anordnen

Die Bilder werden der Diashow in der Reihenfolge hinzugefügt, in der du sie beim Erstellen der Diashow auswählst. Du kannst die Bilder mit der Option Diashow bearbeiten neu anordnen. Wenn du die Diashow bearbeitest, wird neben jedem ausgewählten Bild eine Zahl angezeigt. Diese Zahl gibt an, in welcher Reihenfolge die Bilder in deinem Diashow-Block angezeigt werden.

Neuanordnen von Bildern im Diashow-Block.

Block-Toolbar

Wenn du auf den Block klickst, wird darüber eine Toolbar mit Optionen angezeigt:

Screenshot, der die Toolbar des Diashow-Blocks zeigt
Toolbar des Diashow-Blocks

In der Toolbar des Diashow-Blocks findest du die folgenden Optionen:

Blockeinstellungen

Wenn du auf den Block klickst, siehst du in der rechten Seitenleiste weitere Block-Einstellungen. Wenn die Seitenleiste nicht angezeigt wird, musst du ggf. oben rechts in der Ecke auf das Zahnrad (⚙️) klicken, um die Einstellungen zu öffnen.

Screenshot, der die Einstellungen des Diashow-Blocks in der rechten Seitenleiste zeigt.
Klicke auf das Icon ⚙️, um die Blockeinstellungen zu öffnen

Der Diashow-Block verfügt über mehrere Einstellungen, die du in der Seitenleiste mit den Blockeinstellungen findest.

Einstellungen des Diashow-Blocks
Automatische Wiedergabe

Aktiviere diese Option, wenn deine Diashow die Bilder automatisch wiedergeben soll.

Wenn aktiviert, wird in der Diashow ein Pause-Button angezeigt, mit dem die Diashow angehalten werden kann. Du kannst auch die Verzögerung (in Sekunden) zwischen den automatischen Bildwechseln bestimmen:

Screenshot, der den Umschalter „Automatische Wiedergabe“ und den Pause-Button im Diashow-Block zeigt, um die Verzögerung zwischen Übergängen festzulegen.
Pause-Button im Diashow-Block, für den „Automatische Wiedergabe“ aktiviert wurde.
Effekte

Auf dem Tab „Effekte“ kannst du zwischen den Effekten „Folie“ und „Ausblenden“ für die Übergänge zwischen Bildern wählen.

Screenshot, der die Übergangseffekte „Folie“ und „Ausblenden“ im Diashow-Block zeigt.
Übergangseffekte im Diashow-Block.
Bildeinstellungen

Auf dem Tab „Bildeinstellungen“ kannst du die Bildgrößen für den Diashow-Block auswählen: Vorschaubild, mittel, groß oder Vollbild.

Screenshot, der die Bildeinstellungen im Diashow-Block zeigt.
Bildgröße im Diashow-Block.
Erweitert

Erweitert

Im Tab „Erweitert“ kannst du eine CSS-Klasse zu deinem Block hinzufügen, sodass du individuelles CSS erstellen und den Block nach deinen Wünschen gestalten kannst.

Über den Abschnitt „Erweitert“ kannst du zu deinem Block eine CSS-Klasse hinzufügen.
Copied to clipboard!