So fügen Sie eine Lightbox in WordPress hinzu (3 Methoden, einschließlich der kostenlosen integrierten) 

Sie fügen ein paar Bilder auf einer Seite ein, und wenn Sie auf eines klicken, passiert entweder nichts oder der Besucher landet auf einer hässlichen Anhangsseite. Was Sie eigentlich wollen, ist eine Lightbox, bei der sich das Bild in einem sauberen Pop-up öffnet und der Rest der Seite dahinter abgedunkelt wird.

Ich habe jahrelang einen Interior-Design-Blog betrieben, daher weiß ich, wie sehr ein Portfolio davon abhängt, wie Bilder angezeigt werden. In diesem Leitfaden zeige ich Ihnen drei Möglichkeiten, eine Lightbox in WordPress zu erstellen, beginnend mit der kostenlosen integrierten Option, die die meisten Anleitungen überspringen.

Was ist eine Lightbox (und wann sollten Sie eine verwenden)?

Eine Lightbox in WordPress ist ein Pop-up-Overlay, das ein Bild, Video oder einen Inhalt vergrößert, wenn ein Besucher darauf klickt, und den Rest der Seite abdunkelt, damit der Inhalt im Fokus steht.

Greifen Sie auf eine Lightbox zurück, wann immer Sie möchten, dass Besucher sich auf ein Inhaltselement konzentrieren, ohne die Seite zu verlassen. Es hält die Leute beschäftigt und spart zusätzliche Seitenaufrufe.

Häufige Anwendungsfälle für eine WordPress-Lightbox sind:

• Präsentation von Fotografie oder kreativen Portfolios
• Anzeige von Produktbildern mit mehr Details
• Hervorhebung von Screenshots, Design-Mockups oder Arbeitsbeispielen
• Wiedergabe von Videos von YouTube oder Vimeo auf ablenkungsfreie Weise

Sie können Lightboxen auch für Anmeldeformulare oder wichtige Ankündigungen verwenden. Da der Hintergrund abgedunkelt wird, bemerken Besucher die Nachricht eher und handeln entsprechend.

Welche Lightbox-Methode sollten Sie verwenden?

Wenn Sie nur eine Lightbox für eine einzelne Galerie benötigen, ist die kostenlose integrierte Option normalerweise ausreichend. Wählen Sie SeedProd, wenn Sie Seiten oder ein Theme visuell erstellen, und Envira, wenn Sie erweiterte Galerie-Steuerelemente wie Bildunterschriften und Übergangseffekte wünschen.

Methode	Am besten für	Plugin benötigt?
Integrierte WordPress-Lightbox	Eine schnelle Lightbox für ein einzelnes Bild oder eine Galerie	Nein
SeedProd	Visuelles Erstellen von Seiten oder eines vollständigen Themes	Ja (SeedProd)
Envira Gallery	Erweiterte Galerie-Steuerung und Anpassung	Ja (Envira)

Methode 1: Verwenden Sie die integrierte WordPress-Lightbox (kein Plugin)

Der schnellste Weg, eine Lightbox hinzuzufügen, ist der, der direkt in WordPress integriert ist. Seit Version 6.4 verfügt der Bildblock über eine integrierte Option Beim Klicken vergrößern, die Bilder in einer nativen Lightbox öffnet, kein Plugin erforderlich.

Sie benötigen WordPress 6.4 oder höher und den Block-Editor. Der klassische Editor hat diese Option nicht.

Hier ist der Teil, der Leute stolpert: Es ist eine Link-Option, kein Seitenleisten-Umschalter. Fügen Sie einen Bild-Block hinzu, wählen Sie das Bild aus und klicken Sie dann auf das Link-Symbol (Kette) in der Block-Symbolleiste.

Schalten Sie im erscheinenden Popover Auf Klick vergrößern ein.

Speichern Sie die Seite, und dieses Bild wird nun in einem vergrößerten Lightbox-Fenster geöffnet.

