WordPress lightbox in Elementor

How to add WordPress lightbox in Elementor

Looking for a way to add a WordPress lightbox in Elementor? Here in this article, you will guide you on the way to add a WordPress lightbox using Elementor.

Lightbox is the way to display images or videos in a pop or lightbox gallery. You can link the lightbox pop-up with text or a button. So using a lightbox you can display more information in a very unique and professional way.

Add WordPress lightbox in Elementor

To add lightbox using the free version of Elementor you need to install a plugin named Wonder Lightbox. This plugin is very flexible and fully responsive. This plugin is fully compatible with the Elementor page builder. So you can easily create your lightbox with this plugin using the Elementor page builder.

First, install and activate the plugin. Now you just need to create a class name wplightbox to any link. This class name will activate the lightbox features for that link.

Add lightbox to text in Elementor

To add lightbox in-text open up a page or post with Elementor editor. Then select any text and from the edit dashboard click on the insert link button.

add WordPress lightbox in Elementor

Now from the popup filed add the image or video link. Here we are adding a youtube video link.

WordPress lightbox in Elementor

Now click on the text tab from the top right corner and add the class=”wplightbox” to the a tag of the link.

WordPress lightbox in Elementor

Now update your page and refresh your website to check how the lightbox work. Lightbox effect will not work in the editor mode.

Add lightbox to an image in Elementor

First, upload an image in a section, and then from the link option select the custom URL option. After that add an image or video URL to the add link field.

WordPress lightbox in Elementor

Now go to the advance tab and then add wplightbox to the CSS Classes field.

WordPress lightbox in Elementor

Update the page and check the lightbox effect.

Add lightbox to a button in Elementor

Open up the button editor and add the video or image URL in the link tab.

Now go to the advance tab and then add wplightbox to the CSS Classes field.

That’s it! Following the process, you will be able to add a lightbox using Elementor.

Wrapping up

You hope this article will help you. You can see our other articles to learn How to create a thumbnail slider using Elementor free

Speed up your workflow with Elementor navigator

How to add custom fields in Elementor

If you like this article please like our Facebook page to stay connected.