Create Responsive Image Hotspots with Elementor [Advanced Tutorial]

preview_player
Показать описание
In this Tips & Tricks Tutorial, we learn how to create responsive-friendly Image Hotspots entirely with Elementor. Adding a layer of playful UX is a great way to increase website conversion rates and really make them stand out!
We use Elementor’s Image and Flip Box widgets to build this effect while going over the fundamentals of absolute positioning.

This tutorial will cover:
✔︎ How to create and use Image Hotspots
✔︎ Understand the Image and Flip Box widgets
✔︎ Absolute positioning
✔︎ Responsiveness with Absolute positioning
✔︎ Column Alignment
✔︎ And more!

Don’t forget to subscribe to our channel!

Check out these tutorials to learn more about custom positioning:
1. How to Use Absolute & Fixed Custom Positioning in Elementor:
2. Do’s & Don’ts: Absolute & Fixed Position in Elementor:
3. How to Use Custom Positioning Units For Best Mobile Responsive Behavior:

Note: This is an advanced tutorial, if you are facing difficulties keeping your flip-box icon responsive, try setting it to the top left corner by following these steps:
Click your flip-box widget and in the Style tab, set the Alignment to left and Vertical Alignment to Top
Рекомендации по теме
Комментарии
Автор

Ohyeah! More advanced tips like this please 😍

knbenji
Автор

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

WIThEMaN
Автор

Never use flip box before. Now it looks super dope.

loliradotopper
Автор

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 PLEASE!

frankstone
Автор

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!

NathanMinns
Автор

this will save my time, money and resource! thanks!

unggulkirindi
Автор

Very nice.
Please also make more pro videos 🙂

iamalifawad
Автор

The dude
sounds like Terrance and Phillip from South Park LOL

ThePjp
Автор

This is beyond cool. Thank you very much!!

gerardpatrick
Автор

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 👍

AntGeezer
Автор

Amazing thank you for the tutorial !! 🔥

larry.lam.
Автор

I had no idea you can adjust positioning by dragging objects on the page 🤯

raybrownme
Автор

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?

persommer
Автор

Now thats what I call "thinking outside the box"

Автор

Awesome! has anyone tried to check how responsive this design would look like on Safari browsers? both Macbooks and iPhones?

Grimmjow-VI
Автор

Great tips and tricks! Is it possible to add an image to the Flipbox back side?

MiroVaz
Автор

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?

christosdaglis
Автор

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.

dannyfoo
Автор

Can you make the hotspot completely transparent for certain situations?

wellnix
Автор

Hi, thanks for the tutorial! Got one question though, on 00:37, how do you make the plus icon rotated when hovering?

jung-hsingtien