Lightbox Element

Last Update: April 17, 2024

The Lightbox Element is one of several media elements offered by Avada. Lightbox is also integrated into Avada for galleries and in various other areas, but the Lightbox Element is for single image or video use on any page or post. If you want to show more images, use the Gallery Element instead. Read on for an overview of this simple but very useful visual Element.

For privacy reasons YouTube needs your permission to be loaded.

How To Use The Lightbox Element

The Lightbox Element is a very simple Element to use. To start, just add the element into your desired column.

At this point, you have the options window open. The first step is to choose which sort of media you wish to display. You can show images or videos in Lightbox.

The next step is to upload the full-size image. This is the image that will be displayed when you open the Lightbox. Alternatively, place the URL for the video in the field below. Then you choose the Thumbnail image. This is what will display on the page before you open the Lightbox. Finally, there is an Alt Text and a Description Field if you wish to use these, as well as a CSS Class and a CSS ID field.

Once you have finished configuring your options, remember to save your work.

Element Options

These are the element options for the Lightbox Element added through the Avada Builder. You can also add a Lightbox Element to a content area (eg. a Text Block Element), via the Element Generator found in the WordPress Content Editor toolbar. Learn more about Inline Elements here.

Note: The displayed option screens below show ALL the available options for the element. If you have Avada’s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.

HeadingDescription
Thumbnail ImageClicking this image will show lightbox.
Content TypeSelect what you want to display in the lightbox.
Full ImageUpload an image that will show up in the lightbox.
Video URLInsert the video URL that will show in the lightbox. This can be a YouTube, Vimeo or a self-hosted video URL.
Link URLInsert the link URL that will show in the lightbox. This can be a link to website URL.
Alt TextThe alt attribute provides alternative information if an image cannot be viewed.
Lightbox TitleThis will show up in the lightbox as a title above the image.
Lightbox DescriptionThis will show up in the lightbox as a description below the image.
Element VisibilityChoose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
CSS ClassAdd a class to the wrapping HTML element.
CSS IDAdd an ID to the wrapping HTML element.

Global Options

There are no Global Options for the Lightbox Element, but the styling options found in the Global Options for Lightbox (Avada > Options > Lightbox) will affect the visual appearance of the Lightbox used by the Element. Follow the link below to read more about the Lightbox Global Options.

In this article