Ein ehrlicher Haken: Dies ist zuverlässig für einzelne Bilder, aber nicht für den Galerie-Block. WordPress hat die Option zuerst zum Bild-Block hinzugefügt, und in vielen Versionen fehlt sie immer noch in Galerien.

Wenn Sie also eine Lightbox für eine ganze Galerie wünschen, kämpfen Sie nicht gegen die integrierte Option. Verwenden Sie eine der unten aufgeführten Plugin-Methoden, die Galerien ordnungsgemäß behandeln.

Ich greife darauf zurück, wann immer ich nur ein einzelnes Bild vergrößern muss, da nichts installiert, aktualisiert oder die Seite verlangsamt werden muss. Die Grenze ist, wie viel Kontrolle Sie haben.

Sie erhalten ein sauberes Pop-up, aber keine Bildunterschriften, Designs oder Übergangseffekte und keine echte Galerieunterstützung. Dafür benötigen Sie eine der nächsten beiden Methoden.

Methode 2: Erstellen Sie eine Lightbox in WordPress mit SeedProd

Wenn Sie eine Seite oder ein ganzes Theme gestalten, können Sie mit SeedProd den Lightbox-Effekt aktivieren, während Sie bauen, sodass Sie ihn live arbeiten sehen können, ohne Code anzufassen. SeedProd ist ein Drag-and-Drop-Website-Builder für WordPress, und sein Bild-Block verfügt über eine integrierte Lightbox-Option.

Werkzeug	WordPress Website Builder
Preise	Kostenlose und kostenpflichtige Optionen verfügbar
Kostenlose Version	Ja
Herausragende Merkmale	Visueller Drag-and-Drop-Editor, integrierter Bild-Lightbox-Schalter, anfängerfreundlich
Am besten für	Anfänger, die eine Code-freie Möglichkeit suchen, eine WordPress-Lightbox hinzuzufügen

SeedProd kommt mit vorgefertigten Website-Kits und Landingpage-Vorlagen, sodass Sie mit wenigen Klicks ein Design erstellen und es mit dem Drag-and-Drop-Builder anpassen können.

Mit SeedProd's Bild-Block können Sie eine Lightbox aktivieren, um große Versionen Ihrer Galeriebilder anzuzeigen, und das ist die Funktion, die wir als nächstes einrichten werden.

Schritt 1: SeedProd installieren und aktivieren

Gehen Sie zuerst zur SeedProd-Preisseite, wählen Sie einen Lizenzplan und erstellen Sie Ihr SeedProd-Konto. Sobald Sie sich in Ihrem Kontodashboard befinden, gehen Sie zum Tab Downloads und laden Sie die SeedProd-Plugin-Datei auf Ihren Computer herunter.

Kopieren Sie währenddessen den Lizenzschlüssel, da Sie ihn bald benötigen werden.

Nachdem Sie das Plugin heruntergeladen haben, installieren und aktivieren Sie es auf Ihrer WordPress-Website. Sie können dieser Anleitung zum Installieren eines WordPress-Plugins folgen, wenn Sie dies noch nie zuvor getan haben.

Wenn SeedProd aktiv ist, gehen Sie zu SeedProd » Einstellungen und fügen Sie den zuvor kopierten Lizenzschlüssel ein. Klicken Sie auf die Schaltfläche Schlüssel überprüfen und fahren Sie mit dem nächsten Schritt fort.

Schritt 2: Erstellen Sie ein Theme oder eine Landingpage

Der nächste Schritt ist der Beginn des Erstellens Ihres WordPress-Themes oder Ihrer Landingpage. SeedProd ermöglicht Ihnen beides, hier ist der Unterschied:

• Theme Builder: Der Theme Builder ersetzt Ihr aktuelles WordPress-Theme durch ein benutzerdefiniertes. Wählen Sie aus vielen Website-Kits, installieren Sie ein Design mit einem Klick und passen Sie dann jeden Teil visuell an.
• Landing Page Builder: Der Landing Page Builder erstellt eigenständige Seiten, die neben Ihrem aktuellen Theme funktionieren. Wählen Sie eine responsive Vorlage und passen Sie sie dann mit dem Drag-and-Drop-Builder an.

