Möchten Sie eine Lightbox in WordPress erstellen, ohne Ihre Website zu verlangsamen oder Code zu schreiben?
Eine Lightbox ermöglicht es Besuchern, auf ein Bild oder Video zu klicken und es in einem ablenkungsfreien Pop-up anzuzeigen, anstatt in einem neuen Tab. Dies lässt Ihre Galerien professioneller wirken, verbessert die Benutzererfahrung und bindet die Besucher länger auf Ihrer Website.
In diesem Leitfaden zeige ich Ihnen zwei einfache Möglichkeiten, Schritt für Schritt eine WordPress-Lightbox hinzuzufügen, damit Sie die Methode wählen können, die am besten zu Ihrer Website passt.
Schnelle Schritte zum Erstellen einer Lightbox in WordPress:
Was ist eine Lightbox in WordPress?
Eine Lightbox ist ein Pop-up-Fenster, das über Ihrer Seite erscheint, wenn ein Besucher auf ein Bild, ein Video oder einen Link klickt. Der Rest der Seite wird im Hintergrund abgedunkelt, sodass der Inhalt in der Lightbox im Mittelpunkt steht.
Diese Funktion ist beliebt, weil sie:
- Benutzern ermöglicht, größere Versionen von Bildern anzuzeigen, ohne die Seite zu verlassen
- Ablenkungen reduziert, indem der Hintergrund ausgegraut bleibt
- Ein professionelleres, ausgefeilteres Galerieerlebnis schafft
Lightboxes werden oft für Bildergalerien, Produktfotos, Videos und sogar Anmeldeformulare verwendet. Wenn Besucher fertig sind, klicken sie einfach auf die Schließen-Schaltfläche, um zur Hauptseite zurückzukehren.
Wann sollten Sie eine Lightbox in WordPress verwenden?
Eine Lightbox ist eine gute Wahl, wenn Sie möchten, dass Besucher sich auf ein einzelnes Inhaltselement konzentrieren, ohne die Seite zu verlassen. Dies ist besonders hilfreich, wenn Sie die Besucher binden und zusätzliche Seitenaufrufe reduzieren möchten.
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 Lightboxes auch für Anmeldeformulare oder wichtige Ankündigungen verwenden. Da der Rest der Seite im Hintergrund abgedunkelt wird, bemerken Besucher die Nachricht eher und interagieren mit ihr.
So erstellen Sie eine Lightbox in WordPress mit SeedProd
Zuerst zeigen wir Ihnen, wie Sie eine Bilder-Lightbox in WordPress mit SeedProd, dem besten WordPress Website-Builder, erstellen.
| Tool: WordPress Page Builder |
| Preise: Variiert (kostenlose und kostenpflichtige Optionen verfügbar) |
| Kostenlose Version: Ja |
| Herausragende Funktionen: 🔹 Visueller Drag-and-Drop-Editor 🔹 Einfache Lightbox-Umschaltung für Bilder 🔹 Schnell und anfängerfreundlich |
| Am besten geeignet für: Anfänger, die eine Code-freie Möglichkeit suchen, eine WordPress-Lightbox hinzuzufügen |
SeedProd bietet vorgefertigte Website-Kits und Landingpage-Vorlagen, mit denen Sie mit wenigen Klicks ein WordPress-Website-Design erstellen können. Sie können Ihre Website dann mit seinem Drag-and-Drop-Seiteneditor und anpassbaren WordPress-Blöcken und -Abschnitten anpassen.
Mit dem Bildblock von SeedProd können Sie eine Lightbox aktivieren, um große Versionen Ihrer WordPress-Galeriebilder anzuzeigen. Diese Funktionen werden wir im folgenden Tutorial vorstellen.
Bevor wir weitermachen, hier ist, was Sie sonst noch mit SeedProd tun können:
- Erstellen Sie Landing Pages, die konvertieren, einschließlich (404, Verkaufsseiten, Squeeze Pages, Webinar-Seiten, Dankesseiten und Login-Seiten)
- Erstellen Sie eine benutzerdefinierte WooCommerce-Website für Ihren Online-Shop
- Kontrollieren Sie, wer Ihre „Coming Soon“- oder Wartungsmodus-Seite umgehen kann
- Personalisieren Sie Ihre Landing Pages mit dynamischem Text
- Erweitern Sie Ihre E-Mail-Liste mit E-Mail-Marketing-Integrationen und dem Dashboard zur Verwaltung von Abonnenten
- Und vieles mehr.
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.
Nach dem Herunterladen des Plugins 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 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. WordPress-Theme oder Landing Page erstellen
Der nächste Schritt ist der Aufbau Ihres WordPress-Themes oder Ihrer Landing Page. Das SeedProd-Plugin ermöglicht beides. Wenn Sie sich nicht sicher sind, welche Option Sie verwenden sollen, hier ist eine Erklärung:
- Theme Builder – Mit dem Theme Builder können Sie Ihr aktuelles WordPress-Theme durch ein neues benutzerdefiniertes 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, sodass Sie diese mit seinem Page Builder visuell anpassen können.
- Landing Page Builder – Der Landing Page Builder ermöglicht es Ihnen, eigenständige Landing Pages zu 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.
Beide Lösungen ermöglichen es Ihnen, Bild-Lightboxes zu Ihrem Design hinzuzufügen. Wählen Sie also diejenige, die Ihren Bedürfnissen am besten entspricht. Wenn Sie Hilfe beim Einstieg benötigen, finden Sie hier einige Tutorials zum Erstellen eines benutzerdefinierten WordPress-Themes und zum Erstellen einer Landing Page mit SeedProd.
Sobald Sie Ihre Vorlagen ausgewählt und das Grundgerüst für Ihre Landing Page oder Ihr Theme erstellt haben, können Sie Schritt 3 unten befolgen, um Ihrem Design eine Bild-Lightbox hinzuzufügen.
Schritt 3. Entscheiden Sie, wo Sie Ihre Bilder-Lightbox hinzufügen möchten
Nun ist es an der Zeit zu entscheiden, wo Sie Ihre WordPress-Bild-Lightbox hinzufügen möchten.
Für diese Anleitung erstellen wir eine Website für Innenarchitektur mit einer benutzerdefinierten Portfolio-Seite, die den Theme Builder verwendet. Daher bearbeiten wir die Seite mit SeedProd, um den Drag-and-Drop-Builder zu öffnen.
Wenn Sie Ihr Design öffnen, sehen Sie ein 2-Spalten-Layout mit Blöcken und Abschnitten auf der linken Seite und einer Designvorschau auf der rechten Seite. Sie können Elemente in Ihrer Vorschau verschieben, indem Sie sie anklicken, ziehen und ablegen.
Beginnen wir damit, eine neue Spalte für unsere Portfolio-Bilder hinzuzufügen. Ziehen Sie aus der Seitenleiste den Block Spalten auf Ihre Seite und wählen Sie ein Layout-Design.
Ziehen Sie als Nächstes den Block Bild in jede Spalte im Seitenbereich.
Von dort aus können Sie jeden Bildblock anklicken und ein Bild von Ihrem Computer oder der WordPress-Mediathek hochladen.
Jetzt können Sie jedem Bild in Ihrer Galerie ein Lightbox hinzufügen. Klicken Sie dazu einfach auf einen beliebigen Bildblock, suchen Sie die Überschrift „Link-Typ“ und wählen Sie aus dem Dropdown-Menü die Option Medium – Lightbox .
Wiederholen Sie dies 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 ist die Veröffentlichung Ihrer responsiven Lightbox-Galerie auf Ihrer WordPress-Website. 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 Landingpage veröffentlichen, öffnen Sie diese im Page Builder, klicken Sie auf den Dropdown-Pfeil der Schaltfläche Speichern und wählen Sie Veröffentlichen.
Jetzt können Sie Ihr neues Design anzeigen, um zu sehen, wie es aussieht.
Und wenn Sie auf ein beliebiges Bild in Ihrer Galerie klicken, öffnen Sie eine responsive Vollbild-Bild-Lightbox.
So erstellen Sie eine Bild-Lightbox mit einem Galerie-Plugin
Eine weitere Möglichkeit, eine Bild-Lightbox zu Ihrer WordPress-Site hinzuzufügen, ist ein WordPress-Galerie-Plugin. Für diese Methode verwenden wir Envira Gallery, eines der beliebtesten Galerie-Plugins für WordPress.
| Tool: Envira Gallery Plugin |
| Preise: Ab 26 $/Jahr |
| Kostenlose Version: Ja |
| Herausragende Merkmale: 🔹 Drag-and-Drop-Galerie-Builder 🔹 Integrierte Lightbox-Einstellungen 🔹 Mobil-responsive Vorlagen |
| Am besten geeignet für: Benutzer, die erweiterte Galerie-Anpassungen benötigen |
Mit diesem leichten Drag-and-Drop Bildergalerie-Plugin können Sie optimierte Bildergalerien für Beiträge, Seiten, Widget-Bereiche und Seitenleisten erstellen. Das Plugin ist außerdem einfach zu bedienen und geschwindigkeitsoptimiert, sodass Ihre Bilder für Website-Besucher schnell geladen werden.
Beginnen Sie mit der Installation und Aktivierung des Envira Gallery-Plugins auf Ihrer WordPress-Website. Navigieren Sie dann zu Envira Gallery » Neu hinzufügen, 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 Mediathek 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 Thumbnails neu anordnen.
Klicken Sie nun auf die Registerkarte Konfiguration, um Ihre Galerie-Einstellungen zu konfigurieren.
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 als Nächstes auf die Registerkarte Lightbox, um die Lightbox-Einstellungen anzupassen.
Stellen Sie zunächst sicher, dass die Option Lightbox aktivieren aktiviert ist. Passen Sie dann die Einstellungen an, um Ihr Lightbox-Theme zu ändern, Bildunterschriften anzuzeigen, Übergangseffekte hinzuzufügen und mehr.
Wenn Sie mit Ihren Galerieeinstellungen zufrieden sind, klicken Sie oben rechts auf die Schaltfläche Veröffentlichen.
Um Ihre Galerie Website-Besuchern anzuzeigen, erstellen oder bearbeiten Sie einen Beitrag oder eine Seite und klicken Sie dann im WordPress-Block-Editor auf das Pluszeichen (+), um einen neuen WordPress-Block hinzuzufügen.
Suchen oder scrollen Sie, bis Sie den Envira Gallery-Block sehen, und klicken Sie darauf, um ihn zu Ihrer Seite hinzuzufügen.
Wählen Sie als Nächstes Ihre Galerie aus dem Dropdown-Menü aus, um eine Vorschau Ihrer Lightbox-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 diesem Beispiel ähneln:
Sie können dann auf ein beliebiges Bild klicken, um es in einer responsiven Lightbox-Galerie wie dieser anzuzeigen:
Bonus: Envira Gallery 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 erleichtert die professionelle Präsentation Ihrer Bilder, ohne Shortcodes oder zusätzliche Schritte verwenden zu müssen.
- Öffnen Sie Ihre SeedProd-Seite oder -Vorlage im Drag-and-Drop-Editor.
- Suchen Sie im Seitenbereich nach dem Envira Gallery-Block und ziehen Sie ihn auf Ihre Seite.
- Wählen Sie Ihre Galerie aus dem Dropdown-Menü und passen Sie die Anzeigeeinstellungen an.
Diese Integration ermöglicht es Ihnen, den flexiblen Seitenersteller von SeedProd mit den leistungsstarken Lightbox-Funktionen von Envira Gallery zu kombinieren, sodass Sie auf jeder Seite Ihrer Website schöne, konvertierungsstarke Bildergalerien erstellen können.
FAQs zum Erstellen einer Lightbox in WordPress
Das Hinzufügen einer Lightbox zu Ihrer WordPress-Website ist eine der einfachsten Möglichkeiten, Ihre Bilder, Videos oder Galerien professioneller aussehen zu lassen. Es hält die Besucher auf Ihre Inhalte fokussiert und verhindert, dass sie die Seite unnötigerweise verlassen.
Unabhängig davon, ob Sie einen Seitenersteller oder ein Galerie-Plugin verwenden, dauert die Einrichtung nur wenige Minuten. Wählen Sie die Methode, die am besten zu Ihrer Website passt, befolgen Sie die Schritte, und Sie haben eine funktionierende WordPress-Lightbox einsatzbereit.
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.
