Anmerkung: Unsere beliebtesten Anleitungen wurden ins Deutsche übersetzt, alle restlichen Anleitungen sind bisher nur auf Englisch verfügbar
Galerie-Blöcke verwenden

Verwenden Sie Galerie-Blöcke, um Bilder- und Video-Galerien zu Seiten und Blogeinträgen in einer Reihe von Layouts hinzuzufügen. Sie können Bilder hochladen, Videos einbetten, Agenturbilder lizenzieren oder Inhalte von einer bestehenden Galerie-Seite anzeigen.

Um zu erfahren, wie Sie die Galerie-Blöcke auf Ihrer Website einrichten, folgen Sie den Schritten in dieser Anleitung. Antworten auf allgemeine Fragen finden Sie in den FAQ zu Galerie-Blöcken.

Ein Video anschauen

Einen Galerie-Block hinzufügen

So fügen Sie einen Galerie-Block hinzu:

  1. Klicken Sie auf einer Seite oder in einem Eintrag auf Bearbeiten.
  2. Klicken Sie auf eine Einfügemarke. Weitere Details zu diesen ersten Schritten finden Sie unter Blöcke hinzufügen.
  3. Wählen Sie unter Galerie die Option SlideshowKarussellRaster oder Stapel aus.

Galerie-Block-Optionen im Block-Menü.

  1. Verwenden Sie den Tab Inhalt, um Bilder und Videos hinzuzufügen.
  2. Verwenden Sie den Tab Design, um das Layout zu ändern und das Design anzupassen.
  3. Klicken Sie auf Anwenden, um Ihre Änderungen zu speichern.

Bilder oder Videos hinzufügen

Im Tab „Inhalt“ des Galerie-Block-Editors können Sie Bilder hochladen, Agenturbilder hinzufügen, Videos einbetten oder Inhalte von einer vorhandenen Galerie-Seite anzeigen. Sie können auch ein Agenturbild oder hochgeladenes Bild wiederverwenden, das Sie bereits in anderen Bereichen Ihrer Website benutzt haben.

Näheres zu unseren Best Practices für Bild-Uploads erfahren Sie unter Bilder zur Darstellung im Internet formatieren oder in unserer Videoreihe „Alles über Bilder“.

Einschränkungen

  • Sie können bis zu 250 Bilder und Videos hinzufügen.
  • Je mehr Inhalte Sie hinzufügen, desto langsamer wird die Seite geladen. Auf Mobilgeräten mit geringer Rechenleistung ist dies besonders auffällig. Um die Seitengröße zu verringern, können Sie mehrere Galerien auf unterschiedlichen Seiten erstellen.

Option 1 - Ihre eigenen Bilder hinzufügen

Ziehen Sie im Galerie-Block-Editor mehrere Bilder in den Bild-Uploader. Sie können auch auf den Bild-Uploader klicken, um ein Dateiauswahlmenü zu öffnen.

Option 2 - Agenturbilder durchsuchen

Klicken Sie auf das Symbol + rechts unten und dann auf Bilder suchen. Je nach Größe Ihres Browsers müssen Sie unter Umständen nach unten scrollen, um das Symbol + zu sehen.

Mehr dazu erfahren Sie unter Agenturbilder suchen und hinzufügen.

Option 3 – Videos hinzufügen

Sie können Videos von Hosting-Services einbetten. Videos können nicht direkt hochgeladen werden. Wir unterstützen derzeit direkte URLs von YouTube, Vimeo, Wistia und Animoto. Verwenden Sie für andere Services Embed-Codes. Mehr dazu erfahren Sie unter Die richtige Option zum Einbetten von Videos auswählen.

So fügen Sie ein Video hinzu:

  1. Klicken Sie auf das Symbol + rechts unten und dann auf Video.
  2. Fügen Sie im Fenster Video bearbeiten die URL des Videos in das Feld Hier eine einbettbare URL eingeben ein. Sie können auch auf das </> Symbol klicken und den Embed-Code des Videos in das erscheinende Fenster Daten einbetten einfügen.
  3. Sie können ein benutzerdefiniertes Vorschaubild hinzufügen, das über Ihrem Video angezeigt wird, bevor ein Besucher es abspielt. Einige Videos verfügen über ein Bild, das vom Galerie-Block hochgeladen wird. Sie können dieses auch entfernen und ein neues Bild hochladen.
  4. Um ein benutzerdefiniertes Vorschaubild zu verwenden, aktivieren Sie Vorschaubild verwenden.
  5. Wenn Sie fertig sind, klicken Sie auf Save (Speichen).

