Bilder zum Öffnen in einer Lightbox einrichten

Aktiviere Lightbox-Effekte, um Bilder in einem Overlay mit abgedunkeltem Hintergrund zu öffnen.

Zuletzt aktualisiert: 30. Januar 2025

Eine Lightbox ist ein Designeffekt, der ein Bild in einem zentrierten Overlay öffnet und den Rest der Seite abdunkelt, wenn auf ein Bild geklickt wird. Wenn du auf das x in der oberen Ecke klickst, wird sie geschlossen und die Seite taucht wieder auf. Lightboxes sind eine großartige Möglichkeit, Bilder für Besucher hervorzuheben und zu vergrößern, die sie sich genauer ansehen möchten.

Video ansehen

Bevor du loslegst

  • Zoom durch Zusammenziehen wird für Lightbox-Bilder auf mobilen Geräten nicht unterstützt.
  • Wenn deine Website auf Squarespace Version 7.0 läuft, variieren die Optionen für die Galerie-Seite je nach Template.

Ändern der Hintergrundfarbe der Lightbox

Für Galerieabschnitte in Version 7.1 kannst du deine Lightbox im Editor „Abschnitts-Designs“ in einer beliebigen Farbe formatieren.

In den meisten anderen Fällen kannst du in den Blockeinstellungen oder Website-Stilen ein Dunkles oder Helles Overlay für die Lightbox auswählen. Weitere Einzelheiten findest du in den Abschnitten zu Bild-Blöcken, Galerie-Blöcken und Galerie-Seiten.

Galerie-Abschnitte (Version 7.1)

Galerieabschnitte in Rasterlayouts in Version 7.1 verfügen über eine Lightbox-Option in den Abschnittstilen. So aktivierst du die Lightbox:

  1. Klicke auf der Seite auf Bearbeiten, bewege den Mauszeiger über den Galerieabschnitt und klicke auf das Stift-Symbol.
  2. Stelle sicher, dass der Galerie-Typ auf Raster: Einfach, Raster: Streifen oder Raster: Mauerwerk eingestellt ist. Slideshow-Layouts unterstützen keine Lightbox-Funktion.
  3. Schalte den Schalter Lightbox ein.
  4. Klicke auf Speichern, um deine Änderungen zu speichern und die Bearbeitung fortzusetzen, oder auf Beenden und dann auf Speichern, um den Editor zu schließen.

So gestaltest du die Lightbox-Farbe:

  1. Öffne Website-Stile, während du eine Seite bearbeitest, und klicke dann auf Farben.
  2. Bewege den Mauszeiger auf das Design, das deinem Galeriebereich entspricht, und klicke auf das Stift-Symbol.
  3. Verwende im Galerie-Abschnitt die Option Lightbox-Hintergrund, um eine Lightbox-Farbe auszuwählen.
  4. Um die Farbe deiner Steuerelemente für die Lightbox-Navigation zu ändern, verwende das Lightbox-Symbol.
  5. Klicke auf Speichern, um deine Änderungen zu speichern und die Bearbeitung fortzusetzen, oder auf Beenden und dann auf Speichern, um den Editor zu schließen.

Denk daran:

  • Beschriftungstext wird nicht in der Lightbox des Galerie-Abschnitts angezeigt.
  • Wenn du zu Bildern Klick-URLs hinzufügst und dann eine Lightbox aktivierst, wird durch Klicken auf das Bild die URL aufgerufen. Die Lightbox wird nicht geöffnet.

Bild-Blöcke

Bild-Blöcke unterstützen eine Lightbox, wenn:

  • Du das Inline-Layout verwendest (auf Websites der Version 7.0 und Abschnitten der Version 7.1 mit dem Klassischen Editor)
  • Du sie zu einem Abschnitt des Kreativen Editors hinzugefügt hast

