Image Element

Last Update: May 8, 2024

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.

For privacy reasons YouTube needs your permission to be loaded.

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 use 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.

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.

Element Options

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.

General

HeadingDescription
ImageUpload an image to display.
Image Aspect RatioSelect an aspect ratio for the image.
Custom Aspect RatioSet a custom aspect ratio for the image.
Image Focus PointSet the image focus point by dragging the blue dot.
Skip Lazy LoadingSelect whether you want to skip lazy loading on this image or not.
Image LightboxShow image in lightbox. Lightbox must be enabled in Global Options or the image will open up in the same tab by itself.
Gallery IDSet a name for the lightbox gallery this image should belong to.
Lightbox ImageUpload an image that will show up in the lightbox.
Image Alt TextThe alt attribute provides alternative information if an image cannot be viewed.
Image Link URLAdd the URL the image will link to, ex: http://example.com.
Link TargetControls how the link will open.
Element VisibilityChoose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
Element Sticky VisibilityChoose to show or hide the element, based on the current mode (normal or sticky) of its parent container. You can choose more than one at a time.
CSS ClassAdd a class to the wrapping HTML element.
CSS IDAdd an ID to the wrapping HTML element.

Design

HeadingDescription
Image Max WidthSet the maximum width the image should take up. Enter value including any valid CSS unit, ex: 200px. Leave empty to use full image width.
Image Sticky Max WidthSet the maximum width the image should take up when its parent container is sticky. Enter value including any valid CSS unit, ex: 200px. Leave empty to use full image width.
AlignmentChoose how to align the image.
MaskSelect an image mask.
Custom MaskUpload a custom mask image. The image should be in SVG or PNG format with transparent background.
Mask SizeSelect the mask size.
Custom SizeSet the size of the image mask. Enter value including any valid CSS unit ex. 60% or 200px.
Mask PositionSet image mask position.
Custom Mask PositionSet a custom image mask position. Enter value including any valid CSS unit in pair first for X axis second for Y axis ex. 60% 50px.
Mask RepeatSelect how the image mask repeats.
Style TypeSelect the style type. Style type will be disabled when using mask or caption styles other than "Above" or "Below" are chosen.
Glow / Drop Shadow BlurChoose the amount of blur added to glow or drop shadow effect. In pixels.
Style ColorControls the style color for all style types except border. Hex colors will use a subtle auto added alpha level to produce a nice effect.
Hover TypeSelect the hover effect type. Hover Type will be disabled when caption styles other than Above or Below are chosen. Hover type scroll will not work when style type is set to bottom shadow.
Image to MagnifyUpload the full image to magnify. If not added the default image will be used.
Magnify DurationThe fade in and fade out speed of the large image.
Image Frame HeightThe height of the frame in pixels in which the image will be scrolled.
Scroll SpeedThe scroll speed of the image in seconds
MarginEnter values including any valid CSS unit, ex: 4%.
Border SizeIn pixels.
Border ColorControls the border color.
Border RadiusControls the image border radius. In pixels (px), ex: 1px, or "round".
Z IndexValue for the z-index CSS property of the image, can be both positive or negative.

Caption

HeadingDescription
CaptionChoose the caption style.
Title / Caption AlignChoose how to align the caption.
Image TitleEnter title text to be displayed on image.
Image CaptionEnter caption text to be displayed on image.
Image Title Heading TagChoose HTML tag of the image title, either div or the heading tag, h1-h6.
Image Title TypographyControls the typography of the image title. Leave empty for the global font family.
Image Caption Background ColorControls the background color of the caption.
Image Caption TypographyControls the typography of the image caption. Leave empty for the global font family.
Caption Border ColorControls the color of the caption border.
Image Overlay ColorControls the color of the image overlay.
Caption Area MarginIn pixels or percentage, ex: 10px or 10%.

Extras

HeadingDescription
Animation TypeSelect the type of animation to use on the element.
Direction of AnimationSelect the incoming direction for the animation.
Animation ColorSelect the color of the animation
Speed of AnimationType in speed of animation in seconds (0.1 - 5).
Animation DelaySelect the delay time after the animation starts(0 - 5).
Offset of AnimationControls when the animation should start.
Filter Type
HueFilter hue.
SaturationFilter saturation.
BrightnessFilter brightness.
ContrastFilter contrast.
InvertFilter invert.
SepiaFilter sepia.
OpacityFilter opacity.
BlurFilter blur.

Useful Links & Resources

In this article