Option 4 – Bestehende Galerie benutzen

Galerie-Blöcke können Bilder und Videos anzeigen, die Sie zu einer bestehenden Galerie-Seite hinzugefügt haben.

Um Inhalte von einer Galerie-Seite anzuzeigen, klicken Sie auf Bestehende Galerie benutzen. Wählen Sie dann die entsprechende Galerie-Seite aus.

Galerie-Block-Layouts

Hier sind Beispiele für jedes Galerie-Block-Layout. Sie können das Layout im Tab „Design“ des Galerie-Blocks ändern. Während Sie ein Layout auswählen, sehen Sie eine Vorschau davon auf der Seite.

SlideshowKarussellRasterStapel

Slideshow-Galerie-Blöcke zeigen Elemente im Slideshow-Format an. Besucher können sich durch die Elemente klicken, oder die Slideshow kann automatisch abgespielt werden. Es wird ein Element nach dem anderen angezeigt.

Beispiel für einen Slideshow-Galerie-Block.

Karussell-Galerie-Blöcke zeigen Elemente in einem horizontalen Streifen an. Besucher können sich durch die Elemente klicken, oder das Karussell kann automatisch scrollen. Die Anzahl der Elemente, die gleichzeitig angezeigt werden, hängt von der Größe des Blocks ab.

Beispiel für einen Karussell-Galerie-Block.

Raster-Galerie-Blöcke zeigen Elemente in einem gleichmäßigen Raster an. Zwischen Elementen mit ungleicher Länge wird ein Freiraum gelassen.

Beispiel für einen Raster-Galerie-Block.

Stapel-Galerie-Blöcke zeigen Elemente in einer einzigen Spalte mit einem Abstand von einem Pixel zwischen den Elementen an. Elemente erstrecken sich über die gesamte Breite des Blocks. Dieses Layout ist weniger anpassbar und verfügt nicht über Seitenverhältnisoptionen oder Navigationssteuerung.

Beispiel für einen Stapel-Galerie-Block.

Das Design anpassen

Im Design-Tab von Galerie-Blöcken können Sie das Design und Verhalten des Blocks anpassen. Während Sie Einstellungen anpassen, sehen Sie eine Vorschau Ihrer Änderungen auf der Seite. Ihre Optionen hängen vom Layout ab.

SlideshowKarussellRasterStapel

Hier sind die Design-Optionen für Slideshow-Galerie-Blöcke:

Design-Option Benutzen Sie dies, um
Automatischer Übergang zwischen den Bildern

Automatischer Wechsel zum nächsten Bild oder Video der Slideshow nach einer eingestellten Zeitspanne. Wenn diese Option aktiviert ist, erscheint ein Schieberegler, mit dem die Übergangszeit auf eine bis zehn Sekunden eingestellt werden kann.

Das manuelle Abspielen eines Videos hat Vorrang vor dieser Einstellung. Wenn ein Besucher ein Video abspielt, muss er auf den nächsten Pfeil klicken, um das nächste Element in der Galerie zu sehen.

Steuerung für Weiter und Zurück anzeigen

Fügen Sie Pfeile für die Navigation hinzu. Diese Steuerung erscheint als Overlay auf der rechten und linken Seite des Hauptbildes oder -videos.

Wenn Ihre Galerie Videos enthält und die Option Automatischer Übergang zwischen den Bildern aktiviert ist, empfehlen wir Ihnen, diese Einstellung zu aktivieren.

Bilder automatisch zuschneiden

Schneiden Sie die Bilder zu oder passen Sie deren Größe an, um das bestmögliche Design zu erhalten.

Wenn deaktiviert:

  • Das breiteste Bild oder Video erstreckt sich über die gesamte Breite des Blocks. Seine Höhe wird angepasst, um das Seitenverhältnis des Bildes beizubehalten.
  • Alle anderen Bilder und Videos werden so skaliert, dass sie die gleiche Höhe haben wie das breiteste Bild oder Video.
  • Seitenverhältnisse bleiben erhalten.
