1. Home
  2. Docs
  3. Creative Elements
  4. Lightbox & Modal

Lightbox & Modal

LightBox and modal

LightBox and Modal is a powerful element. When the pop-up triggers, it will take up portion of the screen. 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 the flow of the readers. Add a link with the pop-up to redirect them to another page.

The starting point for the customization process can be as random as you want it to be. 

Content

You can source the content of your Lightbox/Modal from three possible options. You can upload an image from your device or use an already existing one from the Media Library, You can use an HTML content. And lastly you can attach and External URL to the element.

Now move on to the Lightbox/ Modal Settings. From there you can pick a trigger option for your modal. You have three options available.

1.Button Click. The basic one is the Button Click. The Modal will trigger only when a reader clicks on the button. If you choose a button, you should adjust its alignment and padding. Also pick text and border color carefully.

2.External Element. This option lets you link Modal with other Elementor elements. Drop the Modal element before any other element. Copy the Element identifier key, without the hash. Open the other element and go to its Advanced customization field. Paste the Elementor Identifier key into its CSS ID field(without the hash). Now go to preview. Your visitors need to click on the element to trigger the modal.

3.Page Load. If you choose this option, the modal will trigger only when the page is loaded. Suppose you want to insert the modal in the middle of your blog post. No worries! That is also possible. Drop the element inside your blog, no matter which position. Then navigate to Content>Lightbox/Modal Settings option>Trigger Lightbox on(pick Page Load). Then adjust the delay of the modal activation.

Style

From here you can adjust the padding, radius, background color, overlay background color and more. You also want to tweak the Close Button style for the element. Open the Close Button Style option and pick a close button and a background color for it.

See how beautiful Lightbox and Modal you can build with Essential Addons.

Essential-Addons-Elementor-Lightbox-and-Modal-Demo

 

Click to see Live Demo.

How can we help?