Möchten Sie ein Leuchtpult in WordPress erstellen, ohne Ihre Website zu verlangsamen oder Code zu schreiben?
Mit einem Leuchtkasten können Besucher auf ein Bild oder ein Video klicken und es in einem Popup-Fenster ohne Ablenkung ansehen, anstatt eine neue Registerkarte zu öffnen. Dadurch wirken Ihre Galerien professioneller, verbessern das Nutzererlebnis und halten die Besucher länger auf Ihrer Website.
In dieser Anleitung zeige ich Ihnen zwei einfache Möglichkeiten, wie Sie Schritt für Schritt eine WordPress-Lightbox hinzufügen können, damit Sie die Methode wählen können, die für Ihre Website am besten geeignet ist.
Schnelle Schritte zum Erstellen eines Leuchtkastens in WordPress:
Was ist eine Lightbox in WordPress?
Ein Leuchtkasten ist ein Pop-up-Fenster, das oben auf Ihrer Seite erscheint, wenn ein Besucher auf ein Bild, ein Video oder einen Link klickt. Der Rest der Seite wird im Hintergrund abgeblendet, sodass der Inhalt im Leuchtkasten im Mittelpunkt steht.
Diese Funktion ist beliebt, weil sie:
- Ermöglicht die Anzeige größerer Versionen von Bildern, ohne die Seite zu verlassen
- Reduziert Ablenkungen, indem der Hintergrund ausgegraut bleibt
- Schafft ein professionelleres, ausgefeiltes Galerieerlebnis
Leuchtkästen werden häufig für Bildergalerien, Produktfotos, Videos und sogar Opt-in-Formulare verwendet. Sobald die Besucher fertig sind, klicken sie einfach auf die Schaltfläche "Schließen", um zur Hauptseite zurückzukehren.
Wann sollten Sie eine Lightbox in WordPress verwenden?
Ein Leuchtkasten ist immer dann eine gute Wahl, wenn Sie möchten, dass sich die Besucher auf einen bestimmten Inhalt konzentrieren, ohne die Seite zu verlassen. Dies ist besonders hilfreich, wenn Sie die Besucher bei der Stange halten und zusätzliche Seitenladevorgänge reduzieren möchten.
Häufige Verwendungszwecke für ein WordPress-Leuchtpult sind:
- Präsentation von Fotografie oder kreativen Portfolios
- Anzeige von Produktbildern mit mehr Details
- Hervorhebung von Screenshots, Design-Mockups oder Beispielen von Arbeiten
- Ablenkungsfreie Wiedergabe von Videos von YouTube oder Vimeo
Sie können Leuchtkästen auch für Anmeldeformulare oder wichtige Ankündigungen verwenden. Da der Rest der Seite im Hintergrund verdunkelt wird, ist es wahrscheinlicher, dass die Besucher die Nachricht wahrnehmen und mit ihr interagieren.
Wie man eine Lightbox in WordPress mit SeedProd erstellt
Zunächst zeigen wir Ihnen, wie Sie mit SeedProd, dem besten WordPress-Website-Builder, eine Bild-Lightbox in WordPress erstellen können.
| Werkzeug: WordPress Page Builder |
| Preisgestaltung: Unterschiedlich (kostenlose und kostenpflichtige Optionen verfügbar) |
| Freie Version: Ja |
| Herausragende Eigenschaften: 🔹 Visueller Drag-and-Drop-Editor 🔹 Einfaches Umschalten zwischen Bilder-Leuchtkästen 🔹 Schnell und einsteigerfreundlich |
| Am besten geeignet für: Anfänger, die eine WordPress-Lightbox ohne Code hinzufügen möchten |
SeedProd wird mit vorgefertigten Website-Kits und Landing Page-Vorlagen geliefert, mit denen Sie mit wenigen Klicks ein WordPress-Website-Design erstellen können. Anschließend können Sie Ihre Website mit dem Drag-and-Drop-Seiten-Builder und anpassbaren WordPress-Blöcken und -Abschnitten anpassen.
Mit dem Image-Block von SeedProd können Sie ein Leuchtpult aktivieren, um große Versionen Ihrer WordPress-Galerie-Bilder anzuzeigen.
Bevor wir weitermachen, sehen wir uns an, was Sie sonst noch mit SeedProd machen können:
- Erstellen Sie konvertierende Landing Pages(404, Verkaufsseiten, Squeeze-Seiten, Webinarseiten, Danksagungen und Anmeldeseiten)
- Erstellen Sie eine benutzerdefinierte WooCommerce-Website für Ihr Online-Geschäft
- Kontrollieren Sie, wer Ihre "Demnächst"- oder Wartungsmodus-Seite umgehen kann
- Personalisieren Sie Ihre Landing Pages mit dynamischem Text
- Vergrößern Sie Ihre E-Mail-Liste mit E-Mail-Marketing-Integrationen und dem Dashboard zur Abonnentenverwaltung.
- Und vieles mehr.
Schritt 1. Installieren und Aktivieren von SeedProd
Gehen Sie zunächst auf die Preisseite von SeedProd, wählen Sie einen Lizenzplan und erstellen Sie Ihr SeedProd-Konto. Sobald Sie sich in Ihrem Konto-Dashboard befinden, gehen Sie auf die Registerkarte Downloads und laden Sie die SeedProd-Plugin-Datei auf Ihren Computer herunter.
Kopieren Sie dabei den Lizenzschlüssel, da Sie ihn in Kürze benötigen werden.
Nachdem Sie das Plugin heruntergeladen haben, installieren und aktivieren Sie es auf Ihrer WordPress-Website. Sie können diese Anleitung zur Installation eines WordPress-Plugins befolgen, wenn Sie dies noch nie getan haben.
Wenn das SeedProd-Plugin auf Ihrer Website aktiv ist, navigieren Sie zu SeedProd " Einstellungen und fügen Sie den zuvor kopierten Lizenzschlüssel in das entsprechende Feld ein. Klicken Sie nun auf die Schaltfläche " Schlüssel überprüfen" und fahren Sie mit dem nächsten Schritt fort.
Schritt 2. Erstellen Sie ein WordPress-Theme oder eine Landing Page
Der nächste Schritt besteht darin, Ihr WordPress-Theme oder Ihre Landing Page zu erstellen. Mit dem SeedProd-Plugin können Sie beides tun, aber wenn Sie sich nicht sicher sind, welche Option Sie verwenden sollen, finden Sie hier eine Erklärung:
- Theme Builder - Mit dem Theme Builder können Sie Ihr aktuelles WordPress-Theme durch ein neues, individuelles Theme ersetzen. Sie können aus vielen vorgefertigten Website-Kits wählen und Ihr Design mit 1 Klick installieren. SeedProd erstellt dann alle Teile Ihres Themes und erlaubt Ihnen, diese mit dem Seiten-Builder visuell anzupassen.
- Landing Page Builder - Mit dem Landing Page Builder können Sie eigenständige Landing Pages erstellen, die neben Ihrem aktuellen WordPress-Theme funktionieren. Sie können aus verschiedenen responsiven Landing Page-Vorlagen wählen und diese dann mit dem Drag-and-Drop Page Builder anpassen.
Mit beiden Lösungen können Sie Ihrem Design Bild-Leuchtkästen hinzufügen, also wählen Sie die Lösung, die Ihren Anforderungen am besten entspricht. Wenn Sie Hilfe beim Start benötigen, finden Sie hier einige Anleitungen zum Erstellen eines benutzerdefinierten WordPress-Themes und zum Erstellen einer Landing Page mit SeedProd.
Sobald Sie Ihre Vorlagen ausgewählt und das Gerüst für Ihre Landing Page oder Ihr Thema erstellt haben, können Sie Schritt 3 befolgen, um Ihrem Design ein Leuchtpult für Bilder hinzuzufügen.
Schritt 3. Entscheiden Sie, wo Sie Ihre Image-Lightbox hinzufügen möchten
Jetzt ist es an der Zeit zu entscheiden, wo Sie Ihr WordPress-Bilder-Leuchtpult einfügen möchten.
In dieser Anleitung erstellen wir eine Innenarchitektur-Website mit einer benutzerdefinierten Portfolio-Seite mit dem Theme-Builder, also bearbeiten wir die Seite mit SeedProd, um den Drag-and-Drop-Builder zu öffnen.
Wenn Sie Ihren Entwurf öffnen, sehen Sie ein zweispaltiges Layout mit Blöcken und Abschnitten auf der linken Seite und eine Entwurfsvorschau auf der rechten Seite. Sie können Elemente in Ihrer Vorschau durch Klicken, Ziehen und Ablegen verschieben.
Beginnen wir mit dem Hinzufügen einer neuen Spalte für unsere Portfoliobilder. Ziehen Sie in der Seitenleiste den Block Spalten auf Ihre Seite und wählen Sie ein Layout-Design.
Ziehen Sie dann den Bildblock in jede Spalte des Seitenbereichs.
Von dort aus können Sie auf jeden Bildblock klicken und ein Bild von Ihrem Computer oder Ihrer WordPress-Mediathek hochladen.
Jetzt können Sie zu jedem Bild in Ihrer Galerie einen Leuchtkasten hinzufügen. Klicken Sie dazu einfach auf einen beliebigen Bildblock, suchen Sie die Überschrift "Link-Typ" und wählen Sie die Option Medien - Leuchtkasten aus dem Dropdown-Menü.
Wiederholen Sie diesen Vorgang für jeden einzelnen Bildlink in Ihrer Galerie und klicken Sie dann auf die Schaltfläche Speichern in der oberen rechten Ecke, um Ihre Änderungen zu speichern.
Schritt 4. Veröffentlichen Sie Ihre Änderungen
Der letzte Schritt besteht darin, Ihre responsive Lightbox-Galerie auf Ihrer WordPress-Website zu veröffentlichen. Um dies für ein benutzerdefiniertes WordPress-Theme zu tun, gehen Sie in Ihrem WordPress-Admin zu SeedProd " Theme Builder und schalten Sie den Schalter "SeedProd Theme aktivieren" auf "Ja".
Wenn Sie eine Landing Page veröffentlichen, öffnen Sie sie im Page Builder, klicken Sie auf den Dropdown-Pfeil der Schaltfläche Speichern und wählen Sie Veröffentlichen.
Jetzt können Sie sich Ihr neues Design ansehen, um zu sehen, wie es aussieht.
Und wenn Sie auf ein beliebiges Bild in Ihrer Galerie klicken, öffnet sich ein reaktionsfähiges, bildschirmfüllendes Leuchtpult.
Wie man mit einem Galerie-Plugin einen Leuchtkasten für Bilder erstellt
Eine weitere Möglichkeit, Ihrer WordPress-Website einen Leuchtkasten für Bilder hinzuzufügen, ist ein WordPress-Galerie-Plugin. Für diese Methode verwenden wir Envira Gallery, eines der beliebtesten Galerie-Plugins für WordPress.
| Werkzeug: Envira Galerie Plugin |
| Preisgestaltung: Beginnt bei $26/Jahr |
| Freie Version: Ja |
| Herausragende Eigenschaften: 🔹 Drag-and-Drop-Galerieerstellung 🔹 Eingebaute Leuchtkasten-Einstellungen 🔹 Mobile-responsive Vorlagen |
| Am besten geeignet für: Benutzer, die eine erweiterte Anpassung der Galerie benötigen |
Mit diesem leichtgewichtigen Drag-and-Drop-Plugin für Bildergalerien können Sie optimierte Bildergalerien für Beiträge, Seiten, Widgetbereiche und Seitenleisten erstellen. Das Plugin ist außerdem einfach zu bedienen und geschwindigkeitsoptimiert, sodass Ihre Bilder für Website-Besucher schnell geladen werden.
Installieren und aktivieren Sie zunächst das Envira Gallery Plugin auf Ihrer WordPress-Website. Navigieren Sie dann zu Envira Gallery " Add New, um eine neue Bildergalerie zu erstellen.
Sie können Bilder zu Ihrer Galerie hinzufügen, indem Sie auf die Schaltfläche Dateien von Ihrem Computer auswählen klicken. Wenn Sie jedoch Bilder aus Ihrer Medienbibliothek verwenden möchten, klicken Sie auf die Schaltfläche Dateien aus anderen Quellen auswählen.
Nachdem Sie Bilder zu Ihrer Galerie hinzugefügt haben, können Sie sie durch Ziehen und Ablegen der Miniaturbilder neu anordnen.
Klicken Sie nun auf die Registerkarte Konfiguration, um Ihre Galerieeinstellungen zu konfigurieren.
Auf diesem Bildschirm können Sie:
- Ändern Sie die Anzahl der Galeriespalten
- Langsames Laden für Bilder aktivieren
- Anzeige der Galeriebeschreibung
- Aktivieren von Titeln und Beschriftungen
- Festlegen der Bildgröße und der Zuschneideposition
- Ändern Sie das Thema der Galerie
- Anpassen der Ränder und Abstände
Klicken Sie anschließend auf die Registerkarte Leuchtkasten, auf der Sie die Einstellungen für den Leuchtkasten anpassen können.
Stellen Sie zunächst sicher, dass die Option Leuchtkasten aktivieren aktiviert ist, und passen Sie dann die Einstellungen an, um das Thema des Leuchtkastens zu ändern, Beschriftungen anzuzeigen, Übergangseffekte hinzuzufügen und vieles mehr.
Wenn Sie mit Ihren Galerieeinstellungen zufrieden sind, klicken Sie auf die Schaltfläche Veröffentlichen in der oberen rechten Ecke.
Um Ihre Galerie für Website-Besucher anzuzeigen, erstellen oder bearbeiten Sie einen Beitrag oder eine Seite und klicken Sie dann auf das Plus-Symbol (+) im WordPress-Block-Editor, um einen neuen WordPress-Block hinzuzufügen.
Suchen oder scrollen Sie, bis Sie den Envira-Galerie-Block sehen, und klicken Sie darauf, um ihn zu Ihrer Seite hinzuzufügen.
Wählen Sie anschließend Ihre Galerie aus dem Dropdown-Menü aus, um eine Vorschau Ihrer Leuchtkasten-Galerie anzuzeigen.
Sie können dann auf die Schaltfläche Aktualisieren oder Veröffentlichen klicken, um Ihre Änderungen zu speichern.
Wenn Sie Ihre Seite in der Vorschau anzeigen, sollte Ihre Galerie ähnlich wie in diesem Beispiel aussehen:
Sie können dann auf ein beliebiges Bild klicken, um es in einer ansprechenden Lightbox-Galerie wie dieser zu betrachten:
Bonus: Envira-Galerie zu SeedProd-Seiten hinzufügen
Wenn Sie Ihre WordPress-Seiten mit SeedProd erstellen, können Sie Ihre Envira Gallery Lightbox-Galerien einfach direkt in jede Seite oder Vorlage einfügen. Dies macht es einfach, Ihre Bilder auf professionelle Weise zu präsentieren, ohne Shortcodes oder zusätzliche Schritte zu verwenden.
- Öffnen Sie Ihre SeedProd-Seite oder -Vorlage im Drag-and-Drop-Editor.
- Suchen Sie in der Seitenleiste nach dem Envira-Galerie-Block und ziehen Sie ihn auf Ihre Seite.
- Wählen Sie Ihre Galerie aus dem Dropdown-Menü und passen Sie die Anzeigeeinstellungen an.
Mit dieser Integration können Sie den flexiblen Page Builder von SeedProd mit den leistungsstarken Lightbox-Funktionen von Envira Gallery kombinieren, so dass Sie auf jeder Seite Ihrer Website wunderschöne, hochkonvertierende Bildergalerien erstellen können.
FAQs zum Erstellen einer Lightbox in WordPress
Das Hinzufügen eines Leuchtkastens zu Ihrer WordPress-Website ist eine der einfachsten Möglichkeiten, Ihre Bilder, Videos oder Galerien professioneller aussehen zu lassen. Es sorgt dafür, dass sich die Besucher auf Ihren Inhalt konzentrieren und verhindert, dass sie die Seite unnötig verlassen.
Egal, ob Sie einen Page Builder oder ein Galerie-Plugin verwenden, die Einrichtung dauert nur ein paar Minuten. Wählen Sie die Methode, die am besten zu Ihrer Website passt, befolgen Sie die Schritte, und schon haben Sie eine funktionierende WordPress-Lightbox.
Hier finden Sie einige weitere hilfreiche Anleitungen, die Ihnen gefallen könnten:
- Hinzufügen einer Galerie zu WordPress Posts und Seiten
- Erstellen von Registerkarten in WordPress für atemberaubende Inhalte mit Registerkarten
- Hinzufügen eines Tweet-Buttons zu WordPress (3 Möglichkeiten)
- Hinzufügen einer benutzerdefinierten Schaltfläche "Add-to-Cart" in WooCommerce
Vielen Dank fürs Lesen! Wir würden uns freuen, Ihre Meinung zu hören. Bitte beteiligen Sie sich an der Konversation auf YouTube, X und Facebook, um weitere hilfreiche Ratschläge und Inhalte für das Wachstum Ihres Unternehmens zu erhalten.
