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.
*Visit this URL for an example : https://templates.element.how/elementor-loop-grid-popups-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.
50 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!