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

Bilder zum Öffnen in einer Lightbox einrichten

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 Sie anfangen

  • 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. Fahre mit dem Mauszeiger über Fertig und klicke auf Speichern.

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 Abschnitt Galerien 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. Klicken Sie auf Speichern.

Denken Sie 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, die das Inline-Layout verwenden, unterstützen eine Lightbox. So aktivierst du sie:

  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. Stelle sicher, dass dein Layout 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.

Denken Sie daran:

  • Beschriftungen werden immer angezeigt, wenn du den Mauszeiger über ein Lightbox-Bild bewegst, unabhängig davon, welche Option zur für die Anzeige von Beschriftungen du wählst. Auf Mobilgeräten werden sie angezeigt, wenn du auf das Punktsymbol tippst.
  • Wenn du Klick-URLs hinzufügst und eine Lightbox aktivierst, wird durch Klicken auf das Bild die Lightbox anstelle der URL geöffnet.
  • 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.

Denken Sie 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 Video-Vorschaubild 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
War dieser Beitrag hilfreich?
52 von 180 fanden dies hilfreich
Bilder zum Öffnen in einer Lightbox einrichten