![Create Responsive Image Hotspots with Elementor [Advanced Tutorial] - Sites on WordPress](https://i3.ytimg.com/vi/GlwuG8DAaDA/maxresdefault.jpg)
Create Responsive Image Hotspots with Elementor [Advanced Tutorial] - Sites on WordPress
video description
Date: 2022-04-30
Related videos
Comments and reviews: 10
Murgrabia
As you can see those hotspots dont hold their positions relative to the container when swithing between devices. So... this is useless to me ;) I jus did it in Divi. They have custom addon for this, but it is crap too. So as with everything else I coded the hotspots myself. The more I use those builders I realize that there are only two things I use .... general visual layout and scroll animations. The rest is coded via CSS and JS+JQuery to achieve the exact results. I think it is time to switch to webflow ... I am sick with section,row,module structure without possiblity to use regular divs.
reply
As you can see those hotspots dont hold their positions relative to the container when swithing between devices. So... this is useless to me ;) I jus did it in Divi. They have custom addon for this, but it is crap too. So as with everything else I coded the hotspots myself. The more I use those builders I realize that there are only two things I use .... general visual layout and scroll animations. The rest is coded via CSS and JS+JQuery to achieve the exact results. I think it is time to switch to webflow ... I am sick with section,row,module structure without possiblity to use regular divs.
reply
Danny
Neat use of flip box. Will experiment later.
Except.. wouldn-t the active surface be applied to the entire 222px width of the box instead of the icon only?
Say proximity of B overlaps A, if you hover near the proximity of the A box, it-ll activate regardless. This means, activation is not on the icon alone - which is a much smaller area.
reply
Neat use of flip box. Will experiment later.
Except.. wouldn-t the active surface be applied to the entire 222px width of the box instead of the icon only?
Say proximity of B overlaps A, if you hover near the proximity of the A box, it-ll activate regardless. This means, activation is not on the icon alone - which is a much smaller area.
reply
kriskardiak
Hello, thanx for this. I have one question thought. Smartphones and tablets can be vertical or horizontal. I can't manage to have the spots at the same place (even roughly) on my smartphone vertical and horizontal display. Id it's good for vertical, it doesn't horizontally. Do you have any solution for this?
reply
Hello, thanx for this. I have one question thought. Smartphones and tablets can be vertical or horizontal. I can't manage to have the spots at the same place (even roughly) on my smartphone vertical and horizontal display. Id it's good for vertical, it doesn't horizontally. Do you have any solution for this?
reply
Angry
This Method SUCKS!!!!!! because you the -Back- or the -ToolTip- appears not when you hover over the white dot but in the invisible area of the tooltip.
So you have a very LARGE area where the tooltip is displayed see 00:59... see the tooltip starts to appear WAY before the white dot is hovored...
reply
This Method SUCKS!!!!!! because you the -Back- or the -ToolTip- appears not when you hover over the white dot but in the invisible area of the tooltip.
So you have a very LARGE area where the tooltip is displayed see 00:59... see the tooltip starts to appear WAY before the white dot is hovored...
reply
El
No just NO! It's not really responsive. The size of the backside-wrapper depends the size of the front-side and if you want some more text to be shown on the back, the front-side wrapper overlap and you can't hover die Icons properly. Pls make a real Hotspot widget! And divs. I need more divs!
reply
No just NO! It's not really responsive. The size of the backside-wrapper depends the size of the front-side and if you want some more text to be shown on the back, the front-side wrapper overlap and you can't hover die Icons properly. Pls make a real Hotspot widget! And divs. I need more divs!
reply
Douglas
I hope the Elementor team switch the focus to mobile tricks more than desktop.. since most of the users are using mobile instead of desktop.. It's desktop tricks are beautiful but close to useless.. I do not apply it because my visitors come from mobile almost only.
reply
I hope the Elementor team switch the focus to mobile tricks more than desktop.. since most of the users are using mobile instead of desktop.. It's desktop tricks are beautiful but close to useless.. I do not apply it because my visitors come from mobile almost only.
reply
Christos
Awesome tutorial! But how do you separate the positions of the front and the back boxes?
In the examples, we saw you triggering flip boxes, from which the back side was not in the same place as the icon. How is this achieved?
reply
Awesome tutorial! But how do you separate the positions of the front and the back boxes?
In the examples, we saw you triggering flip boxes, from which the back side was not in the same place as the icon. How is this achieved?
reply
Naman
Hi, I use woostify theme for my e-commerce project I added products but the products image are not showing up on any page like home, shop and any other page. It only shows image on the single product pages.
Please help me.
reply
Hi, I use woostify theme for my e-commerce project I added products but the products image are not showing up on any page like home, shop and any other page. It only shows image on the single product pages.
Please help me.
reply
Mobili
Hello, I'm going crazy, but how do you put hotspots on a video instead of an image? I would like to make my site interactive with videos and hotspots. I'm afraid that with Elementor I can't ... I ask for help.
reply
Hello, I'm going crazy, but how do you put hotspots on a video instead of an image? I would like to make my site interactive with videos and hotspots. I'm afraid that with Elementor I can't ... I ask for help.
reply
Hendrik
OMG YES! This was just what I was looking for! I saw this effect being used in the wakeboard webshop that was in the best Elementor websites from nov 2020 and was so curious how it was made!
reply
OMG YES! This was just what I was looking for! I saw this effect being used in the wakeboard webshop that was in the best Elementor websites from nov 2020 and was so curious how it was made!
reply
Add a review, comment
Other channel videos
15:12
