Image Element

07/06/2019

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.

View More Examples!

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.

Image Element > Location

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

Creating A Gallery With Image Elements

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.

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.

Note: The Default settings will use the global settings assigned for this element in your Theme Options > Fusion Builder Elements > Image Element section. 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.

General Tab

  • Image – Allows you to upload an image to display.

  • Image Max Width – Allows you to set a maximum width for your image.

  • Style Type – Allows you to select a style type. Choose from None, Glow, Drop Shadow, or Bottom Shadow.

  • Glow / Drop Shadow Blur – Allows you to set the amount of blur added to the glow or drop shadow styles.

  • Style Color – Allows you to set the color for the styles.

  • Hover Type – Allows you to select the hover effect type. Choose from None, Zoom In, Zoom Out, or Lift Up.

  • Border Size – Allows you to set the border’s size.

  • Border Color – Allows you to set the border’s color.

  • Border Radius – Allows you to set the border’s radius.

  • Align – Allows you to choose how to align the image. Choose between None, Left, Right, or Center.

  • Image Lightbox – Allows you to display the image in a lightbox. Choose between Yes or No.

  • Gallery ID – Allows you to set a name for the lightbox gallery the image frame belongs to.

  • Lightbox Image – Allows you to upload a different image to display on the lightbox.

  • Image Alt Text – Allows you to set alternative information in case the image cannot be viewed.

  • Picture Link URL – Allows you to set a URL which the picture will link to when clicked. ‘Image Lightbox’ option must be set to No.

  • Link Target – Allows you to set how the link opens. Choose between _self for the same window or _blank for a new window.

  • Element Visibility – Allows you to control the column’s visibility. Choose one or more between Small Screen, Medium Screen, or Large Screen.

  • CSS Class – Allows you to add a class for the column.

  • CSS ID – Allows you to add an ID for the column.

View The Options Screen

Animation Tab

  • Animation Type – Controls the column’s animation type. Choose between None, Bounce, Fade, Flash, Rubberband, Shake, Slide, or Zoom.

  • Direction of Animation – Controls the direction of animation on the column. Choose between Top, Right, Bottom, Left, or Static.

  • Speed of Animation – Controls the speed of animation on the column. Choose between 0.1 to 1.

  • Offset of Animation – Controls when the animation will start. Choose between Default, Top of element hits bottom of viewport, Top of element hits middle of viewport, or Bottom of element enters viewport.

View The Options Screen

Global Options

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.

  • Image Style Type – Allows you to set the Image Element’s Style type.

  • Image Glow / Drop Shadow Blur – Allows you to set the amount of blur added to the glow or drop shadow effect.

  • Image Style Color – This controls the style color for all style types except border.

  • Image Border Size – Allows you to set the border size. Accepts a pixel value.

  • Image Border Color – Allows you to set the border color. Accepts a hexcode (#000000).

  • Image Border Radius – Allows you to set the border radius. Accepts a pixel value.

View The Options Screen

Image Element Parameters

Copy to Clipboard
  • image_id – The uploaded image’s attachment ID.
  • max_width – The uploaded image’s maximum width.

  • style_type – Choose from none, glow, dropshadow, or bottomshadow. Set the frame’s style type.
  • blur – The amount of blur added to glow or drop shadow effect. In pixels.

  • stylecolor – Accepts a hexcode ( #000000 ). Sets the style color for all style types except for the border style.
  • hover_type – Choose from none, zoomin, zoomout, or liftup. Sets the image’s hover effect animation.
  • bordersize – Accepts a pixel value. For example, 5px. Sets the border’s size.
  • bordercolor – Accepts a hexcode ( #000000 ). Sets the border’s color.
  • borderradius – Accepts a pixel value. For example, 5px. Sets the radius of the image frame’s border.
  • align – Choose from left, right, or center. Sets image’s alignment.
  • lightbox – Choose from yes, or no. Show or hide the image in a lightbox.
  • gallery_id – The name of the lightbox gallery this image frame should belong to. Learn more here.
  • lightbox_image – The URL path of the lightbox image to be displayed. For example, http://www.sample.com/image.jpg.
  • lightbox_image_id – Lightbox Image ID from Media Library.

  • alt – The alternative title text that will show up in the lightbox if the image cannot be viewed.

  • link – The URL path the image links to. For example, http://www.sample.com. Lightbox must be disabled.
  • linktarget – Choose from _blank or _self. Choose _blank to open the link in a new window, or _self to open it in the same window.
  • hide_on_mobile – Choose from small-visibility, medium-visibility or large-visibility. You can select more than one setting. This will show the element on the selected visibility options, and will hide them on the deselected ones.
  • class – Add a custom class to the wrapping HTML element for further css customization. Learn more here.
  • id – Add a custom id to the wrapping HTML element for further css customization. Learn more here.
  • animation_type – Choose from none, bounce, fade, flash, rubberBand, shake, slide, or zoom. Sets the animation to use on the element.
  • animation_direction – Choose from down, right, left, up, or static. Sets the animation’s incoming direction.
  • animation_speed – Accepts a numerical value from .1 (fastest), to 1, (slowest).
  • animation_offset – Choose from default, top-into-view, top-mid-of-view, or bottom-in-view. Sets when the animation starts.
  • custom content – Insert the image you’d like to display between the
    Copy to Clipboard

    tags.