Submit a Ticket
How to add a Lightbox to anything
For better instruction, watch tutorial video
Add "Lightbox" element into Visual Composer back-end editor (located in
The "Lightbox Settings" panel will open > Set the Lightbox ID. You can type any name you want, this ID helps a button (or anything can open a link) to identify which lightbox to open.
" to add any element inside lightbox. Or you can drag element into it.
Done. You've successfully created a Lightbox.
Next, let's create a button to open this lightbox.
By default, the "Button" element of VCKit (located in
tab) has a function to open a Lightbox.
Let's add a VCKit's Button
In the "Button Settings", scroll down to the end and find "
Advanced on click action
" box, choose "
" field will appear, type the chosen Lightbox ID. (as example above: "demo").
Done. Now when clicking on this button , it will open the Lightbox with ID "demo" (the one has a video inside it).
Beside VCKit's Button, you can make any other element to open VCKit's lightbox, as long as that element
has a function to "Open a Link"
Add an element which has option to open a link.
Fill in the URL field: #lightboxid (remember to add
Add extra class name:
That's all steps to make this element open a Lightbox instead of a link.
Add a Single image > Set "On click action": "Open custom link" > Fill in the Image Link: #demo
Add an extra class name in this Single image element:
Updated: 10 Nov 2017 12:24 AM
Help us to make this article better
Install 3rd party Addons
Quick View Configuration
Quick View Shortcodes
Quick View in Visual Composer
How to "Carousel" Anything!
Help Desk Software
by Zoho Desk