Wenn aktiviert:
  • Das breiteste Bild oder Video erstreckt sich über die gesamte Breite des Blocks. Sein Seitenverhältnis bleibt mithilfe der Höhe erhalten.
  • Alle anderen Bilder und Videos werden so skaliert, dass sie die gleiche Breite und Höhe haben wie das breiteste Bild oder Video.
Vorschaubilder anzeigen

Fügen Sie einen Streifen mit Vorschaubildern aller Bilder und Videos in der Galerie unter dem Hauptbild hinzu.

Wenn diese Option aktiviert ist, werden Schieberegler angezeigt, mit denen Sie die Höhe des Vorschaubilder-Streifens und den Abstand zwischen dem Streifen und dem Hauptbild einstellen können.

Titel und Beschreibung anzeigen

Zeigen Sie Bildtitel und Beschreibungen so an, wie sie in den Einstellungen der einzelnen Bilder festgelegt sind.

Wenn diese Option aktiviert ist, erscheinen weitere Optionen, um die Platzierung festzulegen und sie nur bei Mouseover anzeigen zu lassen.

Transparenter Hintergrund Entfernen Sie die graue Farbe hinter Bildern, die nicht beschnitten sind. Diese Option erscheint nur, wenn Bilder automatisch zuschneiden deaktiviert ist.
Links in neuem Fenster öffnen Öffnen Sie Klick-URLs in neuen Tabs, wenn Sie diese anklicken.

Slideshow-Höhe

Die Höhe des Slideshow-Galerie-Blocks entspricht der Höhe des breitesten Bildes. Der Block betrachtet das breiteste Bild als das Bild mit dem breitesten Seitenverhältnis.

Hier ist ein Beispiel für zwei Bilder, die Sie in den Galerie-Block hochladen könnten. Das eine hat ein größeres Verhältnis von Breite zu Höhe, das andere hat mehr Pixel in der Breite.

Vergleich von Bildern mit unterschiedlichen Breiten-/Höhenverhältnissen.

Das Bild mit dem größeren Verhältnis von Breite zu Höhe legt die Höhe des Blocks fest:

Das Bild mit dem größeren Verhältnis von Breite zu Höhe legt die Höhe des Slideshow-Galerie-Blocks fest.

Um die Höhe der Galerie festzulegen, stellen Sie sicher, dass das Bild mit dem breitesten Seitenverhältnis die gewünschte Höhe hat. Um beispielsweise die Höhe der gesamten Galerie zu reduzieren, können Sie das Bild mit dem breitesten Seitenverhältnis abschneiden.

Hier sind noch einige weitere Tipps zur Anpassung der Höhe:

  • Um die Höhe Ihrer Galerie vorherzusagen und Ihre Bildgrößen konsistent zu halten, sollten Sie in Betracht ziehen, einen Bild-Editor eines Drittanbieters zu verwenden, um Bilder vor dem Hochladen auf das gleiche Seitenverhältnis zuzuschneiden.
  • Agenturbilder oder Bilder, die Sie bereits hochgeladen haben, können Sie sie mit dem integrierten Bild-Editor zuschneiden.
  • Wählen Sie aus, ob alle Bilder in der Slideshow im gleichen Seitenverhältnis angezeigt werden, indem Sie im Design-Tab die Option Bilder automatisch zuschneiden aktivieren. 
  • Mehr über Seitenverhältnisse erfahren Sie unter Seitenverhältnisse verstehen.

Hier sind die Design-Optionen für Karussell-Galerie-Blöcke:

Design-Option Benutzen Sie dies, um
Automatischer Übergang zwischen den Bildern

Lassen Sie die Galerie nach einer bestimmten Zeit (zwischen 1 und 10 Sekunden) automatisch zum nächsten Element wechseln.

Das manuelle Abspielen eines Videos hat Vorrang vor dieser Einstellung. Wenn ein Besucher ein Video abspielt, muss er auf den Pfeil klicken, um das nächste Element in der Galerie zu sehen.

Steuerung für Weiter und Zurück anzeigen

Fügen Sie Pfeile für die Navigation hinzu. Diese Steuerung erscheint mit einem Overlay auf der rechten und linken Seite des Hauptelements.

Wenn Ihre Galerie Videos enthält und die Option Automatischer Übergang zwischen den Bildern aktiviert ist, empfehlen wir Ihnen, diese Einstellung zu aktivieren.

