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:
- 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!