How to Create Dynamic Popups in Elementor - Step by Step

Подписаться 512

Просмотров 10 тыс.

50% 1

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.

Хобби

Опубликовано:

14 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 63

@bensmith4376 Год назад

This is the best tutorial out there for making these. Extremely helpful. Thank you!

@hugomakes Год назад

Thanks Ben really appreciate it. I'll have more advanced tutorials for Elementor in the future, so hope you stick around.

@main.amenaakter 5 месяцев назад

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

@hugomakes 5 месяцев назад

Hi, thanks. Yeah it took me some time to figure out how to get it done. Glad it helped!

@GundamGeeksHub 3 месяца назад

THANK YOU ! LIFE SAVIOUR! I WAS STRESSING OUT BECAUSE OF THE ISSUE. Glad to find your video!

@hugomakes 3 месяца назад

Yeah that's exactly why I made the video! Glad it helped you! :) Cool channel by the way.

@gersonmarques7447 11 месяцев назад

The best! awesome tutorial for a great feature! thanks

@hugomakes 10 месяцев назад

Thanks for the kind comments. Glad it helped.

@Russertron 2 месяца назад

Perfect tutorial thankyou! I now have dynamic popups loading from a Dynamic table.

@hugomakes 2 месяца назад

Thanks for the comment! Glad it helps

@daveswitzerland4442 4 месяца назад

That was really good, thank you!!

@hugomakes 4 месяца назад

Absolutely! Glad to be of help.

@muneeburrahman8359 Год назад

Very helpful sir, keep going and Make a complete tutorial on crocoblock plugins

@hugomakes Год назад

Thanks -- my plain is exactly that! :)

@andreasotodelgado933 3 месяца назад

thank you

@hugomakes 3 месяца назад

You're welcome

@Famous-Nondelerious 8 дней назад

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??

@yasararafatha8365 4 месяца назад

Thank You

@hugomakes 3 месяца назад

You're welcome

@Will-nf9os Месяц назад

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?

@travisbburch 10 месяцев назад

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

@adamcook446 5 месяцев назад

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!

@lvh598 Месяц назад

@@adamcook446 Have you found a solution for this?

@main.amenaakter 5 месяцев назад

jajakallah🙂🙂

@gabayroi 4 месяца назад

tnx

@hugomakes 3 месяца назад

of course! thank for watching :)

@thegentlemanpilot6941 10 месяцев назад

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?

@hugomakes 10 месяцев назад

Hi! Yeah there are actually various sorting options. If you go to this timestap ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-gEc0ygHq9qw.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!

@thegentlemanpilot6941 10 месяцев назад

Thank you so much@@hugomakes I'll try it now!

@thegentlemanpilot6941 10 месяцев назад

It works perfectly, now I'm struggling with the mobile version.

@hugomakes 10 месяцев назад

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!

@yoonssam_kr 7 месяцев назад

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

@hugomakes 7 месяцев назад

Yes you are able to use short codes in Elementor popups.

@magino_mmt 4 месяца назад

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!

@hugomakes 4 месяца назад

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.

@pusuluri27 18 дней назад

how to work this with elementor popup builder?

@rodolfonakakubo 8 месяцев назад

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!

@hugomakes 8 месяцев назад

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?

@rodolfonakakubo 8 месяцев назад

@@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.

@hugomakes 8 месяцев назад

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.

@somelethalart 7 месяцев назад

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!

@hugomakes 7 месяцев назад

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.

@qinpra 4 месяца назад

Hi, thanks for the explanation, but does that "team" post was a custom content type? Or a custom post type? Thanks in advance.

@qinpra 4 месяца назад

Nevermind. I missed it when you mentioned it on the video. It's a CPT. Thank you!

@hugomakes 4 месяца назад

Custom Post Type

@marionpaolo319 Год назад

Can it be done now with Elementor's built-in Loop Builder and Popup builder? Or without using Jet Popups?

@hugomakes Год назад

Not at this time unfortunately!

@franktielemans6624 10 месяцев назад

yes ElementHow has a tutorial about that.

@konstantinoslalaounis2127 9 месяцев назад

@@franktielemans6624 can you send a link? i cant find it..

@oe-pm6bz 5 месяцев назад

@@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

@siamurmahin6495 Год назад

hii, after click button, Dynamic data not showing in popup.

@hugomakes Год назад

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.

@hugomakes Год назад

Feel free to post questions below and I'll do my best to answer them! 💥

@cooleb4500 Год назад

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?

@adamcook446 5 месяцев назад

@@cooleb4500 Yea I'm having the same problem here. Haven't figured out a solution yet

@bhavyamarwah5478 4 месяца назад

Can this be done free of cost

@hugomakes 3 месяца назад

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.