![Create Responsive Image Hotspots with Elementor [Advanced Tutorial]](https://www.dienodigital.com/wp-content/uploads/2021/02/Do-It-Yourself-Tutorials-Create-Responsive-Image-Hotspots.jpg "Do It Yourself – Tutorials – Create Responsive Image Hotspots")
Do It Yourself – Website Tutorials
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!
Get Elementor: https://elementor.com/
Get Pro: https://elementor.com/pro
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
source