Image Hotspots
How to Configure and Style Image Hotspots #
Image Hotspots allows you easily highlight your images with hotspots by adding custom tooltips, and plenty of styling options. You can even set your custom tooltips content, positions, add animations, and more to make your image hotspots section interactive for your site visitors. Let’s check out the step by step guidelines below to configure and style your Image Hotspots:
How To Activate Image Hotspot #
To use this Sastra Addons element, find the ‘Image Hotspots’ element from the Search option under the ‘ELEMENTS’ tab. Simply just Drag & Drop the ‘Image Hotspots’ into the ‘Drag widget here‘ or the ‘+’ section.
After you are successfully done with step 1, this is how the element is going to look like.
How To Configure The Content Settings #
After you have completed adding the Image Hotspots in your Elementor Editor, now all you need to do is to configure the ‘Content’ tab. Which consists of ‘Image’, ‘Hotspots’, & ‘Tooltip Settings’ options.
Image #
From the ‘Image’ option, you can add your preferred image here, and use the drop-down menu to specify an image size or opt for a custom size.
Hotspot #
From the ‘Hotspots’ section, you can add as many hotspots as you want with the ‘Add New’ button. And each new hotspot section comes with three separate tabs displaying ‘Content’ and ‘Position’.
With the ‘Content’ section, you can add which type of content you want to add like text, icon, or make it blanked. Also can add links and decide whether to open your image hotspots with a new tab on your website or not.
From the ‘Position’ option you can make sure where you want to place your image hotspot marker as per your preference.
Tooltips #
From the ‘Tooltips’, you can show an arrow on your image hotspots tooltip, set its size to default, tiny, small, large with your preferred positions.
Besides, if you want you can add beautiful animation effects with ‘Animation’ options to your Image Hotspots tooltips. Also, set your animation duration, Distance and more with your preferences.
Click to See Live Demo #
How to Style Your Image Hotspots #
Switch to the ‘Style’ tab to style all the features of Image Hotspots.
Hotspots #
From the ‘Hotspot’ section, you can change your hotspot size, icon size, padding, and color. You can even add background color, border type, radius, shadow and many more.
Tooltips #
From the ‘Tooltips’ section, you can style your ‘Tooltip’ separately by changing the background color, text color, text, shadow, padding and typography.
Final Outcome #
By following the basic steps and a bit more modifying, you can style your Image Hotspots as per your preference.
This is how simply you can beautifully showcase your image hotspots section on your WordPress website using Image Hotspots.
Getting stuck? Feel to Contact Our Support for further assistance.
Subscribe & Download
Enter Your Email Address to Know About the Latest Updates & Features.