Beide ermöglichen das Hinzufügen von Bild-Lightboxes. Wählen Sie also diejenige, die Ihren Bedürfnissen entspricht. Wenn Sie Hilfe beim Einstieg benötigen, finden Sie hier Tutorials zum Erstellen eines benutzerdefinierten WordPress-Themes und zum Erstellen einer Landing Page mit SeedProd.

Schritt 3: Entscheiden Sie, wo Sie Ihre Lightbox hinzufügen möchten

Entscheiden Sie nun, wo die Bild-Lightbox platziert werden soll. Für diese Anleitung erstelle ich eine Portfolio-Seite für Innenarchitektur mit dem Theme Builder, daher bearbeite ich die Seite mit SeedProd, um den Drag-and-Drop-Builder zu öffnen.

Wenn Ihr Design geöffnet wird, sehen Sie links Blöcke und Abschnitte und rechts eine Live-Vorschau. Sie können Elemente durch Klicken, Ziehen und Ablegen verschieben.

Beginnen Sie mit dem Hinzufügen einer neuen Spalte für Ihre Portfolio-Bilder. Ziehen Sie aus der Seitenleiste den Block Spalten auf Ihre Seite und wählen Sie ein Layout.

Ziehen Sie als Nächstes den Block Bild in jede Spalte.

Klicken Sie auf jeden Bildblock und laden Sie ein Bild von Ihrem Computer oder Ihrer Mediathek hoch.

Fügen Sie nun jeder Bild-Lightbox hinzu. Klicken Sie auf einen Bildblock, suchen Sie die Überschrift Link-Typ und wählen Sie Medium – Lightbox aus dem Dropdown-Menü.

Wiederholen Sie dies für jedes Bild in Ihrer Galerie und klicken Sie dann auf die Schaltfläche Speichern in der oberen rechten Ecke.

Schritt 4: Veröffentlichen Sie Ihre Änderungen

Der letzte Schritt ist die Veröffentlichung Ihrer Lightbox-Galerie. Für ein benutzerdefiniertes Theme gehen Sie zu SeedProd » Theme Builder und schalten Sie den Schalter „SeedProd Theme aktivieren“ auf „Ja“.

Wenn Sie eine Landing Page veröffentlichen, öffnen Sie diese im Page Builder, klicken Sie auf den Dropdown-Pfeil der Schaltfläche Speichern und wählen Sie Veröffentlichen.

Sehen Sie sich nun Ihr neues Design an, um zu sehen, wie es aussieht.

Klicken Sie auf ein beliebiges Bild in Ihrer Galerie, und es öffnet sich in einer responsiven Vollbild-Lightbox.

Methode 3: Erstellen Sie eine Lightbox mit einem Galerie-Plugin

Für mehr Kontrolle über das Aussehen und Verhalten Ihrer Galerie verwenden Sie ein WordPress-Galerie-Plugin. Ich werde Envira Gallery verwenden, eines der beliebtesten Galerie-Plugins für WordPress und ein Werkzeug, das ich aus dem WordPress-Ökosystem gut kenne.

Werkzeug	Envira Gallery Plugin
Preise	Ab 39,50 $/Jahr (normalerweise 79 $)
Kostenlose Version	Ja, Envira Gallery Lite
Herausragende Merkmale	Drag-and-Drop-Galerie-Builder, integrierte Lightbox-Einstellungen, mobil-responsive Vorlagen
Am besten für	Benutzer, die erweiterte Galerie-Anpassungen benötigen

Mit diesem leichten Bildergalerie-Plugin können Sie optimierte Galerien für Beiträge, Seiten, Widget-Bereiche und Seitenleisten erstellen. Es ist auch geschwindigkeitsoptimiert, sodass Ihre Bilder für Besucher schnell geladen werden.

