- Video Tutorials for Plesk 12.5
- Video Tutorials for Plesk Onyx
- Plesk Obsidian Use Cases
- WordPress Getting Started
- WordPress Using the Block Editor
- WordPress Customize your Site or Blog
- WordPress Site Marketing
- WordPress Monetize Your Site
- WordPress Domains and Email
- WordPress Manage Your Account
- WordPress Plugins
- Learn WordPress tutorial
- Elementor tutorials - Design & Layout Collection
- Elementor tutorials - WooCommerce Collection
- Elementor tutorials - Integrations Collection
- Elementor tutorials - Dynamic Design Collection
- Elementor tutorials - Theme Builder Collection
- Elementor tutorials - Template Library Collection
- Elementor tutorials - Responsive Collection
- Elementor tutorials - Popups Collection
- Elementor tutorials - Motion Effects & Animations Collection
- Elementor tutorials - Forms Collection
- Plesk WP Toolkit
- Plesk WordPress Toolkit
- WooCommerce How To
- Other
Create Responsive Image Hotspots with Elementor [Advanced Tutorial]
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:
https://youtu.be/vJ851SD-6u0
2. Do’s & Don’ts: Absolute & Fixed Position in Elementor:
https://youtu.be/RA0T52VB2Os
3. How to Use Custom Positioning Units For Best Mobile Responsive Behavior:
https://youtu.be/x5mrXwfavU0
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