Lightbox Element
The Lightbox Element is one of several media elements offered by Avada – check out the 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 Fusion 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.
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.
YouTube or Vimeo 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 Theme Options for Lightbox (Avada > Theme Options > Lightbox) will affect the visual appearance of the Lightbox used by the Element. Follow the link below to read more about the Lightbox Theme Options.
Lightbox Element Parameters
- type – Choose from image or video. Set what you want to display in the lightbox.
- full_image – The URL path of the image you’d like to display in a lightbox. For example, http://www.sample.com/image.jpg
- video_url – The URL path of the YouTube or Vimeo Video you’d like to display in a lightbox. For example, http://youtube.com/watch?v=X92mpPz1COM
- thumbnail_image – The URL path of the thumbnail image that will trigger the lightbox. For example, http://www.sample.com/image.jpg
- alt_text – The alternate text in case the image cannot be viewed.
- description – The text that will show up in the lightbox as a description below the image.
class – Add a custom class to the wrapping HTML element for further css customization.
id – Add a custom id to the wrapping HTML element for further css customization.
