For this next tutorial we are going to tackle an issue that literally drove me crazy when I first started using Elementor. I had a client that wanted a responsive image gallery that would look great on all devices.

Sadly Elementor’s Image Gallery widget fell short of my expectations.

But I found a work around that required a little work but satisfied the client so if you are up for it I will walk you through.

My Staging Environment

Theme: Hello

Elementor Version: Pro

Additional Plugins: Custom CSS & JS

Let’s Begin

Here is a preview of what we are going to achieve .

Before we get too far ahead upload all your images and copy and paste the links to your notepad we will need them later at the code portion of this tutorial.

I am a huge fan of jQuery plugins as it saves me money and I don’t have to purchase Elementor extensions for stuff I can build my self. With that being said one of my favorites is called Isotope by Metafizzy. I tend to use a lot of his plugins in my projects and it is well worth the cost for a developer license just to show my support.

The Markup

The markup for this is pretty simple and doesn’t require a whole lot.

<div class="grid">

<a href="link url" class="grid-item">
<img src="image url" />
</a>


<a href="link url" class="grid-item">
<img src="image url" />
</a>


<a href="link url" class="grid-item">
<img src="image url" />
</a>


<a href="link url" class="grid-item">
<img src="image url" />
</a>

</div>

You can add as many images as you like just remember that the url for your image goes in both the link url and image url and they need to be the same for each image block.

The Isotope CDN

After you have added you images navigate to Custom CSS & JS > Add Custom HTML so that we can add the Isotope CDN. Give it a name and copy and paste the CDN destination below.

<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>

Select footer as the location and update.

The Isotope Script

Now we need to add the script that will initialize the plugin.

Select Add Custom JS give it name and copy and paste this script.

jQuery(document).ready(function($){

     

     $('.grid').isotope({
        itemSelector: '.grid-item',
        layoutMode: 'masonry'
     });

    

     $('.grid').imagesLoaded().progress( function() {
        $('.grid').isotope('layout');
    });

});

If you view your site in the front end all you will see is that your images are stack in a single column in order to fix that we need to apply some CSS that will control the width of the columns on desktop and mobile.

Apply the CSS below to your customizer.

.grid-item { 
	width: 33.333%;
	padding: 10px;
}

@media (max-width:600px){
	.grid-item { 
	width: 100%;
	padding: 5px;
}
}
 

If you have done everything correctly you should have a responsive gallery that will adjust to the size of screen.

Additionally the Lightbox incorporated in Elementor will allow your images to be viewed in a Lightbox if you have the url for the image in the link url portion of the markup. The down side is that there are no arrows to navigate the images once the light box is open so you have to click away.

The Conflicts

Safari does not like this plugin and sometimes the images will stack on first load and the page will need to be refreshed. Other than that I haven’t found any other conflicts.

I Hope you found this useful. 😀