How to Build an Elementor Pop-Up Triggered by a Hover Effect

Are you looking for a way to create a pop-up in Elementor triggered by hover effect? Well, look no further as we show you how to do just that in this quick tutorial! It's easy, and best of all, it's completely free - no need for any plugins.

Step-by-Step Guide

Here's what you need to do to create that awesome pop-up:

Step 1: Create the Pop-Up

1. Go to your Elementor control panel and click "Add New."
2. Select "Popup."
3. Choose a template or design your own pop-up.
4. Click "Publish" when done.
5. Select the condition you want - in this case, entire site.
6. Click "Next" on the other settings and save.

Step 2: Add the Pop-Up to Your Page

1. Go to the page in which you want the pop-up to show.
2. In the widget section, look for "HTML."
3. Insert code, which you can find in the description, and change the number to the shortcode of your pop-up.
4. Choose which element triggers the pop-up by going to the element's settings.
5. Insert a class under "Advanced" that matches the code you previously put in the HTML section.
6. Update the page and test to see if it works.

Step 3: Remove Pop-Up on Mouse Removal

1. Go back to the editing mode and find the HTML code which is actually JavaScript.
2. Replace the code with the provided code in the description.
3. Insert the shortcode of your pop-up in the code.
4. Update the page and test.

Conclusion

That's all there is to it! You can create multiple pop-ups and assign different classes to multiple elements to create numerous triggers. If you have any questions or concerns, be sure to leave a comment, and we'll do our best to help. Have fun creating your Elementor pop-up with hover effect!