Using the new popups in Elementor 2.4 Pro to highlight and sell your product in a whole new way is a simple process but does take a few steps and repeated steps for a final result.
Test drive the demo now.
Sold Individually Or As A Complete Outfit Click On Outfit For Details
Curabitur nec cursus lacus. Morbi ut lobortis purus, ut ultricies dui. Curabitur ultrices porttitor purus sed vestibulum. Nunc at libero convallis, sagittis sapien ut, eleifend ex. Aliquam porta vulputate eleifend. Duis nisl tortor, cursus et nisi luctus, dignissim mattis elit. Vivamus eu neque eu erat dictum finibus nec ut nisi.
Etiam vitae placerat velit. Duis maximus sodales eros vitae ultricies. Mauris vitae ipsum nunc. Suspendisse ornare maximus velit eu aliquet. Quisque eleifend tortor sed urna luctus hendrerit. Pellentesque sit amet erat metus. Curabitur congue dui a quam faucibus congue. Nam varius diam non magna molestie, nec viverra felis tempus. Ut gravida interdum sollicitudin. Vivamus tristique vestibulum diam, quis aliquam erat auctor ut. Cras mollis facilisis magna blandit bibendum.
Creating this result takes a few steps in Photoshop or another editor. We will create our large image and the individual parts. We will upload these to the media library.
Create Your Products
Create all your products in WooCommerce. And add the details.
Creating Our First Popup
Create a new popup template with Elementor. We will add our closeup images to the template along with the price. We will link the order now button to the product in our WooCommerce shop. We will set the conditions of the popup to display on entire site but not set any triggers or advanced functions and save our template
Repeat The Popups
Repeat the popup process for the remaining closeups.
Creating Our Feature Section
We create a two column layout and add our product details to the right column. Do not set a link for the large product button yet.
Add Our Hotspot Widget From Jet Elements
Locate this icon from your toolbox. Add it to the right column.
Adding Our Hotspots
Here you can see I have added our primary image and four hotspots over my image.
Linking Our Popups
Edit our button. From the dynamic options, choose popup. Then find our scarf popup and apply it to the button. Minimize your editor so you can preview the page. Right click on our button and copy the link address. Paste the link into our hotspot link but remove the URL and just leave the anchor tag starting with something like this “#elementor-action%3Aaction%3Dpopup%3Aopen%20settings%3DeyJpZCI6IjYyNTYiLCJ0b2dnbGUiOmZhbHNlfQ%3D%3D”
Repeat The Link Process.
Link all four of our popups to the hotspots using the method above.
Test Our Popups
The popups should now link to the hotspots and fire when called.
Fix Our Main Product Button.
We can now go back to our main product button and link it properly.
We hope this tutorial helps you build amazing featured product sections for your website. Please do not forget to smash the like button on the way out the door.