How to Create Dynamic Popups in Elementor - Step by Step
Vložit
- čas přidán 30. 07. 2024
- Looking to create a Dynamic Popup in Elementor? In this video, I'll show you how to create a popups in Elementor that pull dynamic data such as custom post types using the listing widget. Follow along as I provide step-by-step instructions using Elementor Pro, Crocoblock JetEngine and JetPopUps.
Whether you're a beginner or an experienced Elementor and JetEngine user, this tutorial is perfect for anyone looking to add a dynamic popup to their website. So, grab your Elementor toolkit and let's get started! Don't forget to like and subscribe for more Elementor tutorials and website design tips.
TOOLS NEEDED:
✅ Elementor Pro
www.hugomakes.com/recommends/...
✅Crocoblock JetEngine & JetPopUp
www.hugomakes.com/recommends/...
I have a full text tutorial of this video over at my website, be sure to check it out!
00:00 Introduction
00:15 Required Plugins
01:04 Checking Plugins and Adding Sample Content
03:18 Creating The Listing Grid
09:45 Creating the Popup
13:39 Making the Popup Dynamic
18:45 Outro
DISCLAIMER: This video and description contains affiliate links, which means that if you click on one of the product links, I’ll receive a small commission. - Jak na to + styl
This is the best tutorial out there for making these. Extremely helpful. Thank you!
Thanks Ben really appreciate it. I'll have more advanced tutorials for Elementor in the future, so hope you stick around.
THANK YOU ! LIFE SAVIOUR! I WAS STRESSING OUT BECAUSE OF THE ISSUE. Glad to find your video!
Yeah that's exactly why I made the video! Glad it helped you! :) Cool channel by the way.
Perfect tutorial thankyou! I now have dynamic popups loading from a Dynamic table.
Thanks for the comment! Glad it helps
The best! awesome tutorial for a great feature! thanks
Thanks for the kind comments. Glad it helped.
Great tutorial, it works, but when I add another listing on the page that needs to make use of the popup , well even on another page... those stay blank??
Brilliant tutorial, any idea how to add "NEXT" button on popup open, so the next button can show next item in the listing without having to close the popup, so users can view the listing next & previous while popup is active?
I can't explain how important this video is to me,,,,, almost 2 days I searched for this solution. Finally, I got it. thanks a lot.May Allah reward you best
Hi, thanks. Yeah it took me some time to figure out how to get it done. Glad it helped!
That was really good, thank you!!
Absolutely! Glad to be of help.
Hey
Is there a chance that this works with elementor loop grid?
Very helpful sir, keep going and Make a complete tutorial on crocoblock plugins
Thanks -- my plain is exactly that! :)
Thank You
You're welcome
thank you
You're welcome
happy to find this tutorial after building this out in elementor's loops only to find it wouldn't work, but now I'm having trouble getting the dynamic fields to appear in the popup. The listing grid is populating correctly, but only static info appears in the popup
Same issue here...I'm troubleshooting now, I'll let you know if I figure out a solution. Everything worked up until the very end too..I set the visibility setting, ajax, connected them to the listing grid, etc. But only static content shows in the pop-up, not the linked dynamic custom fields. Clearly it's worked for some of you though, so hopefully I can figure this out!
Thanks for the tutorial either way Hugo!
@@adamcook446 Have you found a solution for this?
how to work this with elementor popup builder?
Thank you very much for this tutorial! You made my day!!! Just a question: there's any chance to order the post with a specific order?
Hi! Yeah there are actually various sorting options. If you go to this timestap czcams.com/video/gEc0ygHq9qw/video.htmlsi=v9hYHhnAg0KlQ0Zr&t=288 if you look at the widget options, you will see one called Posts Query. That's the area where you can find different types of filter capability, as well as ordering. Hope that helps!
Thank you so much@@hugomakes I'll try it now!
It works perfectly, now I'm struggling with the mobile version.
What in particular are you struggling with? If it's that you have too many columns, in the first widget pane of the listing grid you can change it from 3 or 4 to 1 so it stacks nicely. Let me know!
is it possible to add a shortcode inside the popup? I would like to make the shortcode dynamic.. I have tried it but it doesnt seem load the content.. not sure what I missed
Yes you are able to use short codes in Elementor popups.
jajakallah🙂🙂
Hi Hugo, Is it possible to open a jet popup with dynamic content from a custom post triggered by a text link? I'd like to trigger pop-ups with dynamic "more info" content. The tutorial with listing grid trigger worked fine, thanks!
If I understand correctly you want to just trigger a pop-up in a custom post page (like inside a detail team member page or a property listing page or something like that) is that correct?
@@hugomakes I have "More Info" custom posts for technical entries
and I'd like to open the technical entry in a dynamic popup triggered from a text link on another page/post. Basically the popup shows the definition or concept about the original word / link.
Ok so the more info link is on another page, and the technical pop-up is a separate page (like an archive page or a page that has the listing grid). You want to open the pop-up with the dynamic content in that listing grid from another page. Let me know if that's what you're looking to do.
tnx
of course! thank for watching :)
Hello.
Anyone had a solution to remove that preloader for popup and instead use a loader inside the popup content until the ajax loading completely?
Thanks!
You would need to use JavaScript event listeners for that. If you don't know Javascript, you can try querying Elementor AI to see if it will write something for you. Might be worth a shot.
I like the solution and tried to implement it but my client was thinking that it's too slow for the loading time, is there a way to make it more efficient, as fast as a normal popup? Thanks!
Unfortunately we are at the mercy of these plugins. What may look like a delay is that the data is being pulled via ajax on pop-up click. For me is pretty fast, so you can try a few things. 1. Enable caching on the website if not already doing so. 2. Make sure have a really fast hosting company such as cloudways. 3. You can also opt out of using the Crocoblock pop-up, and instead hand code that particular area of the site so that it pulls the pop-up information at the same time as the grid so this way it is already loaded into the browser and so it feels less slow. First I would try the caching and overall making sure your client is using a fast host since that will just make the experience overall the best.
Can it be done now with Elementor's built-in Loop Builder and Popup builder? Or without using Jet Popups?
Not at this time unfortunately!
yes
ElementHow has a tutorial about that.
@@franktielemans6624 can you send a link? i cant find it..
@@franktielemans6624 hey, can u link it please? how to integrate AFC to a popup? because my issu is that the information of the ACF doesn't show when i open the popup
Hi, thanks for the explanation, but does that "team" post was a custom content type? Or a custom post type? Thanks in advance.
Nevermind. I missed it when you mentioned it on the video. It's a CPT. Thank you!
Custom Post Type
Feel free to post questions below and I'll do my best to answer them! 💥
Hey Hugo, thanks for the tutorial. That´s what i needed. Anyway it doesn´t work for me. It doesn´t show custom fields in the front end, when i use the popup. With single post it works fine... Do you know where should be a problem, please?
@@cooleb4500 Yea I'm having the same problem here. Haven't figured out a solution yet
hii,
after click button, Dynamic data not showing in popup.
Hi, can you provide a bit more context so i know where exactly you are on the tutorial? Make sure you're using the Crocoblock popup, not the Elementor one.
Can this be done free of cost
You can do it without paying anything using code. You can use ACF Free version depending on the field types you plan to use. But you are still required to use Elementor Pro to build the dynamic grid and if you want to do custom code JavaScript implementations to pull the card into a popup.
How to get a single post open as a popup?
You can just create a simple singular popup for that without the need for the listing grid.
@@hugomakeshi, can you elaborate? How do you connect the button on the loop card to pull the dynamic content in the popup though?
'promo sm' 😄
thank you
You're welcome