Elementor Gallery Pro Filtered From Url On Page Load

In this tutorial, you will learn how to have the Elementor Gallery Pro element filtered to a specific gallery, on page load.

Simply by appending ?data-gallery-index=1 to your URL, you will be opening a specific gallery filter on page load.

Visit these pages to see it in action:

https://element.how/gallery-pro-filtered-from-url-template/?data-gallery-index=0

https://element.how/gallery-pro-filtered-from-url-template/?data-gallery-index=1

Elementor Gallery Pro Filter on Page Load Code

The first thing you will need is a HTML element, on the same page as your Gallery Pro element.

Add this code in the HTML element:

<script> 
/* Please login to get the code 
 * The code will be for the Elementor Gallery Pro Filtered From Url On Page Load tutorial 
 * Found at this URL https://element.how/elementor-gallery-pro-filtered-from-url-on-page-load/ 
 */ 
</script>

Getting the URL for each Elementor Gallery Pro Filter

The way it works is that we are reusing the attribute on the Elementor Gallery Pro filter titles, which have this logic:

If an "all" option is present, it has the value of "all".

For all the others, it follows the index value, starting at 0.

In other words, the first filter that is not the "all" has the data-gallery-index=0. The one after this, data-gallery-index=1, and so on.

You just need to add ?data-gallery-index=0 to your URL to open that gallery filter on page load.

Finally, enjoy your Gallery Pro Filters pre-filtered on page load

I really hope you found this tutorial useful.

Cheers!