Links in neuem Fenster öffnen Lassen Sie Klick-URLs in neuen Tabs öffnen.

Hier sind die Design-Optionen für Raster-Galerie-Blöcke:

Design-Option Benutzen Sie dies, um
Seitenverhältnis Ändern Sie die Form der Bilder und Videos. Standardmäßig ist 1:1 Quadrat ausgewählt.
Bilder beschneiden

Entfernen Sie Freiräume und zeigen Sie Bilder und Videos im gewählten Seitenverhältnis an.

Wenn diese Option deaktiviert ist, wird die Höhe jeder Zeile basierend auf dem höchsten Bild oder Video standardisiert. Abhängig vom gewählten Seitenverhältnis kann es zu uneinheitlichen Abständen kommen, insbesondere wenn das Raster auf ein Vorschaubild pro Zeile eingestellt ist.

Titel anzeigen Zeigen Sie Titel unter Bildern an.
Vorschaubilder pro Reihe Legen Sie die Anzahl der Vorschaubilder in einer Zeile fest. Wenn Sie die Anzahl erhöhen, wird die Größe der einzelnen Vorschaubilder verringert.
Padding Ändern Sie den Freiraum/die Außenabstände zwischen den einzelnen Bildern oder Videos. Wenn Sie den Schieberegler auf 0 setzen, wird der Freiraum entfernt.
Lightbox

Wenn diese Option aktiviert ist, wird ein Bild oder Video durch Anklicken in einer Slideshow-Lightbox mit schwarzem oder weißem Hintergrund angezeigt. Klick-URLs werden deaktiviert.

Verwenden Sie das Drop-Down-Menü Lightbox-Design, um auszuwählen, ob der Lightbox-Hintergrund schwarz oder weiß ist.

Links in neuem Fenster öffnen Öffnen Sie Klick-URLs in neuen Tabs, wenn Sie diese anklicken.

Hier sind die Design-Optionen für Stapel-Galerie-Blöcke:

Design-Option Benutzen Sie dies, um
Titel und Beschreibung anzeigen

Zeigen Sie Titel und Beschreibungen unter jedem Bild oder Video an.

Links in neuem Fenster öffnen Öffnen Sie Klick-URLs in neuen Tabs, wenn Sie diese anklicken.

Fügen Sie Bildtitel und Beschreibungen hinzu

Titel und Beschreibungen werden nur bei den Galerie-Blöcken Slideshow, Raster und Stapel angezeigt. Sämtliche Bildtitel verhalten sich wie Alternativtext, was im Hinblick auf SEO und die Zugänglichkeit Ihrer Website von Vorteil ist.

So fügen Sie einem Bild oder Video einen Titel und eine Beschreibung hinzu:

  1. Fahren Sie im Galerie-Block-Editor oder auf der bestehenden Galerie-Seite mit dem Mauszeiger über ein Bild oder Video.
  2. Klicken Sie auf das Zahnrad-Symbol.
  3. Geben Sie einen Titel und eine Beschreibung ein. Wir empfehlen die Verwendung von kurzen Begriffen, die das Bild beschreiben und sich auf den Gesamtinhalt Ihrer Website beziehen.
Tipp: Wenn die Bilder des Galerie-Blocks von einer bestehenden Galerie-Seite stammen, erscheinen die Bild-Titel und Beschreibungen der Galerie-Seite automatisch im Galerie-Block.

Das Verhalten und das Erscheinungsbild von Text hängt vom Layout des Galerie-Blocks ab:

SlideshowKarussellRasterStapel

Titel und Beschreibungen können konstant oder bei Mouseover angezeigt werden. Legen Sie die Position über den Design-Tab des Blocks fest.

In kleineren Browsern und auf Mobilgeräten werden Titel und Beschreibungen möglicherweise nicht angezeigt.

Titel und Beschreibungen werden in Karussell-Galerie-Blöcken nicht angezeigt.

Titel werden unter Bildern angezeigt. Titel und Beschreibungen werden beim Mouseover angezeigt, wenn Bilder in einer Lightbox geöffnet werden, nicht aber bei Videos, die in einer Lightbox geöffnet werden.

Titel und Beschreibungen werden unter Bildern angezeigt.

