Image Hotspots Element

Last Update: March 18, 2024

The Image Hotspots Element allows you to add hotspots to an image, allowing you to highlight a certain area, or areas, of the image with a label that can either open a popover box or just be a link. It’s a very useful element when you want to quickly describe parts of an image. Read below for an overview of the specific features of the Element.

For privacy reasons YouTube needs your permission to be loaded.
I Accept

How To Use The Image Hotspots Element

To start, add the element to your desired column. The first thing to do is to add an image, and choose your general options, like choosing the popover method. Then, on the Children tab, you can add your Hotspot points, and configure their positions and content. There is a Design Tab for each hotspot, as well as a Design tab for the Element as a whole, so you can style the element in a number of ways.

Read below for a description of all element options.

Parent Element Options

Note: The displayed option 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 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.
AlignmentSelect the alignment of the image.
Popover Trigger MethodChoose mouse action to trigger popover.
Element VisibilityChoose to show or hide the element on small, medium or large screens. 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
Hotspots AnimationSelect an animation for the image hotspots.
Popover Heading Background ColorControls the background color of the popover heading.
Popover Content Background ColorControls the background color of the popover content area.
Popover Border ColorControls the border color of the popover box.
Popover Text ColorControls all the text color inside the popover box.
MarginEnter values including any valid CSS unit, ex: 4%.

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.

Child Element Options

General

HeadingDescription
Horizontal PositionSelect the horizontal position of the hotspot. In percentage of the image width.
Vertical PositionSelect the vertical position of the hotspot. In percentage of the image height.
Triggering IconSelect an icon to be displayed inside the hotspot.
Triggering TextEnter the text to be displayed on the hotspot.
Hotspot Trigger ActionSelect the hotspot trigger action. This can be a popover or a link.
Popover HeadingEnter the popover heading.
Popover ContentEnter the popover content.
Popover PositionChoose the display position of the popover in relation to the triggering hotspot. Note: This will automatically change if the popover can't open in the preferred position.
LinkEnter or select a link for the triggering hotspot.
Link TitleSet a link title that will be displayed, when the triggering hotspot is hovered.
Link TargetControls how the link will open.

Design

HeadingDescription
Font SizeEnter value including any valid CSS unit, ex: 20px.
Text ColorSelect the color of the text and the icon.
Background ColorSelect the background color of the hotspot.
Icon And Text SpacingSet the spacing between icon and text. Ex: 5px.
PaddingEnter values including any valid CSS unit, ex: 10px or 10%.
Border RadiusEnter values including any valid CSS unit, ex: 10px or 10%.

In this article