The Image Element is a fundamental element in Fusion Builder. Images play an important 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 behaviour. Continue reading below to learn more about one of the most commonly used elements in Avada.
How to use the Image Element
The Image element can be used with any of our column elements. This allows you to better control how it displays on your page. This element also has numerous element options, as well as a couple of global theme options. This element also features a lightbox option where you can display a single or multiple image elements.
How To Insert An Image Element
Step 1 - Create a new page or edit an existing one.
Step 2 - Click the 'Use Fusion Builder' button to activate the Fusion Builder.
Step 3 - Insert a Container into the page, then select your desired column layout.
Step 4 - Click the '+ Element' button to bring up the Elements window. Locate the Image Element and click it to add it to the page. Alternatively, just search for 'Image' and the Image Element will be filtered for your selection.
How To Add An Image To The Element
Step 1 - Once you've added an Image element into the page, click the 'Element Settings' icon to bring up the options window.
Step 2 - Locate the 'Image' option. Click the 'Upload' button and select or upload the image you'd like to display inside the image element.
Step 3 - Set the 'Image Lightbox' option to Yes to open the same image in a lightbox. If you'd like to set a different lightbox image, go ahead and upload the image in the 'Lightbox Image' option.
Step 4 - You can also link the image inside the image element to an external link by adding the URL to the 'Picture Link URL' option. Please note that this will not work if you have a Lightbox image uploaded.
Step 5 - Once finished, click the 'Save' button.
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. Continue reading below to learn how to use this option.
Step 1 - Click the '+ Element' button in a column to bring up the Elements window. Locate the 'Image' element and click it to bring up it's options window.
Step 2 - Insert an image to display using the 'Image' option, and set the 'Image Lightbox' option to Yes. If you'd like to set a different lightbox image, assign one using the 'Lightbox Image' option.
Step 3 - Locate the 'Gallery ID' option and insert a unique name for the lightbox gallery that this image frame will belong to. For example, Products.
Step 4 - Repeat steps 1 - 3 for all the Image elements you'd like to include in the lightbox gallery.
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.
Note: The Default setting will use the global settings assigned for this element in your Theme Options > Fusion Builder Elements > Image Element section.
Location: WordPress Dashboard > Avada > Theme Options > Fusion Builder Elements > Image Element
The Avada Advanced Options Network gives you amazing flexibility with additional Global Options that allows you to control individual Elements en masse.