Lightbox Element
The Lightbox Element is one of several media elements offered by Avada – check out the Image, Gallery, Soundcloud, Youtube and Vimeo Elements as well. 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.
How To Use The Lightbox Element
The Lightbox Element is a very simple Element to use.
Step 1 – Create a new page or post, or edit an existing one.
Step 2Â – Select the container and column you would like to place the shortcodes.
Step 3Â – Click on the + Element button at the bottom of the column. Select or search for Lightbox.
Step 4Â – Now you have the options window open. The first step is to choose which what sort of media you wish to display. You can show images or videos in Lightbox.
Step 5Â – 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.
Step 6 – Once you have finished configuring your options, click Save.
Step 7Â – If you preview your page, you will see the Lightbox thumbnail, and if you click that, the Lightbox will open with the full size image or video. You can always return to the element to edit your options.
Element Options
Location: The edit screen within each Element.
You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative 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.
Content Type – Select what you want to display in the lightbox. You can choose between Image, or Video.
Full Image – Choose the full-size image that will show up in the Lightbox.
Video URL – Enter the full video URL that will show up in the lightbox.
Thumbnail Image – Add a thumbnail image for the page. Clicking this image will show the Lightbox. You can choose any size image, but it makes sense for it to be smaller than the full-size image.
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.
CSS Class – Add a custom class to the wrapping HTML element for further css customization. Learn more here.
CSS ID – Add a custom id to the wrapping HTML element for further css customization. Learn more here.
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.
