Es kann frustrierend sein, Zeit damit zu verbringen, schöne Fotos aufzunehmen, nur um sie in einer einfachen Galerie angezeigt zu bekommen, die ihnen nicht gerecht wird. Die Standard-WordPress-Galerie wirkt oft flach und veranlasst Benutzer, zum Ansehen einer größeren Version wegzuklicken.
Ein Lightbox-Effekt löst dieses Problem, indem er Besuchern ermöglicht, Ihre Bilder in einem beeindruckenden Overlay anzuzeigen, ohne die Seite jemals zu verlassen. Hier bei WPBeginner verwenden wir Envira Gallery auf unseren Testseiten und Kundenprojekten, da es die einfachste und zuverlässigste Methode ist, professionell aussehende Galerien zu erstellen.
In diesem Artikel führen wir Sie durch die einfachen Schritte, um Ihrer eigenen WordPress-Galerie einen Lightbox-Effekt hinzuzufügen.
Hier ist eine kurze Übersicht darüber, was Sie in diesem Tutorial lernen werden.
- Warum den Lightbox-Effekt in WordPress-Galerien hinzufügen?
- So fügen Sie eine WordPress-Galerie mit Lightbox-Effekt hinzu
- Alternative: Verwenden Sie NextGen Gallery, um Bildportfolios und Galerien in WordPress zu erstellen
- Häufig gestellte Fragen zu WordPress Lightbox-Galerien
Warum den Lightbox-Effekt in WordPress-Galerien hinzufügen?
Indem Sie Ihren Galerien auf Ihrer WordPress-Website einen responsiven Lightbox-Effekt hinzufügen, können Sie Ihre Bilder professioneller präsentieren. Dieser Effekt ermöglicht es Ihnen, Ihre Fotos in einem Pop-up-Fenster auf Ihrer Website anzuzeigen, wenn ein Benutzer darauf klickt.
Lightboxen helfen dabei, ein immersiveres Seherlebnis für Ihre Besucher zu schaffen und erleichtern es ihnen sogar, Ihre Bilder in sozialen Medien zu teilen oder sie auf ihren Computern herunterzuladen.
Wenn Sie eine Fotografie-Website haben, ermöglicht Ihnen die Hinzufügung eines Lightbox-Effekts den Benutzern, Ihre hochauflösenden Bilder in einem ablenkungsfreien Modus anzuzeigen und so das Engagement zu erhöhen.
Ähnlich wie bei einem WooCommerce-Shop kann das Hinzufügen eines Lightbox-Effekts zu Ihren Produktgalerien Kunden helfen, das Produkt aus der Nähe zu betrachten und eine fundierte Entscheidung zu treffen.
Nichtsdestotrotz sehen wir uns Schritt für Schritt an, wie Sie ganz einfach eine WordPress-Bildergalerie mit Lightbox-Effekt hinzufügen können.
So fügen Sie eine WordPress-Galerie mit Lightbox-Effekt hinzu
Der einfachste Weg, eine Lightbox-Galerie hinzuzufügen, ist die Verwendung von Envira Gallery. Es ist das beste WordPress-Galerie-Plugin auf dem Markt und das, das wir für unsere eigenen Projekte verwenden.
Es kommt mit einem Drag-and-Drop-Builder, professionellen Vorlagen und leistungsstarken Funktionen wie Social Sharing, Wasserzeichen und natürlich Lightboxen. Eine vollständige Aufschlüsselung der Funktionen finden Sie in unserem vollständigen Envira Gallery-Testbericht.
Envira Gallery ist auch super schnell und verfügt über einen Drag-and-Drop-Builder, professionelle Galerie-Vorlagen und viele Funktionen, einschließlich des Hinzufügens von Tags, Audio, Social Sharing und Lightboxes.
Zuerst müssen Sie das Plugin Envira Gallery installieren und aktivieren. Detaillierte Anweisungen finden Sie in unserer Schritt-für-Schritt-Anleitung zum Thema Installieren eines WordPress-Plugins.
Hinweis: Envira Gallery hat auch ein kostenloses Plugin, das Sie für dieses Tutorial verwenden können. Ein Upgrade auf den kostenpflichtigen Plan bietet Ihnen jedoch Zugriff auf weitere Funktionen.
Besuchen Sie nach der Aktivierung die Seite Envira Gallery » Einstellungen in der WordPress-Admin-Seitenleiste, um den Lizenzschlüssel einzugeben.
Sie können diese Informationen in Ihrem Konto auf der Website von Envira Gallery abrufen.
Besuchen Sie anschließend die Seite Envira Gallery » Neu hinzufügen im WordPress-Dashboard, um mit der Erstellung Ihrer eigenen neuen Galerie zu beginnen.
Geben Sie hier einen Titel für die Bildergalerie ein. Klicken Sie dann auf die Schaltfläche „Dateien von Ihrem Computer auswählen“, um Bilder hochzuladen. Wenn Sie Bilder aus der Mediathek zu Ihrer Galerie hinzufügen möchten, klicken Sie auf die Schaltfläche „Dateien aus anderen Quellen auswählen“.
Dies öffnet die Mediathek, von wo aus Sie Galeriebilder hochladen können. Denken Sie daran, dass Sie jeweils nur ein Bild aus der Mediathek hochladen können.
Sobald Sie dies getan haben, scrollen Sie nach unten zum Abschnitt „Derzeit in Ihrer Galerie“. Hier sehen Sie eine Vorschau Ihrer Galerie auf der rechten Seite mit den Einstellungen in der linken Spalte.
Klicken Sie nun auf das Bleistiftsymbol oben auf jedem Bild, um die Aufforderung „Metadaten bearbeiten“ auf dem Bildschirm zu öffnen.
Von hier aus können Sie die Beschriftung, den Status, Titel und Alt-Text für einzelne Bilder hinzufügen.
Vergessen Sie danach nicht, auf die Schaltfläche „Metadaten speichern“ zu klicken, um Ihre Einstellungen zu speichern.
Wechseln Sie dann im linken Menü zum Tab „Konfiguration“, um das Layout Ihrer Galerie nach Ihren Wünschen zu ändern. Hier können Sie ein Layout, die Anzahl der Spalten, die Bildgröße, Abmessungen, Themen und mehr auswählen.
Detaillierte Anweisungen finden Sie in unserem Leitfaden für Anfänger zur Erstellung einer Bildergalerie in WordPress.
Sobald Sie dies getan haben, wechseln Sie in der linken Spalte zum Tab „Lightbox“ und aktivieren Sie die Option „Lightbox aktivieren?“.
Wählen Sie anschließend ein Lightbox-Theme aus dem Dropdown-Menü 'Gallery Lightbox Theme'. Wenn Sie die Option 'Legacy' wählen, hat die Lightbox-Effekt-Aufforderung ein älteres Layout.
Wenn Sie die Option „Basis (Dunkel)“ wählen, wird die Lightbox-Aufforderung ein dunkles Basislayout haben.
Als Nächstes müssen Sie auswählen, ob Sie den Bildtitel oder seine Bildunterschrift in der Lightbox-Aufforderung anzeigen möchten. Sie können auch beide anzeigen oder keines von beiden, wenn Sie möchten.
Sobald Sie dies getan haben, wählen Sie die Bildgröße für die Lightbox aus dem Dropdown-Menü.
Überprüfen Sie danach die Option „Galeriepfeile aktivieren“. Die Lightbox-Aufforderung zeigt nun zwei Pfeile an, mit denen die Betrachter zu verschiedenen Bildern in Ihrer Galerie wechseln können.
Sie können auch andere Einstellungen für Ihre Lightbox konfigurieren, einschließlich des Übergangseffekts, des Öffnungs-/Schließungseffekts, der Aktivierung der Lightbox-Vergrößerung und mehr.
Wenn Sie fertig sind, vergessen Sie nicht, oben auf die Schaltfläche „Veröffentlichen“ zu klicken, um Ihre Änderungen zu speichern.
Um Ihre Bildergalerie zu einer WordPress-Seite/einem Beitrag hinzuzufügen, öffnen Sie die Seite im Block-Editor.
Hier müssen Sie auf die Schaltfläche „Block hinzufügen“ (+) in der oberen linken Ecke des Bildschirms klicken, um das Blockmenü zu öffnen. Fügen Sie dann den Envira Gallery-Block zur Seite/zum Beitrag hinzu.
Wählen Sie danach die gerade erstellte Bildergalerie aus dem Dropdown-Menü des Blocks selbst aus. Klicken Sie abschließend auf die Schaltfläche „Aktualisieren“ oder „Veröffentlichen“, um Ihre Einstellungen zu speichern.
Jetzt können Sie Ihren WordPress-Blog besuchen, um die Bildergalerie anzuzeigen, und dann auf ein beliebiges Bild klicken, um den Lightbox-Effekt zu sehen.
Alternative: Verwenden Sie NextGen Gallery, um Bildportfolios und Galerien in WordPress zu erstellen
Envira Gallery ist die beste Option, um Lightbox-Bilder zu Ihrer WordPress-Website hinzuzufügen. Alternativ können Sie NextGEN Gallery verwenden, um vollständig responsive und optisch ansprechende Galerien und Portfolios auf Ihrer WordPress-Seite zu erstellen.
NextGEN Gallery ist die beste Alternative zu Envira Gallery, da es eine breite Palette von Galerie-Typen unterstützt, eCommerce-bezogene Funktionen bietet und es Ihnen ermöglicht, Wasserzeichen, Lightboxes, Bildkommentare und mehr hinzuzufügen.
Zusätzlich ermöglicht NextGEN Gallery die Annahme von Online-Zahlungen über Stripe oder PayPal, wodurch es einfach wird, Ihre Bilder online zu verkaufen.
Es ist ein fortschrittliches Galerie-Plugin mit Funktionen für professionelle Fotografen, Grafikdesigner und bildende Künstler, was es zu einem der besten WordPress-Portfolio-Plugins auf dem Markt macht.
Für detaillierte Anweisungen können Sie sich unser Tutorial zum Hinzufügen eines Portfolios zu Ihrer WordPress-Website ansehen.
Häufig gestellte Fragen zu WordPress Lightbox-Galerien
Hier sind Antworten auf einige der häufigsten Fragen, die wir zum Hinzufügen eines Lightbox-Effekts zu WordPress-Galerien erhalten.
Was ist ein Lightbox-Effekt in WordPress?
Ein Lightbox-Effekt ist eine Funktion, die Ihre Bilder in einem Overlay anzeigt, das den Bildschirm ausfüllt. Der Rest des Seiteninhalts wird im Hintergrund abgedunkelt.
Dies ermöglicht es Besuchern, Medien in einer größeren Größe anzuzeigen, ohne zu einer neuen Seite navigieren zu müssen, was zu einer fokussierteren Benutzererfahrung führt.
Was ist das beste WordPress Lightbox-Galerie-Plugin?
Nach unserer Erfahrung ist Envira Gallery das beste WordPress-Plugin zum Erstellen von Lightbox-Galerien. Es ist unglaublich anfängerfreundlich, schnell und mit leistungsstarken Funktionen ausgestattet.
Für professionelle Fotografen, die erweiterte Portfolio- und Proofing-Funktionen benötigen, ist NextGEN Gallery eine weitere ausgezeichnete Alternative.
Kann ich der Standard-WordPress-Galerie ohne Plugin eine Lightbox hinzufügen?
Der Standard-WordPress-Galerieblock verfügt nicht über eine integrierte Lightbox-Funktion. Sie könnten zwar eine mit benutzerdefiniertem Code hinzufügen, dies erfordert jedoch Kenntnisse in CSS und JavaScript.
Für die meisten Benutzer ist die Verwendung eines speziellen Plugins die einfachste und sicherste Methode, um ein professionelles Ergebnis zu erzielen, ohne Code anfassen zu müssen.
Verlangsamt eine Lightbox-Galerie meine Website?
Ein gut optimiertes Plugin wie Envira Gallery ist auf Geschwindigkeit ausgelegt und sollte Ihre Website nicht verlangsamen. Es verwendet Leistungsfunktionen wie Lazy Loading für Bilder.
Sie sollten Ihre Bilder jedoch immer für das Web optimieren, bevor Sie sie in WordPress hochladen, um die schnellstmögliche Ladezeit zu gewährleisten.
Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie einfach eine WordPress-Galerie mit einem Lightbox-Effekt hinzufügen. Möglicherweise möchten Sie auch unseren Leitfaden für Anfänger lesen, wie Sie grundlegende Bildbearbeitung in WordPress durchführen und unsere Expertenauswahl für die besten Tools zur Erstellung besserer Bilder für Ihre Blogbeiträge.
Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.
Jiří Vaněk
Danke für die Empfehlung von Envira Gallery. Ich erstelle Websites mit Elementor und kannte neben Elementor nur NextGen Gallery, was meinen Anforderungen nicht ganz entspricht. Ich werde das Plugin auf jeden Fall ausprobieren und wahrscheinlich die von mir verwendete NextGen Gallery damit ersetzen.
Muhammad Danial Emran
Hallo, ich möchte fragen, ob die Verwendung eines Lightbox-Effekts die Geschwindigkeit meiner Website beeinträchtigt.
WPBeginner Support
Es sollte Ihre Website nicht verlangsamen.
Admin
Ahmed Omar
Danke für den Beitrag, aber hier eine Frage: Macht es einen Unterschied, ob ich den WordPress Block Editor verwende, um eine Fotogalerie hinzuzufügen, als Envira zu verwenden?
WPBeginner Support
Envira has more tools and customization options than the default gallery
Admin
E
Ich bin so froh, diesen Artikel und diese Website gefunden zu haben. Ich liebe euch gerade!
Lynsey
Ich liebe dich! Gibt es eine Möglichkeit, die Thumbnails kleiner zu machen?
Redaktion
Ja. Gehen Sie zu Einstellungen > Medien. Bearbeiten Sie die Miniaturansichtsgröße. Laden Sie dann ein Plugin namens Regenerate thumbnails herunter. Führen Sie dieses Plugin aus, und das war's.
http://wordpress.org/extend/plugins/regenerate-thumbnails/
Admin
Sandeep Singh
Ich bin wirklich dankbar für den Vorschlag, den Lightbox-Effekt zur Galerie hinzuzufügen. Ich schätze diese Art von Unterstützung sehr und hoffe auf dasselbe für die Zukunft.
Mike
Hallo,
Das ist großartig, eine Frage habe ich aber: Gibt es ein Plugin oder etwas Ähnliches, das die Galerie in eine Diashow umwandelt? Zum Beispiel, dass das erste angehängte Bild groß angezeigt wird und darunter die Thumbnails aller Bilder in der Galerie sind, und man auf ein Bild klicken kann, um das große Bild zu ändern, anstatt eines Lightbox-Effekts.
Danke,
Mike
Redaktion
Ich bin mir nicht sicher, ob ein solches Plugin existiert.
Admin
Renee
Ziemlich sicher, dass das Fancybox-Plugin das tut. Sie können Lightbox und Thumbnails aktivieren oder deaktivieren.
Emma Beatty Howells
Danke für eine großartige Lösung. Ich bin neu in all dem und versuche, den einfachsten Weg zu finden, Online-Fotogalerien zu verwalten – das hier hält es einfach und elegant! Etwas anderes, das ich nützlich fand, war eine App, die Fotos mit minimalem Aufwand mit Wasserzeichen versieht ... 'ImageBucket'.
Tiaan
Danke, funktioniert wie eine Bombe!
Michael
Scheint einfach genug. Gibt es eine Möglichkeit, Bildunterschriften unter jedem Bild zu haben? Und wenn es sich zu einer Lightbox öffnet, gibt es eine Möglichkeit, beschreibenden Text mit dem Bild in der Lightbox zu haben?
Redaktion
Dieses Plugin sollte in der Lage sein, das zu tun, wonach Sie suchen: http://wordpress.org/extend/plugins/gallery-and-caption/
Admin
Alex
Ich habe ein Banner oben auf meiner Website, das ein Bild anzeigt. Wenn sich die Lightbox öffnet, erscheint das Banner immer noch darüber. Gibt es eine Möglichkeit, einen Code oder so etwas, der das stoppt?
Danke
Alex
Redaktion
Wahrscheinlich passiert das, weil Ihr Banner einen sehr hohen z-index-Wert hat. Verringern Sie diesen Wert in Ihrem CSS. Es gibt viele CSS-Tutorials zum Thema z-index im Web.
Admin
JulieBozza
Das ist eine wirklich coole Lösung, danke! Viel schneller und ordentlicher als das, was ich vorher gemacht habe…
Gibt es jedoch eine Möglichkeit, auszuwählen, welches der Bilder als Haupt-Thumbnail angezeigt wird? Das heißt, das Thumbnail, das im „Feed“ erscheint, bevor man den einzelnen Beitrag öffnet.
Vielen Dank im Voraus!
wpbeginner
@JulieBozza Der Thumbnail für den Beitrag wird über die Funktion „Beitragsbild“ ausgewählt. Suchen Sie in Ihrem Beitragseditor auf der rechten Seite unter dem Button „Veröffentlichen“ nach einem Feld namens „Beitragsbild“.
JulieBozza
@wpbeginner Hallo! Danke für die Antwort. Leider ändert dies beim Ändern des Bannerbilds nichts am Thumbnail im Beitrag. Ich verwende das Twenty Eleven WordPress-Theme, daher hat das Banner möglicherweise Priorität.
wpbeginner
@JulieBozza Sie beziehen sich auf diese Galerie-Miniaturbilder, richtig???
JulieBozza
@wpbeginner LOL! Ja. Ich habe den Galerie-Beitrag genau wie oben beschrieben erstellt.
Ich weiß nicht, ob es helfen würde, den Beitrag selbst zu besuchen, aber hier ist die URL. Beachten Sie, dass die Website noch im Aufbau ist!
http://rupertfyoung.com/2011/09/pierrefonds-september-2011/
wpbeginner
@JulieBozza Die Galerie funktioniert wie sie soll.
http://rupertfyoung.com/category/gallery/ << Wenn Sie sich auf das Miniaturbild hier beziehen, dann wird dieses meines Wissens nach von Ihrem Beitragsbild oder dem ersten Anhang gesteuert. Laden Sie ein Beitragsbild hoch, das eine geringe Breite hat (Miniaturbildgröße oder so etwas)... Und es wird nicht das Header-Bild übernehmen.
wpbeginner
@ukdazza Das Problem liegt bei Ihrer Website und nicht bei diesem Plugin. jQuery-Probleme wie diese sind sehr häufig. Es gibt ein anderes jQuery, das dazu führt, dass dieses Plugin nicht funktioniert. Sie müssten die Positionen des anderen jQuery-Codes ändern.
Dies ist ein Spiel aus Versuch und Irrtum, wenn Sie auf solche Probleme stoßen.
ukdazza
Ich habe ein Problem, bei dem wir das slickr flickr Plugin verwenden, um Thumbnail-Galerien mit Lightbox-Funktionen zu erstellen. Allerdings funktioniert die Lightbox überhaupt nicht. Laut den Online-Hinweisen, die ich zu diesem Problem mit diesem Plugin finden kann, gibt es wahrscheinlich mehr als eine Lightbox oder mehr als ein jQuery, das läuft – was dazu führt, dass es nicht richtig funktioniert.
Lightbox funktioniert nicht. Wenn Sie auf ein Miniaturbild klicken, öffnet sich das Bild im Browser, was Mist ist.
Irgendwelche Ideen? Ich hoffte, Sie oder jemand anderes hätten eine Idee, denn ich habe versucht, dieses Plugin zu installieren, und es wurde gesagt, dass das Ziel bereits belegt war.
TGA
Wow. Vielen Dank. Ich habe NextGEN Gallery verwendet, durfte aber meinem Kunden keine Galerien mit Miniaturansichten unterschiedlicher Größe erlauben. (Dumm). Also erkannte ich, dass dies mit der nativen Galerie möglich wäre, aber Highslide würde dann keinen Miniaturansicht-Viewer erstellen, wie es bei NextGEN der Fall war. Der Punkt ist, das war eine Rettung! Es ist vielleicht nicht perfekt, aber es ist EINE Lösung und jetzt kann ich mit dem Projekt weitermachen!
wpbeginner
@TejSanusi✔ Dieses Plugin bietet Benutzern die Möglichkeit, das nächste Bild als Teil derselben Lightbox anzuzeigen.
TejSanusi✔
Gibt es eine Möglichkeit, eine Lightbox-Galerie zu erstellen, die von einem Thumbnail aus aktiviert wird? Wenn der Benutzer auf das Thumbnail klickt, wird die Lightbox mit einer Reihe von Galeriebildern erstellt?
cata
Ziemlich interessant ist das im Artikel erwähnte Plugin. Ich habe auch dieses mit guten Ergebnissen getestet http://wordpress.org/extend/plugins/lightbox-gallery/
Chris
Danke für den tollen Beitrag. Ich fand ihn äußerst nützlich. Ich habe jedoch eine Frage. Was ist, wenn ich eine ziemlich große Galerie mit etwa 40 oder 50 Bildern hätte und nur eines davon im Beitrag anzeigen wollte und dann, wenn jemand darauf klickt, die gesamte Galerie durchscrollen könnte? Ist das möglich? Ich möchte lieber nicht alle 40 Bilder in meinem Beitrag anzeigen lassen und denke, das wäre nützlich.
Danke!
Keith Davis
Gut gemacht, Jungs.
Ich wusste nicht, dass WordPress eine Galerie-Funktion hat... wisst ihr denn alles?
Könnte das eines Tages tatsächlich nutzen.
jonathan perrodin
Hey, danke dafür. Ich wollte das schon lange auf meiner Seite haben, war aber zu faul, nach einem Plugin zu suchen, das das einfach macht. Das hier war perfekt.
Mike Roberts
Ich bin Künstler und Illustrator und bin weiterhin enttäuscht von den Optionen zur Anzeige einer Bildergalerie in WordPress. Ich lebe in der Hoffnung, dass bald ein brillanter Programmierer meine Bitte erhört!
Gretchen
Mir war nicht bewusst, wie schwer es ist, ein Lightbox-Plugin zu finden, das die native WordPress-Galeriefunktion verwendet, bis ich danach gesucht habe! Ich bin bei http://wordpress.org/extend/plugins/lightbox-plus/ gelandet, da es die Möglichkeit bietet, per Shortcode in jeder Beitrags-/Seiten-Galerie anzugeben, ob die Lightbox-Einstellung verwendet werden soll oder nicht. Ich benutze manchmal gerne die Anhangsseiten und benötigte ein Lightbox-Plugin, das es mir erlaubt, zu wählen, wann ich es benutze. Ich wäre neugierig zu hören, ob jemand anderes ein anderes Lightbox-Plugin mit dieser Funktion gefunden hat.
Bronson
Danke für die Information.
Es ist großartig, den Lightbox-Effekt auf native Galerien anwenden zu können, anstatt sie manuell neu erstellen zu müssen.
Sonu
Wie funktioniert das? und brauchen wir eine Lightbox-Klasse für jedes Bild in der Galerie?
Redaktion
Nein, Sie müssen nicht jeder einzelnen Bild in der Galerie die Lightbox-Klasse zuweisen. Sie wird automatisch für alle Bilder in der Galerie zugewiesen. Die Klasse sollte jedem anderen Bild zugewiesen werden, das Sie zusätzlich zur Galerie haben.
Admin
Binoy
Das Problem hier ist, dass alle Bilder im Beitrag in der Galerie angezeigt werden. Gibt es Optionen zur Auswahl von Bildern?
Redaktion
Nein, das ist noch nicht möglich.
Admin
Leo
Hallo! Um die Bilder auszuwählen, die in der Galerie angezeigt werden sollen, probieren Sie dieses Plugin aus: Multiple Galleries, Sie finden es hier > http://goo.gl/kNFer
Auf Wiedersehen!
Redaktion
Thanks for sharing this plugin. Updating the article to add this
Preston
Jedes Bild sollte eine Art WordPress-Nummer zugeordnet haben. Ich schließe Bilder in der Galerie mit diesem Code aus, hoffentlich funktioniert es für Sie:
[gallery link="file" exclude="Photo#, Photo#, Photo#"]