In this tutorial, I will show you how to use the Elementor Loop Grid or Loop Carousel and a custom loop, to create a design where each item in the grid has its own popup and popup content.
We will not be creating a different popup for each item, of course. Instead, we will be using the loop template itself and create our popup template in there, along with our card template.
See the Loop Grid popup demo here:
See the Loop Carousel popup demo here:
Features:
- Fully custom loop and popup template
- Works really well with CPTs
- Lightweight and performant setup
- Compatible with the "load more" functionality
- Compatible with the Elementor Loop Grid
- New: Compatible with the Elementor Loop Carousel
- New: Compatible with the Elementor Taxonomy Filter
- SEO Friendly
- Open popup on page load with a dynamic URL*
- Customize the code to change the arrows and lightbox styling to your liking**
Please note that we are using Containers here so you will need to have them enabled.
A limitation of this technique is that JavaScript-dependent elements won't work inside the popup content (Gallery Pro and Carousels won't work).
*Visit this URL for an example : https://templates.element.how/elementor-loop-grid-give-each-item-a-popup-template/#suzy-chen
**For optimal results, you will need to be familiar with CSS and HTML. Give my CSS Course for Elementor Users a go to get you started, if you didn't already.
Let's get started!
First, let's import the templates
This is a premium tutorial. Purchase access to unlock the full tutorial.
88 Responses
Great Job!
Is it possible to have the arrows at the top of the popup to have something like that:
(left arrow | actual post/all posts | right arrow)? For example in an seperate html so I can aligne it perfectly
Best regards
Hey Robert!
Yes this should be possible. Although from your description i'm not 100% certain what you are looking for here exactly... but to change the position of the arrows, you can simply modify the CSS for them.
This part:
.popupSection_arrowNav {
position: fixed;
top: 50%;
transform: translateY(-50%);
left: 4%;
cursor: pointer;
z-index: 99999;
display: none;
animation: fadeElemIn 0.6s forwards ease 0.3s;
opacity: 0;
}
.popupSection_arrowNav.popupSection_rightArrow {
left: initial;
right: 4%;
}
So, you could change top: 50%; to top: 10%; , for example. that would place them near the top. Adjust left and right properties to position them away from the sides.
Good luck and let me know how it goes!
Thank you for your quick response. Maybe my question was a bit confusing. What I mean is something like you can see on this page: https://eightseven.ch/ . If you scroll down to the "Wohnungen" section you will find a list. Clicking on any of the items in this list will open a popup. There, the "Previous" and "Next" buttons are perfectly positioned in the popup.
So is it possible to use the button widget or an additional widget to trigger the next or previous item?
With additional widgets I can adjust the positioning perfectly to all other elements in the popup and also the responsive design becomes easier.
Thanks in advance
Hey Robert! I updated the code in the tutorial (and in the copy paste template) to add compatibility with this.
Simply give any element within your Loop Template the class name
popupSection_leftArrow or
popupSection_rightArrow
and clicking that element will now navigate through the popups.
Cheers!
OMG this is exactly what I was looking for. Thank you so much for your support!
OK this is the last question. Is it also possible to add a customized close button?
Thanks!
Yes certainly, this is possible. Simply give your element(s) you want to act as closers the class name popupSection_closePopupA11y
Cheers!
I already tried that. Adding a class doesn't work and adding it as attribute works only at the boundaries of the widgets, which means if you click on the text/icon of the button nothing happens.
thanks
Hey Robert!
Change this line:
if (event.target !== e) return;
To this:
if (event.target !== e && !event.target.closest('.popupSection_closePopupA11y')) return;
Adding it as a class should be fine too, no need to use attributes.
If you prefer you can just import the code from the tutorial again, I updated it.
Cheers!
It works great except in the mobile version that the popup is displayed in two columns with vertical and horizontal scrolling out of the screen, instead of only one column with vertical scrolling.
If I manually set the minimum height to the maximum possible value in the container, it adapts to a column but the scrolling doesn't work. Any ideas that might help?
Thank you.
Greetings!
Please share your URL with me (here or by email) I will have a look. Without a link I really can't say what might be going on here.
Sure,
Here's the link to the test page:
https://lboxacademy.es/test-canal-tv/
It happens from 771px wide, that is, the mobile version.
Thanks
Hello again,
My answer to myself, after cleaning some code added by me and configuring the "popupSection" container without wrapping, now the popup scrolls well, without problems.
Thanks for the interest
I'm having a bit of trouble with the content in my pop-up.
Because the content exceeds the height of the page, I need to enable scrolling within the popup. However, even tho I've set the overflow option to auto within my popup containers... only the main page (behind the popup) scrolls.
Here is a live link: https://studiohavn.flywheelsites.com/about/
Hey Harry, this is because of your smooth scroll solution.
Follow their instructions here (direct link to relevant section) https://github.com/studio-freight/lenis#use-the-data-lenis-prevent-attribute-on-nested-scroll-elements-in-addition-we-advise-you-to-add-overscroll-behavior-contain-on-this-element
So add that data attribute (on your scroll container > Advanced > Attributes), and also add the CSS they recommend.
Cheers!
Thanks Maxime. That works like a dream! Thanks for sourcing the documentation.
Awesome Harry, glad it's resolved!
Hi Maxime,
Just purchased this tutorial and it works brilliantly. I was wondering if the same could be implemented on a loop carousel?
Cheers!
Hey Ernest,
Yes, it could be, however the navigation from within the popup might not be possible in this case. SwiperJS (if you enable carousel looping) will duplicate the slides, and that would cause important challenges for the popup navigation (the left and right arrows when the popup is opened).
If :
1. You don't plan to enable the carousel looping or
2. You don't need the popup navigation
Then it would be possible.
Matter of fact, for a non looping carousel, it should pretty much already work with what I provide here.
For a looping carousel however, significant changes in the code would be required.
Hope this helps!
Cheers!
I don't need navigation from popup to popup, so I've opted to remove it. Unfortunately it's still not working. The popup opens within the Carousel's container and underneath the next/previous slides.
I've also tried a work around using a regular nested carousel and placing a loop grid in each slide and offsetting the content +1 for each loop grid. But the same issue persists.
But thank you for the suggestion!
Sorry about this, I forgot that the CSS transform applied to the carousel container element would break the position:fixed CSS here.
So with the current code, it's just not possible.
However there is a way to do this with different code.
Because this tutorial is about the Loop Grid I won't add that here, however I will probably be creating a new tutorial for the Loop Carousel specifically.
If you didn't need / don't use the Loop Grid version, and just want the Loop Carousel version, please reach out to me when I release it (I will send an email to the list), and let me know, I will swap it in your account.
Hi Maxime,
That would be awesome indeed. I would definitely need to use it in the Carousel version, so I will reach out for sure. I'll keep my eyes on updates. 😉
Thanks!
Greetings!
I just updated the tutorial with support for the Loop Carousel!
Cheers!
Wow, so quick! It's almost perfect. For some reason it isn't loading my featured image inside of the PopUp (it's set as a background image of one of the containers. It is loading on the Card just fine though.
Hi Maxime,
I'm having some issues with my product loop, this seems to only work for the first product, then it defaults to another loop I had created but have since deleted.
https://escapesim.com.au/product-category/asia/
Any ideas on what's going on here? It works fine when I don't have the popup container underneath the card.
Thanks
Greetings EscapSIM,
I had a good look at your setup, and indeed I see what you are telling me. However I can't find the cause for this.
`this seems to only work for the first product, then it defaults to another loop I had created but have since deleted.`
This really sounds like some Elementor bug... how can it use the loop you had created and have now deleted?
Did you try on an entirely new page, starting from scratch, maybe using a direct query instead of an archive query?
`It works fine when I don't have the popup container underneath the card.`
So if you keep everything as is but delete that container, then everything works, and all the loop items use your new template?
Thanks for the quick reply! well after some testing I found out the cause is actually because I'm using another loop for Related Products inside my loop, which Elementor says they do not support. https://github.com/elementor/elementor/issues/20863
Makes sense as to why it was OK with the popup template and why it doesn't work with this method.. Any suggestions on what I can do here? There's a page built with Elementor that I want to emulate and I can't seem to find any plugins doing this in their code. https://www.esim.com.au/esim-japan/
Greetings EscapeSIM,
I see what you are looking for. On that example website you shared, it's all static data. Nothing is dynamic there...
Here you could do the same, but it would require custom code I think to get the loop within the loop working as it should. The inner loop would need to be coded directly in PHP as a shortcode. It would return HTML that would need to be coded with CSS directly.
I could help with this if you want, as custom work however as it's well beyond the intended scope of the tutorial. Reach out to me if interested
Cheers!
Hey Maxime,
I'm having a little trouble with a small bug on this one. I have this code set up on the following page (scroll down and click one of the 'Plots') https://greenplan.flywheelstaging.com/developments/holly-farm/
It looks as though the popup is opening way down the page where the form is situated. When I delete the form, it rectifies the issue. So there seems to be some kind of compatibility bug with Elementor forms? Any ideas on how to resolve this one?
Hey Harry!
Yes I can see the problem clearly. It actually comes from code I have in there to improve accessibility for keyboard users. It automatically adds :focus to the first element that's :focusable, in your case here it's the first field of the form.
There are two ways to solve this:
1. Have an element near the top of the popup that can have :focus. It could simply mean adding
under Advanced > Attributes to the Heading element that's there already.
2. Less recommended: delete the line
from the code.
Hope this helps!
Cheers!
First option works great. Thanks again Maxime!
Hi Maxime,
I'm currently running a page where I have multiple Loop Grid's implemented that feature this PopUp solution (a team page).
The issue I'm having is that the popup sits underneath an element that comes after it (either next to it or below), be it another container or even a next Loop Grid. I've tried adjusting the Z-Index in your code as well as in each container PopUp itself as well as Loop Grid (container) and the surrounding containers. But I can't seem to find a fix for this.
Do you have any idea how to combat this?
Please share your URL for this page with me, I will have a look!
For readers: updating the code to the latest version (V1.6 +) fixed this issue.
Hello,
I have just paid for this solution and this sounds really silly but the first step of adding the loop template to templates is stumping me. I already have a loop carousel set up. Could I use this guide to add popups to existing loops?
Many thanks, Alice
Greetings Alice!
"Could I use this guide to add popups to existing loops?"
Because of the technicalities involved, it's more simple to do it the other way and import the template, then change them to fit your needs.
That way is just much easier.
Otherwise there would be so many steps and little details that the likelihood of not having everything in place exactly as it should be becomes greater.
You should be able to end up with the same result.
Let me know if you get stuck anywhere I will be glad to help!
Cheers!
Thank you! I have worked it all out following your instructions - thank you so much. The only thing that seems to be not working is you can see the bottom of the A11y button on preview mode (desktop).
I have added the custom CSS:
selector {
transform:translateY(-200px);
}
selector:focus-within{
transform: translateY(0);
}
Should I use the visibility function?
Awesome, glad to read that you managed well!
Try changing:
to
or so until you don't see it maybe. Ideally avoid using the visibility function, that would make the button inaccessible (and essentially completely useless then)
Cheers!
Thank you again. Please may I ask another question, it doesn't seem to be working when I use the taxonomy filter. Is this something it works with normally?
Yes it's supposed to be compatible.
Although Elementor are making changes frequently to that new element so it's possible a recent update is causing problems.
Could you share your URL with me if possible? I will have a look
Hi Maxime,
I have emailed you the link as I am building the site locally.
Thanks,
Alice
I fixed this, indeed it was caused by a recent Elementor update.
Please copy paste the code again in your HTML element, the one here in the tutorial is now updated.
Cheers!
Just saw this reply, thank you!
Hey Maxime, me again! 🙂
I have another slight issue that you may be able to shed some light on, will pagination work with your code? I can display the products with load on scroll but the pop-up button doesn't respond when I click on it.
Thx
Also, I have another question, would there be any way that I could have yet another pop-up for each loop item? I'd like to get my countries listed shortcode to display as a popup for each product as well as the existing 'buy now' popup.
Sorry for the spam 🙂
Greetings EscapeSIM!
Pagination should work. It broke recently due to an Elementor update, but yesterday I updated the code to work again with 3.17.
Please get the code again from the tutorial, and copy paste it in your HTML element, and let me know if pagination works.
"would there be any way that I could have yet another pop-up for each loop item?"
This is possible, however out of scope for this tutorial... A significant amount of code along with the proper logic and structure would need to be added and it's just beyond what the tutorial is aiming for... hope you understand.
Hi Maxime,
I still can't get the pop-ups to work with infinite scroll pagination, all good though because it does work with the new AJAX Prev/Next method, I'll just use that instead.
All good I understand! Cheers
So, I've worked it out 🙂 just checking it's cool that I modified your code?
Also, I have a quick question, I have been trying to figure out a way to get the close button inside of the popup or at least just outside of it but I can't figure it out.. guessing it can't be done due to how the div's are created in JS?
Greetings EscapeSIM!
Yes certainly you are welcome to modify the code as you see fit!
You can add any buttons within the popup in the loop template, and give it the class name
Then clicking this button will close the popup.
Hope this helps!
Hi Maxime,
When I paste the first template inside my newly created loop, nothing happens. I have updated my Elementor to v18.0.
There is a console error: Error: Element type not found: 'theme-post-featured-image'
All my expirements are activated.
What can I do?
Hi Maxime!
It's been a while since I implemented this feature and it still works great. Now I just got a request if it may be possible to define a specific query for the popups? I'm using the feature inside of two tabs, which load different queries. Right now with the navigation arrows I can click through all of them, but it would be nice to be able to limit it for a specific query, which represent only the selected tab. You understand what I mean? I can imagine being able to set that up inside of the script and then using a different html for each tab section. Is that possible?
Thanks,
Lukas
Hey Lukas!
I would suggest the pseudo tabs method. I just published a tutorial about it!
https://element.how/elementor-pseudo-tabs-for-performance-and-bug-prevention/
Cheers!
Hi Maxime,
Thanks for your suggestion. I had a look at it, but I don't think this makes sense in my case. I really don't have much content within the tabs so there are also no performance issues as far as I can see. This solution would make the content way too important. I simply use a logo grid with the popup functionality and am only looking for a way to seperate the loop grid so that navigating through the items doesn't include both tabs.
Hey Lukas!
Try this: make two different setup, as if you had two loop grids with popups at two different places on the page.
In your case, you will need the class popupSectionWrapper to be on the container that's within each tab. And remove it from the parent container where it currently is.
This will make them independent from each other.
You also need to setup the HTML element within the container in each tab content. See the "More than one such design on a single page" part of the tutorial.
Let me know how it goes!
Cheers!
Great tutorial, worked as expected. Just have one small issue, when you open the popup there are two "close popup" buttons appearing. Small rounded square one with x, and the Elementor button for the hidden accessibility button.
How can I resolve that?
Just noticed another issue with the very first popup in the loop grid, for some reason it loads the content at the bottom of the scroll (larger bio in the first popup) first. All of the others seem to load fine.
Hey John!
I will be glad to help with that, could you please share your URL with me where you are testing this?
Thanks!
Hi Maxime!
Appreciate the help, it's under the "Meet the Lawyers" section, learn more is the popup trigger: https://wites-rogers.websitepro-staging.com/
Kind regards,
John
Hey John!
Okay so both problems that you see (being scrolled down, and the A11Y close popup button showing) come from the same source: the automatic :focus within the popup.
I have this there for accessibility reasons. The popup opens, and with JS I shift the :focus within it, to the first :focusable element.
In your first popup, it's further down, so it automatically scrolls to it (that's just what :focusing does).
In your other popups, there is no :focusable elements at all, so it goes to the A11Y close popup button and gives it :focus. It's actually the prefered behavior too, accessibility speaking...
I suggest this fix: make the email addresses at the start of each popup :focusable, by adding a link like mailto:email@address.com
That will fix everything in one go.
Cheers!
Hi Maxime,
Talk about skills to pay the bills, that worked perfectly!
Thanks again!
John
Welcome John!
Hi Maxime,
I was curious, do you provide custom services? I have another unique element on the same site that could use your expertise. Or maybe there's another lesson of yours that already covers it.
In the section "Why Choose Us" there's a tabbed flip box that pulls in the same lawyers but rotates the image tabs based on the active element: https://wites-rogers.websitepro-staging.com/lighthouse-point-personal-injury-attorneys/
Kind regards,
John
I just added the manual method to my loop grid filter, and I was able to get the Lightbox popup to work. But it ceases to fire up any popups after clicking through the pages in the pagination with AJAX turned on.
The issue I'm seeing in safari is...
"undefined is not an object (evaluating 'popups[i].style')".
source: function showPopup(i) { popups[i].style.display = 'flex';
Also noting that I did keep Flexbox turned on for the containers. I'm also using Elementor pro v3.19.3 with WP 6.4.3
I was able to see this working on the development environment with AJAX pagination on, but as soon as I deployed it to our live host, then the bug appeared after pagination was turned on.
Greetings,
Would you have a URL I can have a look at?
Hello! I purchased this tutorial but when I downloaded the files from the links above and tried to import them into Elementor they didn't work. When I opened the json files to inspect them it simply says "You have not purchased the required item(s)." Where do I get the actual files from?
Hey Corey!
Really sorry about this I had a small bug in my permission check. All resolved now, please use the buttons in the tutorial to download the templates!
Cheers!
Hi Maxime,
i have an issue with the component
when i click on 1 item, i see the popup but after i have a redirection to the article
do you have an idea to fix it
thank you
https://www.eurosatory.com/planning-demonstrations-dynamiques/
c'est bon j ai trouvé 🙂
D'accord!
Tu me dis si tu as besoin d'aide!
Cheers!
Hello!
Multiple times I have implemented your template/code and followed all instructions dutifully but I can't get the actual popsups to work. They display on the landing page underneath the main card content no matter what I do. (It also displays the svg arrow images. They're huge. I have a screenshot.)
I can't share a link for you to view due to our website's high security measures. Best I can do is send screenshots. Off the top of your head, do you have any idea what might be causing this?
Hey Jessica!
It sounds like the CSS is broken. Can you send me the link in private? Just for the front end, I don't need access... without it it's very difficult to troubleshoot...
Hi, I need multiple instances of this on one page, however, I can only get one to open a pop-up. I have moved the css into the site style sheet and the javascript to the page but only the first instance opens the popup the second instance doesn't. Do you have any ideas why this would be?
Hey Louise!
It's made to work with multiple instances. However, it's possible that there is a class name missing somewhere that's breaking this, or something like this.
Could you share your URL I could inspect?
hi, can I email you as it's a clients site and is under a login to access it that I dont want to make that public.
Yes please email me, you can just answer this email directly.
Hi Maxime,
First, I want to thank you for your amazing job.
Is it possible to combine this tutorial with the "Elementor Loop Grid with Videos Playing On Hover and Scroll" ?
If so, I will dig into it!
Thanks again,
Gaëlle
Greetings Gaëlle!
Yes it is. You would just need all the proper class names in place, even if that means the same element will be given two different class names.
Try it, if you get stuck just let me know and I will help you.
Cheers!
Thanks for your super quick answer, I will give it a try later today and I will let you know. 🤞🏻
Hi Maxime,
I haven't been able to combine the 2 tutorials but I came up with anther idea.
Everything works fine on desktop and tablet but, unfortunately, I have an issue with the popup on mobile view.
The popup is mostly empty as you can see it there, but I can't figure it out :
https://studiocedille.fr/test-2/
Any idea?
Thanks a lot!
Greetings!
In your loop template, go on the container > flex wrap and set to nowrap . Do this for your mobile viewport.
You might have to do this for more than one container.
Cheers!
Merci Maxime,
Everything works!
Thanks again for your help 🙌🏻
I'm looking to have two buttons in each loop item in a loop grid. Each button would open a different popup. Example buttons: Soundcloud and Spotify. Where each button pulls up their embedded song in soundcloud or spotify format. Do you have code to help me with two buttons and two different popups?
Greetings!
I had a good look to do this, and it adds very significant complexity to the code and stucture... sorry it is out of scope for this tutorial.
I would suggest having a single button and popup, and two columns in your popup for both options. I know it's not what you would like here, however hopefully it can be good enough!
Cheers!
Thanks for the quick reply. Unfortunately having both in the same popup doesn't work. I'll keep looking for alternative solutions.
Hi Maxime,
Just a question about the post metadata blocks in the loop template. What is the function of the _cwpai_position_value_key custom metadata? I couldn't find it in the code, so i'm just wondering 🙂
Kind regards,
Eddie
Hey Eddie!
You can safely ignore this. I had created my CPT with cwpai, as well as custom meta data for the CPT. So essentially I link to these meta data dynamically, but that's only relevant for my particular setup.
You need to update all these dynamic settings with your own, or remove them.
Cheers!