In this tutorial, I will show you how to replicate and customize this Elementor Loop Grid design.
It works really well for Team Members kind of design, but could be used for any other content too.
See the demo here (scroll down to see both versions):
Features:
- Responsive: Two choices for mobile: revert to the flat version, or have the info show on click
- Unique: Have a different accent color for each post
- Customizable: Adjust as you wish to make it your own, through the Elementor UI, and through adjusting the custom CSS included
- Easy to replicate: The template files are provided
- Two versions: Flip box style hover animation, or flat design
Let's get started!
First, let's prepare the ACF field for the unique accent color for each Loop Item
ACF is optional, you can also use JetEngine, Pods or another such option if you prefer. The instructions here will be for ACF, but you would do the equivalent in that other plugin.
This is a premium tutorial. Purchase access to unlock the full tutorial.
3 Responses
Hi Maxime,
Great design and tutorial. Everything seems to work, except for masonry. When toggling on or off, nothing happens. Any idea what would be the problem?
Many thanks in advance!
Greetings Jannick,
If nothing happens when toggling masonry on or off, maybe you have images that are all the same size / aspect ratio already?
I thought masonry would force other sizes. Clearly, I don't use masonry very often 😅 Thanks for your quick and swift help!