Hi all, thanks for the tip, I used a external plugin for this but now I don't have to. So less plugins, less code, less hassle, better optimization, better seo
Ok.. I'm devoted to Elementor, but you guys and gals really need to create a real hotspot widget that is specifically designed for this purpose..... PLEASE!
Great video. Just what I needed. I have been trying it out on my own website. There is just one great downside - it is not possible to put the dots/points very close each other?
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?
Hi there, in the style's tab you can find different alignment options for the back and front sides. Make sure you have the default full width for them to work. You can also use a different flip effect like slide or push. These are located in the content's tab under settings. Hope this helps
What we could really do with is the ability to make each hotspot a different colour. For example in your tutorial the dot for the frame could be yellow and the dot for the chest of drawers could be red. I can't do this using the hotspot widget in Elementor pro. Is it possible using the flip box method?
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.
Hi there, yes this is correct. In general a wider "active area" helps with the user experience to interact with elements easier. If your example requires precision, you can add this line and manually set the width only for the front side: selector .elementor-flip-box__front{width:20px}
Hi there, select the flip box widget and in style, you will find different alignment options for the back and front slides. The widget will need all of the column's width for this to work like in the starting example.
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.
There are an issue, it is should activate the flip up only when the cursor passes over the icon and not when it approaches the flip up area. How we can to fix that?
Hi there, I believe setting the width through the editor affects both sides to maintain design consistency. A simple way to do this would be to add a CSS line that targets only the front side like this: selector .elementor-flip-box__front{width:20px}
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?
Hi Kriskardiak. We have a large responsive editing update coming very soon, which may solve your issue. Please stay tuned: github.com/elementor/elementor/issues/15797. In the meantime, I recommend posting your question in the Elementor Community. You'll be able to share screenshots and more information about this issue and get great advice from other web creators: forum.elementor.com.
Hi there, different users have different design needs. For example, having auto by default could affect a user's column that was originally placed on the left. Make sure you are following our updates, there are many new features on the way! :)
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.
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.
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...
The PRO version called "Image Hotspot" is EVEN WORSE!!!! as it limits the functionality of what can be displayed in the tooltip... what we are left with is two half-baked poorly working solutions and nothing that can do everything in one go! I'm not even talking about advanced functionality like adding: images, videos, or the real reason anyone would want this is Woo Products... mouse over to see the Product in Image... but NOOOO That would be too progressive and way too logical and obvious... let's make everything difficult and unnecessarily stupid!
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.
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!
![[01] Layout Optimization Best Practice](http://i.ytimg.com/vi/vBAKGupM0co/mqdefault.jpg)
![[01] Layout Optimization Best Practice](/img/tr.png)
![WEBINAR: Level Up Your Design Skills With Sticky Elements In Elementor Pro [ADVANCED]](http://i.ytimg.com/vi/XiQV4nE8vu8/mqdefault.jpg)
![[New] How to use the Hotspot Widget in Elementor | Elementor Pro 3.3](http://i.ytimg.com/vi/ZK_J-bHrUo0/mqdefault.jpg)
Ohyeah! More advanced tips like this please 😍
Never use flip box before. Now it looks super dope.
0:39 Excellent! Thanks, Elementor.
Hi all, thanks for the tip, I used a external plugin for this but now I don't have to. So less plugins, less code, less hassle, better optimization, better seo
I had no idea you could do this within Elementor, I've been using Essential Addons for this for so long, and I have a channel devoted to this stuff!
Ok.. I'm devoted to Elementor, but you guys and gals really need to create a real hotspot widget that is specifically designed for this purpose..... PLEASE!
there is, it's in the pro version and it SUCKS!!!!
Great video. Just what I needed. I have been trying it out on my own website. There is just one great downside - it is not possible to put the dots/points very close each other?
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?
Hi there, in the style's tab you can find different alignment options for the back and front sides. Make sure you have the default full width for them to work. You can also use a different flip effect like slide or push. These are located in the content's tab under settings. Hope this helps
this will save my time, money and resource! thanks!
Very nice.
Please also make more pro videos 🙂
Hi, thanks for the tutorial! Got one question though, on 00:37, how do you make the plus icon rotated when hovering?
waiting for an answer
Hey, how does it work at 0:44 "Simple Recipes"there is not a flip box, I like it with the typing and line running to the hotspot?
Hi there, it is indeed a flip box widget. I just used a line character like this --- or this ___
Switch font types until you get a similar result.
Nice combination. Super
What we could really do with is the ability to make each hotspot a different colour. For example in your tutorial the dot for the frame could be yellow and the dot for the chest of drawers could be red. I can't do this using the hotspot widget in Elementor pro. Is it possible using the flip box method?
I had no idea you can adjust positioning by dragging objects on the page 🤯
Only works when it is set on percentage, I think
Amazing! Thank you
Great tips and tricks! Is it possible to add an image to the Flipbox back side?
Hi there, yes this is possible. Just like we did with the example's background, instead of a colour select an image.
I’m not sure I’d use this method but it was a really clever use of the flip box all the same. Good tip on the column settings too 👍
Can you make the hotspot completely transparent for certain situations?
More tips like this please!
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.
Hi there, yes this is correct. In general a wider "active area" helps with the user experience to interact with elements easier. If your example requires precision, you can add this line and manually set the width only for the front side: selector .elementor-flip-box__front{width:20px}
Now thats what I call "thinking outside the box"
How do i position the back side of the flipbox differently than the front as seen in the examples showed in the begining?
Hi there, select the flip box widget and in style, you will find different alignment options for the back and front slides.
The widget will need all of the column's width for this to work like in the starting example.
@@stevenkiridis Thanks a bunch! Will try this out
Cna this be automated? so it shows the info of the tooltips without passing the mouse over?
Ziv I really like your tutorials, just one question:
How to set the text to be from the side to the point as in 10.13 the food plate
This is beyond cool. Thank you very much!!
Beyond cool? Little hyperbolic wouldn't you say.
@@MrE1981 No.
The dude
sounds like Terrance and Phillip from South Park LOL
Sometimes it's weird hearing my fellow South African's accent on international videos.
Great tutorial! more like this! 😀
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.
There are an issue, it is should activate the flip up only when the cursor passes over the icon and not when it approaches the flip up area. How we can to fix that?
Hi there, I believe setting the width through the editor affects both sides to maintain design consistency. A simple way to do this would be to add a CSS line that targets only the front side like this: selector .elementor-flip-box__front{width:20px}
@@stevenkiridis it didn't work
@@betycastillo5312 Try setting the width in the "Advanced Tab" back to "default", the CSS should work
Awesome! has anyone tried to check how responsive this design would look like on Safari browsers? both Macbooks and iPhones?
Amazing thank you for the tutorial !! 🔥
The tutorial begins at 1:27
Awesome!!!
Great idea!
Flip box widget only available with Elementor pro :'(
Amazing!
So awesome!!
Awesome! I was looking for something like this
Thanks Mayank! I'm happy you found it helpful 🤩
how to make such header thooo. That the borders are black and inside is white
Hi there, you mean the heading text right? I added text stroke in the widget's CSS
@@stevenkiridis thank you !
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?
Hi Kriskardiak. We have a large responsive editing update coming very soon, which may solve your issue. Please stay tuned: github.com/elementor/elementor/issues/15797. In the meantime, I recommend posting your question in the Elementor Community. You'll be able to share screenshots and more information about this issue and get great advice from other web creators: forum.elementor.com.
What about basic menus for food? any links? to make a basic food menu>
Is it best to use the flipbox widget or hotspot widget?
Hi Dee, they're both great options. It really depends on your needs and preferences.
Nice!
oh coooool!!!
Having auto for column should be already in the widget settings tbh. Also, new widgets and redesigns - when?
Hi there, different users have different design needs. For example, having auto by default could affect a user's column that was originally placed on the left. Make sure you are following our updates, there are many new features on the way! :)
thank you so much
More advanced tips please elementor voice man
Great!!!
Amazing Super!
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.
IF USER IS NOT LOGGED IN, USER CANNOT USE CONTACT US FORM TO SUBMIT.
HERE A POPUP SHOULD DIRECT THEM TO REGISTER OR LOGIN FIRST
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.
Mitic
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...
The PRO version called "Image Hotspot" is EVEN WORSE!!!! as it limits the functionality of what can be displayed in the tooltip...
what we are left with is two half-baked poorly working solutions and nothing that can do everything in one go!
I'm not even talking about advanced functionality like adding: images, videos, or the real reason anyone would want this is Woo Products... mouse over to see the Product in Image... but NOOOO That would be too progressive and way too logical and obvious... let's make everything difficult and unnecessarily stupid!
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.
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!
Awesome sauce!