Medien-Widgets: Bildergalerie

Mit dem Bildergalerie-Widget fügst du ganz einfach mehrere Bilder zu deiner Website hinzu (oder verbindest einen Instagram-Feed; mehr dazu findest du weiter unten unter „Professionellen Instagram-Feed verbinden"). Wenn Besucher auf ein Bild in der Bildergalerie klicken, kann es sich in einer Lightbox-Galerie öffnen oder auf eine Seite deiner Website, eine Website-URL, ein Popup, einen Anker, eine E-Mail-Adresse oder Ähnliches verweisen. Zu jedem Bild kannst du Titel, Beschreibungen und Alt-Text hinzufügen.

Dynamische Inhalte: Dieses Widget kann auch dynamische Seiten anzeigen.

Inhalts-Editor

Im Inhaltsbereich verwaltest du den Inhalt des Widgets.

Klicke auf das Element, um das schwebende Menü zu öffnen, und klicke dann auf die Option für den Inhalts-Editor.

Optionen zur Galerie-Einrichtung

• Um Links auf Galeriebildern zu aktivieren, klicke oben im Inhaltsfeld auf den Schalter Links in Galeriebildern aktivieren.
  • Das deaktiviert die Lightbox-Funktion. Wenn ein Bild keinen Link hat, passiert beim Klick darauf nichts.
• Klicke auf Instagram verbinden, um ein professionelles Instagram-Konto zu verbinden (es werden nur Bilder angezeigt, Beiträge mit Videos sind nicht sichtbar). Zu den professionellen Instagram-Konten zählen Business- und Creator-Konten.
• Klicke auf Bild hinzufügen, um Bilder hinzuzufügen (du kannst mehrere gleichzeitig auswählen und zur Galerie hinzufügen). Folgende Optionen stehen zur Verfügung:
  • Wähle aus den direkt verfügbaren Bildern.
  • Klicke auf Vollansicht, um den Bild auswählen zu öffnen.
  • Klicke auf das Plus-Symbol, um ein Bild hochzuladen.

Einstellungsoptionen für einzelne Bilder

Klicke auf ein Bild, um seine Einstellungsoptionen aufzurufen.

• Replace Image.

• Edit.

• Position. Lege fest, welcher Teil des Bildes angezeigt wird.

• Edit Link. Diese Option ist nur sichtbar, wenn die Einstellung Links in Galeriebildern aktivieren aktiviert ist. Wenn kein Link gesetzt ist, passiert beim Klick auf das Bild nichts.

• Title. Wenn du keinen Titel möchtest, klicke auf das Augensymbol. Wenn kein Text eingegeben, die Option aber sichtbar gelassen wird, bleibt der Platz im Widget erhalten und ist sichtbar.

• Description. Wenn du keine Beschreibung möchtest, klicke auf das Augensymbol. Wenn kein Text eingegeben, die Option aber sichtbar gelassen wird, bleibt der Platz im Widget erhalten und ist sichtbar.

  Hinweis: Das lange Textfeld bietet verschiedene Formatierungsoptionen, etwa kursiv, fett oder unterstrichen.

• Button. Wenn du keinen Button möchtest, klicke auf das Augensymbol, um ihn auszublenden.

• Alt text. Gib deinen eigenen Alt-Text ein.

Design-Editor

Klicke auf das Element, um das schwebende Menü zu öffnen, und klicke dann auf die Option zum Bearbeiten des Designs.

1. Um das Layout der Galerie zu ändern, klicke auf den Tab Layout. Du hast folgende Optionen:

   • Klicke auf das vorhandene Layout, um weitere Designoptionen für deine Bildergalerie zu sehen. Layouts werden pro Gerät verwaltet und richten sich nach der Ansicht, in der das Layout ausgewählt wird.
   • Du kannst Text unter den Bildern, beim Überfahren mit der Maus (Hover) oder auf dem Bild hinzufügen. Wähle Button unter dem Bild, Text & Button beim Bewegen des Mauszeigers oder Button auf dem Bild und lege dann eine Position für den Text bzw. Button fest.
   • Wähle die Anzahl der Spalten (Spaltenanzahl) in der Bildergalerie.
   • Um die Spaltenanzahl automatisch anzupassen und Leerraum zu vermeiden, klicke auf den Schalter Spalten automatisch anpassen.
   • Wähle, wie viele Sichtbare Zeilen (sichtbare Zeilen) angezeigt werden sollen.

2. Um die Bilder zu konfigurieren, klicke auf den Tab Bilder. Du hast folgende Optionen:

   • Ändere die Bildhöhe und den Abstand zwischen den Bildern (für alle Bilder der Galerie). Das gilt nur für bestimmte Layouts.

   • Füge abgerundete Ecken hinzu.

   • Zeige das vollständige Bild in der Galerie an.

   • Füge einen Schatten hinzu.

   • Ändere den Hover-Effekt und die Animation der Bilder (im neuen Widget verfügbar).

   • Deaktiviere die Bildoptimierung.

     Hinweis: Das Deaktivieren der Bildoptimierung kann sich auf Ladegeschwindigkeit und/oder Performance auswirken.

3. Um den Rahmen zu konfigurieren (zum Beispiel eine Hintergrundfarbe hinzufügen oder den Rand anpassen), klicke auf den Tab Frame.

   • Um Lazy loading auszuschalten, klicke auf den Schalter (standardmäßig aktiviert; das verbessert die Ladegeschwindigkeit, weil Bilder erst geladen werden, wenn sie beim Scrollen sichtbar werden).
   • Um die Teilen-Option auszublenden, klicke auf den Schalter Bilder aus dem Share-Bereich ausblenden. Damit entfernst du die Teilen-Schaltfläche, die Besuchern beim Klick auf ein Bild angezeigt wird.

4. Um den Innen- und Außenabstand zu ändern, klicke auf den Tab Abstand.

Informationen zu Designoptionen, die nicht spezifisch für dieses Widget sind (zum Beispiel Layout, Stil oder Abstände), findest du unter „Widget-Design".

Professionellen Instagram-Feed verbinden

Aufgrund einer Änderung von Meta müssen alle vor Dezember 2024 hergestellten Verbindungen neu hergestellt werden.

Besitzer eines professionellen Instagram-Kontos (kein privates oder persönliches Konto) können der Bildergalerie einen Instagram-Feed hinzufügen. Das Widget zeigt bis zu 100 Bilder aus deinem Feed und aktualisiert sich automatisch, wenn neue Beiträge hinzukommen. Enthält ein Instagram-Beitrag mehrere Bilder, wird im Bildergalerie-Widget nur das erste Bild dieses Beitrags angezeigt.

Professionelle Instagram-Konten können als Business- oder Creator-Konto eingerichtet sein.

Hinweis:

• Neue Bildaktualisierungen können bis zu 2 Stunden dauern, bis sie angezeigt werden.
• Es werden nur Fotos angezeigt (keine Videos) und nur von Konten, die öffentlich sind und einem Business-Konto zugehören.
• Pro Website kann nur ein Instagram-Konto verbunden werden.
• Kollaborationsfotos können nicht angezeigt werden.
• Um das Konto zu wechseln, öffne die verbundene Bildergalerie, klicke auf Trennen und melde dich mit dem neuen Konto an. Möglicherweise musst du nach dem Trennen und vor einem erneuten Verbinden den Browser-Cache leeren.

So verbindest du einen professionellen Instagram-Feed mit dem Bildergalerie-Widget:

1. Füge das Bildergalerie-Widget zu deiner Website hinzu. Mehr dazu findest du unter „Widgets hinzufügen".
2. Klicke auf Instagram verbinden.
3. Gib deine Instagram-Anmeldedaten ein und klicke auf Einloggen.
4. Klicke auf Zulassen.

Wenn beim Anmelden ein Fehler auftritt, öffne instagram.com in deinem Browser. Klicke auf dem Profil-Tab auf das Einstellungssymbol, wähle Ausloggen und verbinde dich dann erneut mit dem Widget.

Bildunterschriften

Bildunterschriften erscheinen, wenn du mit der Maus über ein Bild fährst. Um sie anzuzeigen, klicke im Bildergalerie-Widget auf dem Inhalt-Tab auf den Schalter Bildunterschriften anzeigen (standardmäßig ist der Schalter ausgeschaltet).

Du kannst außerdem im Design-Tab die Farbe, Größe und Schriftart des Textes sowie die Hintergrundfarbe der Bildunterschriften ändern.

Hinweis: Diese Funktion ist nur auf dem Desktop verfügbar, da die Hover-Funktion auf Mobilgeräten nicht zur Verfügung steht.

Fehlerbehebung beim Instagram-Feed

Die Bildergalerie zeigt meine Instagram-Bilder nicht oder zeigt die falschen Bilder an

So verbindest du Instagram korrekt neu mit dem Bildergalerie-Widget:

1. Klicke im Editor auf das Bildergalerie-Widget, um den Inhalts-Editor zu öffnen.
2. Um das Widget von Instagram zu trennen, klicke auf Trennen.
3. Schließe den Editor.
4. Öffne instagram.com und melde dich direkt bei Instagram ab.
5. Öffne ein Inkognito-Fenster, gehe zum Editor und verbinde Instagram erneut mit dem Bildergalerie-Widget.

Mein Instagram-Feed wurde getrennt

Wenn deine Instagram-Verbindung getrennt wurde, ist möglicherweise dein Authentifizierungs-Token abgelaufen. Dann musst du das Bildergalerie-Widget erneut mit Instagram verbinden und deine Anmeldedaten neu autorisieren.

So verbindest du das Bildergalerie-Widget erneut mit Instagram:

1. Klicke auf das Bildergalerie-Widget, um den Inhalts-Editor zu öffnen.
2. Klicke auf Instagram verbinden.
3. Gib deine Instagram-Anmeldedaten ein und klicke dann auf Einloggen.
4. Klicke auf Zulassen.

Fehlerbehebung beim Bildergalerie-Widget

Behebe Probleme mit dem Bildergalerie-Widget.

Die Option „Datenverknüpfung" erscheint nicht im Bildergalerie-Widget

Wenn die Option Datenverknüpfung beim Rechtsklick auf dein Bildergalerie-Widget nicht erscheint, prüfe Folgendes:

• Stelle sicher, dass die Inhaltsbibliothek Inhalte enthält. Wenn die Inhaltsbibliothek leer ist, erscheint die Option Datenverknüpfung nicht.
• Prüfe in deiner Collection, dass die Page Item URL auf Item gesetzt ist und nicht leer bleibt.
• Stelle sicher, dass alle Felder in deiner Collection auf den passenden Datentyp gesetzt sind. Ein häufiges Konfigurationsproblem ist, dass alle Felder auf Rich Text stehen, obwohl sie dem tatsächlichen Inhaltstyp entsprechen sollten (Bildfelder sollten zum Beispiel auf den Typ Bild gesetzt sein).

Sobald du das geprüft und behoben hast, veröffentliche deine Website erneut, damit die Änderungen wirksam werden.