Tipp: Der Stil von Beschriftungen hängt vom Design des Galerie-Blocks und Ihrem Template ab. Weitere Informationen finden Sie unter Bildbeschriftungen gestalten.

Klick-URLs hinzufügen

Verwenden Sie Klick-URLs, um Bilder mit externen Seiten, internen Inhalten oder Dateien zu verlinken. Das ist eine großartige Möglichkeit, die Klicks für andere Inhalte wie etwa Kunden-Projekte, Produkte oder Blogeinträge zu steigern. Klick-URLs funktionieren in Kombination mit Bildern, aber nicht mit Videos.

Um einen Hyperlink hinzuzufügen:

  1. Fahren Sie im Galerie-Block-Editor oder auf der bestehenden Galerie-Seite mit dem Mauszeiger über ein Bild oder Video.
  2. Klicken Sie auf das Zahnrad-Symbol.
  3. Richten Sie den Link im Feld Klicken, um URL hinzuzufügen ... ein. Detailliertere Schritte finden Sie unter Klick-URLs benutzen.
  4. Setzen oder entfernen Sie das Häkchen bei Links in neuem Fenster öffnen im Design-Tab, um einzustellen, wie Ihre Links angezeigt werden.
Hinweis: Bei Galerie-Blöcken liegen einige Einschränkungen bezüglich Hyperlinks vor:
  • In Slideshow-Galerie-Blöcken haben Klick-URLs Vorrang vor der Navigation. Wenn Sie Klick-URLs in Kombination mit dem Slideshow-Design verwenden, empfehlen wir Ihnen, Steuerung für Weiter und Zurück anzeigen im Design-Tab des Block-Editors zu aktivieren.
  • In Raster-Galerie-Blöcken werden keine Klick-URLs unterstützt, wenn Lightbox aktiviert ist.

Bilder abschneiden oder skalieren

Sie können die Größe oder den Zuschnitt von Galerie-Blöcken auf verschiedene Weise ändern. Ihre Optionen hängen vom Layout ab.

SlideshowKarussellRasterStapel

Galerie-Blöcke auf Mobilgeräten

Galerie-Blöcke auf Mobilgeräten können je nach Layout anders dargestellt werden oder sich anders verhalten als auf einem Computer.

SlideshowKarussellRasterStapel

Slideshow-Galerie-Blöcke behalten ihr Slideshow-Layout auf Mobilgeräten bei:

  • Die Einstellungen für automatische Übergänge und Navigation, die Sie im Design-Tab auswählen, gelten weiterhin. Klick-URLs funktionieren, wenn sie angetippt werden.
  • Titel und Beschreibungen werden nicht auf Displays mit einer Breite von weniger als 480 Pixeln angezeigt. Dies gilt für die meisten Smartphones, die im Hochformat gehalten werden.
  • Titel und Beschreibungen (einschließlich Beschriftungen bei Mouseover) können im Querformat und auf größeren Geräten, wie z. B. Tablets, angezeigt werden. Dies hängt vom Gerät ab.

Karussell-Galerie-Blöcke behalten ihr Karussell-Layout auf Mobilgeräten bei:

  • Abhängig von Ihren Bildern kann jeweils nur ein Bild angezeigt werden.
  • Die Einstellungen für automatische Übergänge und Navigation, die Sie im Design-Tab auswählen, gelten weiterhin. Klick-URLs funktionieren, wenn sie angetippt werden.

Raster-Galerie-Blöcke werden auf Mobilgeräten als Raster mit einer Breite von zwei Spalten angezeigt:

  • Das Seitenverhältnis, das Sie im Design-Tab auswählen, gilt weiterhin.
  • Lightboxes werden angezeigt, wenn diese Option aktiviert ist.
  • Wenn Lightboxes deaktiviert sind, funktionieren Klick-URLs, wenn sie angetippt werden.
  • Tippen Sie in einer Lightbox auf den Kreis in der rechten unteren Ecke, um den Titel und die Beschreibung eines Bildes anzuzeigen.

Tippen Sie auf Mobilgeräten auf den Kreis, um den Text eines Bildes in einer Lightbox anzuzeigen.

Die Darstellung und das Verhalten von Stapel-Galerie-Blöcken sind auf Mobilgeräten identisch.

War dieser Beitrag hilfreich?
110 von 289 fanden dies hilfreich
Galerie-Blöcke verwenden