Lightbox Element
The Lightbox Element shows a thumbnail image on the page. When the visitor clicks it, a larger image, a video or a web page opens in a lightbox above the page, with an optional title and description, and closes again without leaving the page.
Use it for a video teaser with a preview picture, a detailed drawing behind a small preview, or a page such as a map or a form that should open on top of the current content. For collections of images, the Gallery Element is the better choice.
In this article: How To Use · Element Options · Tips · Related Elements · Example
How To Use The Lightbox Element
Add the Lightbox Element to any column and upload the Thumbnail Image; this is the picture visitors see and click. Then choose the Content Type: Image, Video or Link.
For an image, upload the Full Image. For a video, enter the Video URL of a YouTube, Vimeo or self-hosted video; YouTube Shorts addresses are converted automatically. For a link, enter the Link URL of the page to show.
Fill in the Alt Text for the thumbnail, and add a Lightbox Title and Lightbox Description if they help: the title appears above the content, the description below it. The element has no design options of its own; the lightbox follows the lightbox settings in Global Options.
Element Options
The tables below list every option of the element, grouped by the tabs you see when you edit it in the Builder. Many options depend on others, so the edit screen only shows the options that apply to your current choices.
General
| Heading | Description |
|---|---|
| Thumbnail Image | Clicking this image will show lightbox. |
| Content Type | Select what you want to display in the lightbox. |
| Full Image | Upload an image that will show up in the lightbox. |
| Video URL | Insert the video URL that will show in the lightbox. This can be a YouTube, Vimeo or a self-hosted video URL. |
| Link URL | Insert the link URL that will show in the lightbox. This can be a link to website URL. |
| Alt Text | The alt attribute provides alternative information if an image cannot be viewed. |
| Lightbox Title | This will show up in the lightbox as a title above the image. |
| Lightbox Description | This will show up in the lightbox as a description below the image. |
| Element Visibility | Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time. |
| CSS Class | Add a class to the wrapping HTML element. |
| CSS ID | Add an ID to the wrapping HTML element. |
Extras
| Heading | Description |
|---|---|
| Conditional Rendering | Add conditional rendering logic for the element. The element will only be part of the post / page contents, if the set conditions are met. NOTE: Server cache can interfere with results. |
Tips
- Without a Thumbnail Image the element outputs nothing, even when the lightbox content is set.
- When Alt Text is empty, the alt text of the thumbnail from the Media Library is used. Describe what the click opens, for example “Video: product demonstration”.
- Some websites do not allow being shown inside another page. Test a Link lightbox on the published page before relying on it.
- Use a thumbnail that clearly looks clickable, for example with a play symbol for a video.