Beginnen Sie mit der Installation und Aktivierung des Envira Gallery-Plugins. Gehen Sie dann zu Envira Gallery » Neu hinzufügen, um eine neue Galerie zu erstellen.

Bilder hinzufügen, indem Sie auf Dateien von Ihrem Computer auswählen klicken. Um Bilder zu verwenden, die sich bereits in Ihrer Mediathek befinden, klicken Sie stattdessen auf Dateien aus anderen Quellen auswählen.

Nachdem Sie Bilder hinzugefügt haben, können Sie sie durch Ziehen und Ablegen der Miniaturansichten neu anordnen. Klicken Sie dann auf die Registerkarte Konfiguration, um Ihre Galerie einzurichten.

Auf diesem Bildschirm können Sie:

• Die Anzahl der Galerie-Spalten ändern
• Lazy Loading für Bilder aktivieren
• Die Galerie-Beschreibung anzeigen
• Titel und Bildunterschriften aktivieren
• Die Bildgröße und die Zuschnittposition festlegen
• Das Galerie-Thema ändern
• Ränder und Abstände anpassen

Klicken Sie anschließend auf die Registerkarte Lightbox, um die Lightbox selbst einzurichten.

Stellen Sie sicher, dass die Option Lightbox aktivieren aktiviert ist. Von dort aus können Sie das Lightbox-Design ändern, Bildunterschriften anzeigen, Übergangseffekte hinzufügen und vieles mehr.

Wenn Sie mit den Einstellungen zufrieden sind, klicken Sie auf die Schaltfläche Veröffentlichen in der oberen rechten Ecke.

Um die Galerie Besuchern anzuzeigen, bearbeiten Sie einen Beitrag oder eine Seite, klicken Sie im Block-Editor auf das Pluszeichen (+), suchen Sie nach dem Block Envira Gallery und fügen Sie ihn hinzu.

Wählen Sie Ihre Galerie aus dem Dropdown-Menü aus, um sie in der Vorschau anzuzeigen.

Klicken Sie auf Aktualisieren oder Veröffentlichen, um Ihre Änderungen zu speichern. Wenn Sie die Seite in der Vorschau anzeigen, sollte Ihre Galerie wie folgt aussehen:

Klicken Sie auf ein beliebiges Bild, um es in einer responsiven Lightbox-Galerie wie dieser anzuzeigen:

Bonus: Envira Gallery zu SeedProd-Seiten hinzufügen

Wenn Sie Seiten mit SeedProd erstellen, können Sie Ihre Envira Gallery Lightboxen direkt in jede Seite oder jedes Template einfügen. Das bedeutet keine Shortcodes und keine zusätzlichen Schritte.

1. Öffnen Sie Ihre SeedProd-Seite oder -Vorlage im Drag-and-Drop-Editor.
2. Suchen Sie im Seitenbereich nach dem Envira Gallery-Block und ziehen Sie ihn auf Ihre Seite.
3. Wählen Sie Ihre Galerie aus dem Dropdown-Menü aus und passen Sie die Anzeigeeinstellungen an.

Dies kombiniert den flexiblen Seitenersteller von SeedProd mit den Lightbox-Funktionen von Envira, sodass Sie auf jeder Seite Ihrer Website professionelle Bildergalerien erstellen können.

Warum funktioniert meine Lightbox nicht?

Wenn Sie auf ein Bild klicken und die Lightbox nicht geöffnet wird, liegt die Ursache normalerweise an einigen häufigen Problemen. Gehen Sie diese Prüfungen durch:

