V4 Elements Image Hotspot Estimated reading: 5 minutes 4 views Put clickable dots on top of a picture. When a visitor points at a dot, a small box tells them about that spot. Great for maps, product photos and room tours. No code needed. WIDGET Image Hotspot PARTS Background Image, Hotspots, Tooltips PLAN Pro A QUICK LOOK What You Will Build A city photo with two pulsing dots. Point at a dot, and a small box with your words opens next to it. Point at a dot to see its tooltip BEFORE YOU START Requirement ELEMENTOR V4 Atomic ANIMATION ADDONS Free and Pro Note: Image Hotspot is a Pro widget. Install and activate both Animation Addons and Animation Addons Pro. Note: In the screenshots, the orange boxes and numbers show you exactly where to click. STEP 1 Turn On the Widget Good news: the widget is already on. If you ever need to turn it on again, it only takes a moment. In your WordPress Dashboard, go to Animation Addon > Widgets. Open the Elementor V4 (Atomic) tab. Under Interaction Widgets, find AAE Image Hotspot and switch it on. Click Save Settings. The AAE Image Hotspot card in your dashboard (click to zoom) STEP 2 Add It to Your Page Open a page in the Elementor Editor and drop the widget in. Click the + button at the top left to open the Elements panel. Type Image Hotspot in the search box. Drag it onto your page. The Background Image (1) and the Hotspots (2) (click to zoom) Note: A new widget shows a gray sample picture and two dots. STEP 3 Choose Your Picture Open the Structure panel and click Background Image. In the General tab, click the picture box. Choose or upload your picture. Click Update to save your page. Tip: A wide picture, around 1200 pixels or more, looks sharp. The dots stay on the same spot of the picture on every screen size, because their position is a percent. STEP 4 Add and Place Your Hotspots Select the widget and open Hotspots. Click the + to add a hotspot. Use the copy icon to duplicate one, and the x to delete one. Click a hotspot in the Structure panel to open it. Open Position. Set Horizontal (%): 0 is the left edge and 100 is the right edge. Set Vertical (%): 0 is the top and 100 is the bottom. The list of hotspots (1) (click to zoom) Horizontal and Vertical (1) (click to zoom) Tip: Both start at 50, the center. In this example, the two dots are at 22 / 48 and 68 / 62. STEP 5 Write the Tooltip Each hotspot has a tooltip box. In the Structure panel, open the hotspot and click the Paragraph inside its content box. Type your words in the paragraph. Open the hotspot and find Interaction. Choose what the hotspot does with On Click/Hover. The default is Tooltip. On Click/Hover (1) (click to zoom) Tip: The tooltip is a normal box. You can add a heading, a picture or a button next to the paragraph, and style it in the Style tab. STEP 6 Choose How the Tooltips Open Select the widget and open Behavior. Set Trigger: Hover (default) opens the tooltip when the mouse is on the dot. Click opens it on a click. None does not open it. Trigger (1) (click to zoom) Tip: Choose Click if many of your visitors are on phones. There is no hover on a touch screen. STEP 7 Make the Dots Move Open Marker Animation. Choose an Animation: None, Beat, Pulse (default), Ripple, Ring, Glow or Bounce. Set the Speed (s). The default is 3 seconds. Animation (1) and Speed (2) (click to zoom) STEP 8 Guided Tour (Optional) A guided tour opens the hotspots one by one, by itself, so visitors see them all. Open Guided Tour and switch Enable Tour on. Set the Delay per Hotspot (ms). The default is 3000. Choose whether it should Pause on Hover/Interaction, Loop and Auto-open Tooltips. All three are on by default. Enable Tour (1) (click to zoom) Tip: Try the tour on your live page and tune the delay until it feels right. RESULT Final Result A city photo with two hotspots. The first one is open. The finished Image Hotspot SETTINGS Options Horizontal and Vertical (%) Default: 50 and 50Where the dot sits on the picture. On Click/Hover Default: TooltipWhat the hotspot does. Trigger Default: HoverHover, Click or None. Marker Animation Default: PulseNone, Beat, Pulse, Ripple, Ring, Glow or Bounce. Speed (s) Default: 3How fast the marker moves. Enable Tour Default: OffOpens the hotspots one by one. Delay per Hotspot (ms) Default: 3000Time between hotspots in a tour. Pause, Loop, Auto-open Tooltips Default: OnTour options. ID Optional CSS ID. GOOD TO KNOW More Details Percent positions Dots keep their place on the picture when the screen gets smaller. Many hotspots Add as many as you need. Each has its own tooltip. Tooltip is a box It can hold more than text. Add a heading, a picture or a button. HELP Troubleshooting I do not see Image Hotspot in the Elements panel This is a Pro widget. Make sure Animation Addons Pro is active. Then go to Animation Addon > Widgets > Elementor V4 (Atomic), switch on AAE Image Hotspot and click Save Settings. My dot is in the wrong place Open the hotspot in the Structure panel, then Position, and change Horizontal (%) and Vertical (%). The tooltip does not open Check Trigger in Behavior. It must not be None. On a phone, use Click. The tooltip text is hard to read Click the paragraph inside the tooltip and set a darker color in the Style tab. Your site may set its own text color. The picture is gray You still have the sample picture. Click Background Image in the Structure panel and choose yours. You Did It Your picture now tells its story, one dot at a time. If you face any problem, please contact our support team. We are happy to help.
