Last Update: February 20, 2023
The Image Element is a fundamental Element in Avada Builder. Images play critical roles in websites, and with the Image Element, you can easily add images to your site, with a large amount of control over their appearance and behavior. Continue reading below to learn more about one of the most commonly used elements in Avada, and watch the video for a visual overview.
How To Use The Image Element
The Image Element can be used anywhere in your content. This element has numerous options, as well as a few global options. It also features a Lightbox option where you can display a single or multiple image elements, and in some instances can be pulled dynamically.
To start, add the element into your desired column. Once you’ve added the Element into the page, you will see a placeholder image on the page (Avada Live). The first element option is called Image. Click the ‘Plus’ button and select or upload the image you’d like to display inside the image element.
Configure the Element to your preferences. There is a wide range of options with this Element, including Style Types, Boders, Captions, Masks, Aspect ratios etc.
How To Use ‘Gallery ID’ Option
The ‘Gallery ID’ option allows you to combine any number of Image Elements on the page to display in the same lightbox gallery.
To user this feature, add an Image Element in the usual manner. Set the ‘Image Lightbox’ option to Yes. If you’d like to set a different lightbox image, assign one using the ‘Lightbox Image’ option.
Locate the ‘Gallery ID’ option and insert a unique name for the lightbox gallery that this image frame will belong to. For example, Products.
Repeat steps 1 – 3 for all the Image elements you’d like to include in the lightbox gallery.
How To Use The Image Element To Add A Logo To A Header Layout
You can also use the Image Element to add a Logo to a Header Layout. To do this, you can simply insert an image as normal, or you can use the Dynamic Content option in the Image field. Under Site, there is a Logo option, and when you select this, you can choose a Logo Type (see below). You can select any of the three logo types (Default, Sticky and Mobile) in both Normal or Retina, or you can select the All option. This pulls the most appropriate logo from the Global Options Logo area as the image, depending on the size of your screen.
Note: The Default settings will use the global settings assigned for this element at Options > Avada Builder Elements > Image. Also, please note that the displayed options 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.