• Falsches Linkziel: Jedes Bild muss auf seine Mediendatei verlinken, nicht auf seine Anhangsseite. Ein Link zur Anhangsseite leitet Besucher zu einer separaten Seite weiter, anstatt das Pop-up zu öffnen.
• Konflikt mit Theme oder Plugin: Wenn Ihr Theme oder ein anderes Galerie-Plugin ebenfalls eine Lightbox hinzufügt, können sich die beiden Skripte überschneiden. Deaktivieren Sie eines und testen Sie erneut.
• Caching: Ein Caching-Plugin oder CDN kann eine alte Version der Seite ausliefern. Leeren Sie Ihren Cache und laden Sie dann neu.
• Verhalten auf Mobilgeräten: Testen Sie die Lightbox immer auf einem Telefon oder Tablet, da das Touch-Verhalten von Desktop-Klicks abweichen kann.

FAQs zum Erstellen einer Lightbox in WordPress

Hat WordPress eine integrierte Lightbox?

Ja. Seit WordPress 6.4 enthalten die Kernblöcke Bild und Galerie im Einstellungsbereich eine Umschaltfläche „Beim Klicken erweitern“. Aktivieren Sie sie, und Ihre Bilder werden in einer nativen Lightbox ohne Plugin geöffnet.

Wie füge ich eine Lightbox zu einer WordPress-Galerie ohne Plugin hinzu?

Fügen Sie Ihrer Beitrags- oder Seitenebene einen Kern-Galerieblock hinzu und laden Sie Ihre Bilder hoch. Wählen Sie den Block aus, öffnen Sie den Einstellungsbereich und aktivieren Sie „Beim Klicken erweitern“. Speichern Sie die Seite, und ein Klick auf ein beliebiges Bild öffnet es in einer Vollbild-Lightbox.

Warum funktioniert meine WordPress-Lightbox nicht?

Die häufigste Ursache ist, dass das Bild auf seine Anhangseite statt auf seine Mediendatei verlinkt. Stellen Sie jede Bild auf die Mediendatei ein. Ein Konflikt zwischen Themes oder Plugins oder eine zwischengespeicherte alte Seite kann dies ebenfalls verhindern. Deaktivieren Sie daher widersprüchliche Lightbox-Skripte und leeren Sie Ihren Cache.

Kann ich eine Lightbox sowohl für Videos als auch für Bilder verwenden?

Ja. Viele Lightbox-Tools öffnen YouTube- oder Vimeo-Videos in einem Pop-up, genau wie Bilder. Es ist eine gute Möglichkeit, Produktdemos oder Tutorials anzuzeigen, ohne Besucher von Ihrer Website wegzuschicken.

Was ist das beste kostenlose WordPress-Lightbox-Plugin?

Beliebte kostenlose Optionen sind Envira Gallery Lite, Simple Lightbox und WP Featherlight. Sie sind einfach zu bedienen und decken die grundlegenden Lightbox-Einstellungen ab. Sie können später auf eine kostenpflichtige Version für erweiterte Funktionen upgraden.

Fügen Sie noch heute Ihre WordPress Lightbox hinzu

Diese hässliche Anhangseite ist jetzt ein sauberes Pop-up, das Besucher auf Ihren Inhalten hält. Wählen Sie die Methode, die zu Ihrer Website passt, sei es der kostenlose integrierte Schalter, SeedProd oder Envira, und Sie haben in wenigen Minuten eine funktionierende Lightbox.

Hier sind einige weitere hilfreiche Tutorials, die Ihnen gefallen könnten:

• So fügen Sie eine Galerie zu WordPress-Beiträgen und -Seiten hinzu
• So erstellen Sie Tabs in WordPress für beeindruckende Tab-Inhalte
• So fügen Sie einen Tweet-Button zu WordPress hinzu (3 Wege)
• So fügen Sie eine benutzerdefinierte In den Warenkorb-Schaltfläche in WooCommerce ein

Danke fürs Lesen! Wir würden uns freuen, Ihre Gedanken zu hören. Treten Sie also gerne der Unterhaltung auf YouTube, X und Facebook bei, um weitere hilfreiche Ratschläge und Inhalte für das Wachstum Ihres Unternehmens zu erhalten.