So aktivierst du eine Lightbox:

  1. Fügen Sie einen Bild-Block hinzu oder doppelklicken Sie auf einen vorhandenen Bild-Block, um den Bildeditor zu öffnen.
  2. Klicken Sie auf den Reiter Design.
  3. Wenn dein Block über eine Layout-Option verfügt, stelle sicher, dass sie auf Inline eingestellt ist. Andere Layouts unterstützen keine Lightbox.
  4. Schalte den Schalter Lightbox ein.
  5. Wähle zwischen Dunkles Overlay und Helles Overlay für deinen Lightbox-Stil mit der Dropdown-Liste Lightbox-Design.

Denk daran:

  • Beschriftungen werden immer angezeigt, wenn du den Mauszeiger über ein Lightbox-Bild bewegst, unabhängig davon, welche Option für die Anzeige von Beschriftungen du wählst. Auf Mobilgeräten werden sie angezeigt, wenn du auf das Punktsymbol tippst.
    • Bild-Blöcke, die zu Abschnitten des Kreativen Editors hinzugefügt wurden, unterstützen keine Bildunterschriften. Du kannst stattdessen einen Text-Block verwenden, um Text neben oder über einem Bild-Block hinzuzufügen. Dieser Text wird nicht in der Lightbox angezeigt. 
  • Es ist nicht möglich, eine Lightbox zu aktivieren, wenn du eine Klick-URL hinzufügst.
  • Um Lightboxes aktiviert zu halten und Bilder zu verlinken, füge einen Text-Link zur Bildbeschreibung hinzu. Bei Bild-Blöcken unterstützen bestimmte Layouts auch Buttons.

Raster-Galerie-Blöcke

Nachdem du deine Bilder zu einem Raster-Galerie-Block hinzugefügt hast, klicke auf den Tab Design und aktiviere Lightbox. Lege deinen Lightbox-Slideshow-Stil fest, indem du in der Drop-down-Liste Dunkles Overlay oder Helles Overlay wählst.

Denk daran:

  • Beschriftungen werden immer angezeigt, wenn du den Mauszeiger über ein Lightbox-Bild bewegst. Auf Mobilgeräten werden sie angezeigt, wenn du auf das Punktsymbol tippst.
  • Slideshow-, Karussell- und Stapel-Galerie-Blöcke unterstützen keine Lightbox.
  • Wenn du Klick-URLs hinzufügst und eine Lightbox aktivierst, wird durch Klicken auf das Bild die Lightbox anstelle der URL geöffnet.
  • Damit Videos in einer Lightbox geöffnet werden können, stelle sicher, dass du in den Einstellungen deines Elements die Option Vorschaubild verwenden aktivierst.

Übersichts-Blöcke

Wenn ein Mauer- oder Raster-Übersichts-Block mit einer Galerie-Seite verbunden ist, werden die Bilder automatisch in einer Lightbox-Slideshow geöffnet. Die Lightbox-Farbe des Übersichts-Blocks ist immer Dunkel. Beschriftungen werden beim Mouseover angezeigt.

Die Lightbox-Slideshow wirkt sich auf Klick-URLs aus:

  • Beim Anzeigen der Seite öffnen Bilder mit Klick-URLs den Hyperlink, wenn darauf geklickt wird, anstatt die Lightbox-Slideshow zu öffnen.
  • Wenn die Lightbox-Slideshow geöffnet ist, sind Klick-URLs deaktiviert.

Tipp

Auf Websites der Version 7.0, die eine Lightbox unterstützen, kannst du Videos, die zu Galerie-Seiten hinzugefügt wurden, so einstellen, dass sie in Lightboxes in Übersichts-Blöcken geöffnet werden. Um das zu aktivieren, aktiviere in den Element-Einstellungen für Videos in deiner Galerie-Seite die Option Video-Vorschaubild. Wenn du dies nicht aktivierst oder wenn dein Template keine Lightbox unterstützt, werden deine Videos im Übersichts-Block abgespielt, ohne dass sie in einer Lightbox geöffnet werden.

Galerie-Seiten (Version 7.0)

