Lightbox - Webflow Hilfe
Verwenden Sie das Lightbox-Element, um Bilder oder Videos in einem Vollbildmodus anzuzeigen.
Wie man eine Lightbox erstellt
Eine Lightbox ist ein anklickbares Thumbnail, das in einem Linkblock eingebettet ist. Wenn Besucher der Website innerhalb der Grenzen des Links auf der Live-Site klicken, öffnet sich die Lightbox, um die damit verbundenen Medien anzuzeigen. Sie können eine Lightbox aus dem Hinzufügen-Panel > Erweitert hinzufügen.
Wie das Lightbox-Platzhalter-Thumbnail-Bild funktioniert
Die Lightbox enthält ein Bildelement, das sich wie jedes andere Bildelement verhält. Sie können es in der Größe ändern, doppelklicken, um das Platzhalter-Thumbnail-Bild zu ersetzen, und Alt-Text hinzufügen. Erfahren Sie mehr über Bildelemente.
Sie können dasselbe Bild für das Lightbox-Thumbnail und das größere Lightbox-Modalfenster verwenden. Webflow erstellt automatisch responsive Varianten für alle Inline-Bilder. Erfahren Sie mehr über responsive Bilder.
Wie man das Lightbox-Thumbnail durch andere Inhalte ersetzt
Sie ersetzen das Platzhalter-Bildelement und ziehen andere Inhalte (z. B. eine Überschrift oder andere Nicht-Link-Elemente) in den Lightbox-Link.
Sie können auch einen Div-Block verwenden und ein Hintergrundbild anwenden, um gleich große Bild-Thumbnails zu erstellen.
Wie man die Lightbox gestaltet
Sie können sowohl den Lightbox-Link als auch dessen Inhalt gestalten. Wenn Sie beispielsweise Textelemente in Ihrem Lightbox-Link verschachteln, können Sie die Typografie des Lightbox-Link-Elements gestalten.
So fügen Sie Lightbox-Medien hinzu
Um ein Bild und eine Bildunterschrift zum Lightbox-Modal-Fenster hinzuzufügen:
- Wählen Sie den Lightbox-Link auf der Leinwand aus
- Gehen Sie zum Elementeinstellungen-Panel > Lightbox-Link-Einstellungen > Medien
- Klicken Sie auf das Symbol „Listenelement hinzufügen“
- Wählen Sie "Bild" als Typ
- Klicken Sie auf Bild ersetzen
- Wählen Sie ein Bild aus dem Asset-Panel
- Fügen Sie bei Bedarf eine Bildunterschrift hinzu
Sie können so viele Bilder zu einem Lightbox-Link hinzufügen, wie Sie möchten. Diese Bilder werden als Diashow im Lightbox-Modal-Fenster angezeigt.
Um ein Video zum Lightbox-Modal-Fenster hinzuzufügen:
- Wählen Sie den Lightbox-Link auf der Leinwand aus
- Gehen Sie zum Elementeinstellungen-Panel > Lightbox-Link-Einstellungen > Medien
- Klicken Sie auf das Symbol „Listenelement hinzufügen“
- Wählen Sie "Video" als Typ
- Fügen Sie die URL des Videos in das URL-Feld ein
- Fügen Sie bei Bedarf einen Titel hinzu
Lightbox für Bilder und Videos - Webdesign-Tutorial
So erstellen Sie dynamische Lightboxes aus Medien in Collection-Feldern
Sie können dynamische Lightboxes erstellen, indem Sie das Vorschaubild und/oder die Lightbox-Medien aus Medien-Collection-Feldern (z. B. einem Bildfeld, einem Mehrfachbildfeld oder einem Videofeld) in Ihren CMS- oder E-Commerce-Collections abrufen.
Um ein dynamisches Collection-Feld mit dem Lightbox-Vorschaubild zu verbinden:
- Fügen Sie eine Lightbox zu einer dynamisch verbundenen Collection-Liste oder einer CMS-Collection-Seite hinzu
- Wählen Sie das Platzhalter-Vorschaubild aus
- Gehen Sie zu Elementeinstellungen > Bildeinstellungen
- Klicken Sie auf das "lila Punkt"-Symbol im Bild-Feld
- Wählen Sie ein Bild-Collection-Feld aus
Dann können Sie das Lightbox mit dem Collection-Feld verbinden, sodass Ihre dynamischen Collection-Bilder im Lightbox verfügbar sind. Um ein dynamisches Collection-Feld mit dem Lightbox-Medium zu verbinden:
- Wählen Sie den Lightbox-Link aus
- Gehen Sie zu Elementeinstellungen > Lightbox-Link-Einstellungen
- Klicken Sie auf das "lila Punkt"-Symbol im Medien-Feld
- Wählen Sie ein Medien-Collection-Feld aus
Um ein Lightbox mit einem Mehrfachbild-Feld zu verbinden:
- Fügen Sie eine Collection-Liste zu einer Collection-Seite hinzu
- Verbinden Sie die Collection-Liste mit dem Mehrfachbild-Feld, indem Sie das Quelle-Dropdown anklicken und das Mehrfachbild-Feld auswählen
- Fügen Sie ein Lightbox zur Collection-Liste hinzu
- Wählen Sie das Bild-Element im Lightbox aus
- Gehen Sie zu Elementeinstellungen > Bildeinstellungen
- Klicken Sie auf das "lila Punkt"-Symbol im Bild-Feld
- Wählen Sie das Mehrfachbild-Feld aus
- Wählen Sie den Lightbox-Link auf der Leinwand aus
- Gehen Sie zu Elementeinstellungen > Lightbox-Link-Einstellungen
- Klicken Sie auf das "lila Punkt"-Symbol im Medien-Feld
- Wählen Sie das Mehrfachbild-Feld aus
Sie können auch ein Lightbox mit einem Mehrfachbild-Feld verbinden, wenn das Lightbox zu Collection-Listen oder Collection-Seiten hinzugefügt wird.
Wie man Lightboxes mit Lightbox-Gruppen verlinkt
Sie können mehrere Lightboxes miteinander verlinken, um eine Diashow-Galerie zu erstellen. Wenn ein Besucher der Website auf ein verlinktes Lightbox klickt, öffnet sich das Lightbox mit allen Medien, die mit der verlinkten Gruppe verbunden sind.
Wie man eine Lightbox-Gruppe erstellt
- Wählen Sie ein beliebiges Element in einem Lightbox aus
- Gehen Sie zu Elementeinstellungen > Lightbox-Einstellungen
- Geben Sie einen Gruppennamen im Feld Gruppennamen erstellen oder abgleichen ein
Lightboxes mit demselben Gruppennamen sind in einer Gruppe verlinkt.
Für Lightboxes in Collection-Listen gilt: Wenn Sie ein Lightbox in einem Collection-Element erstellen und verlinken, werden automatisch alle Lightboxes in der Collection-Liste verlinkt.
Erstellen Sie mehrere Lightbox-Gruppen auf einer Seite
Wenn es mehrere Lightboxen auf derselben Seite gibt, können Sie sie trennen, indem Sie jeder Lightbox-Gruppe einen anderen Gruppennamen zuweisen.