Lightboxes are supported in version 0.4 and higher.
The following widgets supports lightboxes:
Global settings
It is possible to style all the lightboxes from one place. You find the menu on the Elementor frontend settings page.
After clicking on the hamburger icon you will find a menu link towards the bottom of the list called “Goose Studio”.
Lightbox settings
When clicking the “Goose Studio” menu item you will see the global lightbox settings.
Widget settings
When enabling the lightbox on a widget the following settings box will be shown in most cases, Video widget is an exception.
You can choose between 4 lightbox types:
- Show Elementor Section
- Load URL in IFrame
- Load AJAX
- Image
Show Elementor Section
This will load a elementor section inside the lightbox. It supports both an ID or a classname. The lightbox can load anything which has a ID or classname but usually you will probably want to load a section. You find the ID and classname field on a widgets Advanced tab.
Towards the bottom of the settings area you find the ID and classname fields.
Section visibility
If you load a section you need to also check Hide on Desktop, Tabled and Mobile otherwise it is always visible and that defeats the purpose of a lightbox.
Lightbox target
If you enter for example enter “lightbox-target” as a classname on the target Elementor section you need to enter “.lightbox-target” on the lightbox triggering widget, like a Button widget.
Load URL in iFrame, load AJAX or Image
The listed choices uses the widgets targets. If you have a for example ACF button widget it will use the select Link field.
Styling a lightbox
If you choose to load a section you can tell the lightbox to use your styling of the text box rather than the default lightbox styling.
You find the lightbox style area under the style tab on a widget.
It is shown towards the bottom of the settings area.
Overriding global styling
Below is a custom styled section:
On the frontent it will be shown as below:
If you want padding etc that can also be styled either via the column or the section per default Elementor behavior.