Elementor Loop Grid & Carousel Add Popups For Each Item

Elementor Loop Grid & Carousel Add Popups For Each Item

Element.How also offers premium tutorials! Check them here:

Table of Contents

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.

Access tutorial

$59/one time Purchase access

Includes

  • Gain Access to This TutorialUnlock complete access to the current tutorial:
  • Future UpdatesYou will get access to all future updates to this tutorial.
  • Enjoy Unlimited UsageUse on as many of your own sites or your clients sites as you wish.

    Note that reselling or redistributing is not permitted.

Access everything

$299/one time Purchase All Access

Includes

  • Unlock every premium tutorial on Element.howGet access to the entire library of premium tutorials on Element.how
    Preview premium tutorials
  • Get access to the CSS course for Elementor usersAccess the complete 14 HTML chapters, 30 CSS chapters and 7 Elementor Projects.Learn more
  • Simple CSS Grid For ElementorAn Elementor Addon to Create Awesome Grid Layouts in a Single Click for Containers, Galleries and Loop Grid. Learn more
  • free extra: ShapeDividers.com Premium AccessLifetime Premium Access to ShapeDividers.comVisit ShapeDividers.com
  • 30 day money backNo questions asked money back. Not what you expected? Get a refund.
  • One-time payment of only $299No hidden fees or subscriptions.

    Sales taxes added where applicable.
  • Great supportGet help when you need it. Support includes getting things working as intended.

    Support excludes customization work.
  • Lifetime access to everything Element.howThe price reflects what is currently available on Element.how. All future updates are included, but none are promised. You pay for what is available now, and the rest is a sweet extra.

    I will say that it is definitely my intention to keep adding tutorials to Element.how.
* All prices are USD. Applicable taxes will be charged at checkout. Have a question? See the FAQ or email me.

Element.how also provides premium tutorials showing awesome advanced designs, check them out here.

Looking for something else? Search across 2737 Elements right here:

Checkout the Elementor Addon Finder directly

73 Responses

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

    1. 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!

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

    1. 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!

      1. Yes certainly, this is possible. Simply give your element(s) you want to act as closers the class name popupSection_closePopupA11y

        Cheers!

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

    1. 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!

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

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

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

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

      1. Thanks Maxime. That works like a dream! Thanks for sourcing the documentation.

  7. Hi Maxime,

    Just purchased this tutorial and it works brilliantly. I was wondering if the same could be implemented on a loop carousel?

    Cheers!

    1. 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!

  8. 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!

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

      1. 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!

      2. Greetings!

        I just updated the tutorial with support for the Loop Carousel!

        Cheers!

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

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

      1. 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/

      2. 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!

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

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

      tabindex|0

      under Advanced > Attributes to the Heading element that's there already.

      2. Less recommended: delete the line

      focusFirstFocusableElement(popups[i]);

      from the code.

      Hope this helps!

      Cheers!

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

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

    1. 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!

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

      2. Awesome, glad to read that you managed well!

        Try changing:

        transform:translateY(-200px);

        to

        transform:translateY(-300px);

        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!

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

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

      1. Hi Maxime,

        I have emailed you the link as I am building the site locally.

        Thanks,
        Alice

    2. 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!

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

    1. 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 πŸ™‚

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

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

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

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

      popupSection_closePopup
      

      Then clicking this button will close the popup.

      Hope this helps!

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

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

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

      2. 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!

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

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

    1. 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!

      1. Hi Maxime,

        Talk about skills to pay the bills, that worked perfectly!

        Thanks again!
        John

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

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

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

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

    1. 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!

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

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

Leave a Reply