Hinweis: Während unsere beliebtesten Anleitungen ins Deutsche übersetzt wurden, sind einige Anleitungen nur auf Englisch verfügbar.
Galerie-Blöcke

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.

In Version 7.1 können Sie Galerie-Blöcke nur zu Blogeinträgen, Produktartikeln und einzelnen Veranstaltungen hinzufügen. Um Galerie-Seiten zu Seiten hinzuzufügen, verwenden Sie Galerie-Abschnitte.

Ein Video anschauen

Einen Galerie-Block hinzufügen

So fügen Sie einen Galerie-Block hinzu:

  1. Bearbeiten Sie eine Seite oder einen Beitrag, klicken Sie auf eine Einfügemarke und wählen Sie Text aus dem Menü aus. Weitere Hilfe finden Sie unter Blöcke hinzufügen.
  2. 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.
  1. Tippen Sie auf das Seiten-Symbol.
  2. Tippen Sie auf den Titel der Seite, die Sie bearbeiten möchten.
  3. Tippen Sie auf Bearbeiten oder das Bleistiftsymbol rechts oben.
  4. Tippen Sie auf das Symbol + rechts oben, um das Block-Menü zu öffnen.
  5. Tippen Sie unter Galerie auf die Option SlideshowKarussellRaster oder Stapel.
  6. Verwenden Sie den Tab Inhalt oder Bestehend, um Bilder und Videos hinzuzufügen.
  7. Verwenden Sie den Tab Anzeigen als, um das Layout zu ändern und das Design anzupassen.
  8. Tippen Sie auf Fertig oder , 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 hinzufügen

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.

Option 1 - Ihre eigenen Bilder hinzufügen

So fügen Sie Bilder zu Galerie-Blöcken hinzu:

  1. Tippen Sie im Tab Upload des Block-Editors auf Inhalt.
  2. Tippen Sie auf das Symbol +.
  3. Wählen Sie ein Bild aus:
    • Ein neues Foto aufnehmen – Tippen Sie auf Foto aufnehmen oder Kamera.
    • Wählen Sie ein Bild von Ihrem Gerät aus – Tippen Sie auf Fotobibliothek oder Dateien.
    • Ein Bild von iCloud auswählen – Tippen Sie auf Einfügen von ...
  4. Tippen Sie auf Bilder, um Titel, Beschreibungen und Klick-URLs hinzuzufügen.
Hinweis: Es ist derzeit nicht möglich, in der App Agenturbilder zu suchen oder Videos zu Galerie-Blöcken hinzuzufügen. Verwenden Sie dazu stattdessen einen Computer.

Option 2 – Bestehende Galerie benutzen

So verwenden Sie eine bestehende Galerie-Seite auf Ihrer Website:

  1. Tippen Sie auf den Tab Bestehend im Block-Editor.
  2. Tippen Sie auf Meine Galerien.
  3. Tippen Sie auf die Galerie-Seite, die Sie verwenden möchten.

Um Bildtitel, Beschreibungen und Klick-URLs hinzuzufügen, bearbeiten Sie die Bilder über die Galerie-Seite.

Galerie-Block-Layouts

Hier sind Beispiele für jedes Galerie-Block-Layout. Sie können das Layout auf Computern im Tab „Design“ des Galerie-Blocks ändern. Tippen Sie in der Squarespace-App auf Anzeigen als, um das Layout zu ändern.

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

Sie können das Design und das Verhalten von Galerie-Blöcken anpassen. Klicken Sie auf Computern im Block-Editor auf den Tab Design, um diese Änderungen vorzunehmen. Tippen Sie in der Squarespace-App auf Anzeigen als. Ihre Optionen hängen vom Layout ab.

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 das Kontrollkästchen deaktiviert ist, können Besucher klicken, um die Slideshow fortzusetzen, es sei denn, die Bilder verwenden Klick-URLs.

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.

Wenn Bilder in einer Lightbox geöffnet werden, erscheinen Titel und Beschreibungen bei Mouseover.

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.
  1. Tippen Sie auf den Tab Inhalt.
  2. Tippen Sie auf ein Bild.
  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:

  • Slideshow – 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.
  • Karussell – Titel und Beschreibungen werden nicht angezeigt.
  • Raster – 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.
  • Stapel – Titel und Beschreibungen erscheinen unter Bildern.
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.
  1. Tippen Sie auf den Tab Inhalt.
  2. Tippen Sie auf ein Bild.
  3. Tippen Sie auf Bild-Link.
  4. Benutzen Sie die Tabs, um auf eine Seite auf Ihrer Website, eine externe Website, eine E-Mail-Adresse, eine hochgeladene Datei oder eine Telefonnummer zu verlinken.
  5. Tippen Sie auf den Pfeil links oben und dann auf Speichern.

Bei Galerie-Blöcken liegen einige Einschränkungen bezüglich Klick-URLs vor:

  • In Slideshow-Galerie-Blöcken haben Klick-URLs Vorrang vor der Klick-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 zuschneiden oder in der Größe ändern (nur Computer)

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

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.

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?
126 von 329 fanden dies hilfreich