Image Hotspots Element

26/10/2021

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 open either a popover box or a link. Read below for an overview of the specific features of the Element.

Olives Chick Peas Naan Bread Yoghurt Figs Peas Red Peppers Cucumber

How To Use The Image Hotspots Element

Step 1. Ensure Avada Builder, or Avada Live is active.

Step 2. Create, or choose the Column you wish to add the Element into. Click on Add New Element.

Step 3. Choose Image Hotspots from the Elements List.

Step 4. Insert an Image via the General tab.

Step 5. On the Children tab, you can add your Hotspot points, and configure their positions and content.

Step 6. There is a Design Tab for each hotspot, as well as a Design tab for the Element as a whole.

Step 7. Remember to save your changes when you are finished customizing the Element.

Read below for a detailed description of all element options.

868,146 Businesses Trust Avada

Get Avada

868,146 Businesses Trust Avada

Get Avada

868,146 Businesses Trust Avada

Get Avada

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

Children Tab

Add / Edit Items – This is where add or edit new items for this Element. You can reorder elements by dragging them and dropping them into place.
+ Add Hotspot Point – Allows you to add a hotspot point to the image.
Item Options
Edit Item Icon – Allows you to edit the individual child items in your list.
Clone Item Icon – Allows you to clone an item. Cloned items will automatically be added to the bottom of the items list.
Delete Item Icon – Allows you to delete an item.
Re-order Feature – The four-arrowed icon allows you to drag and drop the hotspot points into your desired order.

View The Options Screen

General Tab

Image – Upload an image to display.
Maximum Image Width – Set the maximum width the image should take up. Enter value including any valid CSS unit, ex: 200px. Leave empty to use full image width.
Alignment – Select the alignment of the image. Choose from Text Flow, Left, Center, or Right.
Popover Trigger Method – Choose mouse action to trigger popover. Choose from Hover, or Click.
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

Design Tab

Hotspots Animation – Controls the background color of the popover heading. Choose from None, Pumping, Pulsating, Showing, or Pumping & Showing.
Popover Heading Background Color – Controls the background color of the popover heading.
Popover Content Background Color – Controls the background color of the popover content area.
Popover Border Color – Controls the border color of the of the popover box.
Popover Text Color – Controls all the text color inside the popover box.

View The Options Screen

Extras Tab

Animation Type – Controls the column’s animation type. Choose between None, Bounce, Fade, Flash, Rubberband, Shake, Slide, Zoom, Flip Vertically, Flip Horizontally, or Light Speed.
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

Item General Tab

Horizontal Position – Select the horizontal position of the hotspot. In percentage of the image height.
Vertical Position – Select the vertical position of the hotspot. In percentage of the image width.
Triggering Icon – Select an icon to be displayed inside the triggering button.
Triggering Text – The short text that will be displayed inside the triggering button.
Button Trigger Action – Choose what the hotspot button action would be. You can open a popover or a link.
Popover Heading – The long title that will be shown when a user moves the mouse over a hotspot.
Content Inside Popover – The long text that will be shown when a user moves the mouse over a hotspot.
Popover Preferred Open Position – Choose where the popover will prefer to be placed in rapport with the triggering button. The placement will be shift to another place automatically if it cannot open in the preferred place. Choose from Auto, Top, Right, Bottom, or Left.
Link – The link where the user would go when click the button.
Link Title – The link title will be displayed when a user keep the mouse over a link.
Link Open Window – How the link will be opened, either in the current window, or in a new tab.

View The Options Screen

Item Design Tab

Font Size – Enter value including any valid CSS unit.
Text Color – Select the color of the text and the icon.
Background Color – Select the background color of the hotspot.
Hover Text Color – Select the color of the text and the icon when the mouse is over the button.
Hover Background Color – Select the background color of the hotspot when the mouse is over the button.
Distance Between Icon And Text – The distance between icon and text. Ex: 5px
Padding – Enter values including any valid CSS unit, ex: 10px or 10%.
Border Radius – Enter values including any valid CSS unit, ex: 10px or 10%.