After the plugin Wonder Lightbox is installed and activated, adding a class name wplightbox to any link will activate the lightbox effect.
This tutorial will guide you how to add the class name to links in the Elementor page builder and enable the lightbox effect. You can use the lightbox to open an image, HTML5 video, YouTube video, Vimeo video, PDF, webpage or div content.
- EA Lightbox & Modal lets you easily create popups which open after certain actions are triggered. This means you can display strong messages that will have meaningful impact on your readers. It is an extension to your content area. You have three trigger options, which have very distinct flavors. You can set the trigger timing that best suits.
- Show your images, carousels, videos & galleries with Elementor 100% mobile responsive Global Lightbox! So you can showcase your media in a way that really ma.
Elementor’s Lightbox feature was released a while back, and offered a way to open lightboxes when visitors clicked on videos and images. Now, we are expanding Lightbox to cover links, so you can set video and image lightboxes when visitors click on any link across widgets. It works on buttons, headings and any other type of widget links.
You can also view the following quick start video:
Before following this tutorial, make sure you have installed and activated the premium plugin Wonder Lightbox. You can download the trial version from the product homepage, test it, make sure it works for you before upgrading to the Pro version.
Add Lightbox to Text in Elementor
In Elementor Text Editor, drag and select the text, then click the Insert/edit link button.
In the popup dialog, enter the image or video URL to the input box.
In the Text Editor, click the Text tab on the top right corner, then add class='wplightbox' to the a tag of the link.
Update the page and test the lightbox effect in the published page. The lightbox effect will not work in the editor itself.
Add Lightbox to an Image in Elementor
In Elementor, add an image element, choose an image file, select Custom URL from the link drop down list, and enter your image or video URL, for example, you can enter a YouTube link https://www.youtube.com/watch?v=pFaGie0xmbo.
In the Image Editor, go to the Advanced tab, enter wplightbox to the Class Classes input box.
Save the page and test the lightbox effect in the published web page.
Add Lightbox to a Button in Elementor
In Elementor, add a Button element. In the Button editor, enter the lightbox image or video URL to the Link input box.
In the Button Editor, go to the Advanced tab, enter wplightbox to the Class Classes input box.
Publish the page and test the lightbox effect in the published web page.
I wanted to make a WordPress post that showed a drawing’s progression log like I have done in the past on my Tumblr. For Tumblr, the web application interface lets you re-arrange the images in size and order and makes the photoset a slideshow. You can also put captions in that will appear under the photos in the slideshow, and that slideshow lets you navigate using the right and left arrow keys. This is not specific to only Tumblr but uses the Javascript library, Lightbox, which I have little experience with. However, I do have plenty of experience making Tumblr photosets.
This post will break down the steps I took to accomplish that goal should I need to find it again or if any readers find the information useful. Before I start, I will say that Tumblr Photoset Grid/Masonry Gallery for WordPress by sike is a $12 plugin I found that, by its description at least, would have done exactly what I wanted. Most of the information you would need for what I ended up doing instead are in this video, How to create masonry style gallery in Elementor Page Builder for WordPress.
As I made this post, I noticed the Simple Lightbox alone would also work for my main goal of a series of images in a single column and through regular WordPress posts, without Elementor so long as the images link to the media file. Still, this information is useful for if I ever want to do more columns in masonry gallery format.
1. Use the Elementor Plugin
Install and activate the Elementor plugin if you are not already using it in your WordPress site. Elementor alone can let you put in an image gallery that can be a single column and act as a slideshow, but I ran into an issue where the captions would not show, not even on the actual post as described that it should in the documentation. For some users, showing the captions below the images within the gallery is actually unwanted. In any case, I wanted to put text somewhere, it didn’t have to be image captions per se though it was preferable at first, and Elementor alone was not going to be enough.
2. Update the Elementor Plugin’s Global Setting to Turn Lightbox OFF.
To prevent double opening of a lightbox, we are turning off the Lightbox setting, which is on by default, in Elementor.
Elementor Lightbox Button
3. Use the Simple Lightbox Plugin
Install and activate the Simple Lightbox plugin. If you need to update any of the settings, you can do so through the Plugins page or under Appearance from the WordPress dashboard, then choosing Lightbox.
4. Create Post Using Elementor
For the type of post I was trying to do this for, I created a single-column post where I show a starting progression at the top and finished image at the bottom. You can do the actual columns and sizes however you want, that is the benefit of this masonry gallery approach. The next step is the really key one.
5. Create Image Widgets and Link Each One to Media File
Because we are using individual image widgets instead of an overall image gallery, we have more freedom with the content between the images so instead of putting the captions with the image properties and showing in the Lightbox, I’m actually placing them above each image as I explain my process. With our Elementor plugin already set to have Lightbox OFF by default, we can now leave it to the Simple Lightbox plugin to create the slideshow and group the images together automatically. Preview or update the page too see the Lightbox single-column in action.
6. Adjust CSS
This step can be skipped if you are happy with the Simple Lightbox default look. I updated some of the CSS to my own preference because of past familiarity with Tumblr photosets.
The following was added through Appearance, Additional CSS:
Elementor Lightbox Gallery
Within the post I was working on, I also hid the details in case I end up using captions more often in the future and the post being worked on turned out to be an exception rather than a rule for how I want the text describing images to look.
DONE!
You can see the final results of my efforts in my Chaos with Claws Progression Log.
Further Notes
Another option I considered was to have a slideshow at the top and then show the progression log as individual images below it. I also tried out a plugin called Smart Slider 3 that looked really good for slideshows in general but then realized I still wanted my single column of each image in the set to be visible on the page. I even thought of having 7 different slideshows and putting them all on the same page but that was too much work for something that could be done better another way.
If you appreciate any of the work that went into making this post, please consider giving a tip to my PayPal account or supporting me on Patreon.