Die Galerie-Seiten einiger Templates in Version 7.0 unterstützen eine Lightbox-Funktion. Für Standard-Galerie-Seiten kannst du die Lightbox-Farbe unter Website-Stil auf Hell oder Dunkel festlegen. Videobeschreibungen werden nicht in der Lightbox angezeigt.

Informationen zur Funktionsweise von Lightbox-Optionen in diesen Template-Familien findest du in der folgenden Tabelle.

Template-Gruppe Lightbox-Optionen
Adirondack
  • Galerie-Seite auf Raster eingestellt
  • Bildbeschriftungen werden bei Mouseover angezeigt
Avenue
  • Keine Lightbox

Aviator

  • Galerie-Seite auf Raster eingestellt
  • Klick-URLs deaktivieren eine Lightbox
  • Bildbeschriftungen werden bei Mouseover angezeigt

Bedford

  • Galerie-Seite auf Raster eingestellt
  • Klick-URLs deaktivieren eine Lightbox
  • Bildbeschriftungen werden bei Mouseover angezeigt

Brine

  • Galerie-Seite auf Raster eingestellt
  • Klick-URLs deaktivieren eine Lightbox
  • Bildbeschriftungen werden bei Mouseover angezeigt
  • Wird nur für Videos auf Galerie-Index-Seiten unterstützt. Tipp: Wenn du auf einen Link in der Bildunterschrift klickst, wird die Lightbox geöffnet, nicht der Link.

Farro

  • Galerie-Seite auf Raster eingestellt
  • Klick-URLs deaktivieren eine Lightbox
  • Bildbeschriftungen werden bei Mouseover angezeigt
Five
  • Galerie-Seite auf Raster eingestellt
  • Klick-URLs deaktivieren eine Lightbox
  • Bildbeschriftungen werden bei Mouseover angezeigt
Flatiron
  • Keine Lightbox
Forte
  • Klicke auf das „+“-Symbol in der oberen rechten Ecke des Bildes, um eine Lightbox zu öffnen.
  • Für Index-Seite deaktiviert
  • Beschriftungen werden nicht angezeigt
Galapagos
  • Galerie-Seite auf Raster eingestellt
  • Klick-URLs deaktivieren eine Lightbox
  • Bildbeschriftungen werden bei Mouseover angezeigt
Ishimoto
  • Keine Lightbox
Momentum
  • Keine Lightbox

Montauk

  • Keine Lightbox
Native
  • Galerie-Seite auf Raster eingestellt
  • Klick-URLs deaktivieren eine Lightbox
  • Bildbeschriftungen werden bei Mouseover angezeigt

Pacific

  • Galerie-Seite auf Raster eingestellt
  • Klick-URLs deaktivieren eine Lightbox
  • Bildbeschriftungen werden bei Mouseover angezeigt
  • Unterstützt in Abschnitten der Index-Seite der Raster-Galerie

Skye

  • Galerie-Seite auf Raster eingestellt
  • Klick-URLs deaktivieren eine Lightbox
  • Für Index-Seite deaktiviert
  • Bildbeschriftungen werden bei Mouseover angezeigt
Supply
  • Keine Lightbox

Tremont

  • Keine Lightbox
Wells
  • Keine Lightbox
Wexley
  • Klicke auf ein beliebiges Bild, um eine Lightbox-Slideshow zu öffnen.
  • Lightbox ist auf Mobilgeräten deaktiviert
  • Beschriftungen werden nicht angezeigt

York

  • Galerie-Seite auf Raster eingestellt
  • Klick-URLs deaktivieren eine Lightbox
  • Bildbeschriftungen werden bei Mouseover angezeigt
Footer Image
  • Hol dir Hilfe von der Community

  • Hol dir Hilfe von unserer Community zu erweiterten individuellen Anpassungen.

  • Beauftrage einen Squarespace-Experten

  • Hebe dich online von der Masse ab, indem du dir von einem erfahrenen Webdesigner oder Entwickler helfen lässt.

Bilder zum Öffnen in einer Lightbox einrichten