Lightboxes

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”.

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.

 

 

 

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.

Updated on June 19, 2018

Was this article helpful?

Related Articles