Introduction
This tutorial shows you how to add your own links to individual images in an Elementor Pro gallery. You won’t need any extra plugins! This method works with both the Basic and Pro Gallery widgets. This simple guide will help you quickly add custom URLs to your Elementor galleries!
By default, Elementor only allows you do two things with gallery images:
- Open each image in a lightbox, or
- Link all gallery images to the same custom URL.
This tutorial teaches you how to link each image to a different URL.
See working examples of both Elementor gallery types.
Instructions
Add your gallery widget
Add a gallery widget (Basic or Pro) to your page and upload the desired images. You can add a custom aspect ratio to your gallery images for a consistent look.
Set a class name to your gallery widget
- Open the gallery widget settings and navigate to Advanced > Layout > CSS Classes.
- Add a unique class name (like “
dd-gallery--links“).
Set Link to Custom URL
- In the gallery widget settings, go to Content > Link.
- Set this to “Custom URL” for the Pro gallery widget or “Media File” for the Basic gallery widget.
Add an HTML element
Include an HTML widget on your page or use a code snippets plugin. Paste the following code into the HTML element, replacing the placeholder links with your own:
<script>
let ddGalleryLinks = (className, imgLinks) => {
// Create a combined selector
const selector1 = className + " a.e-gallery-item";
const selector2 = className + " .gallery-item a";
// Use querySelectorAll with the combined selector
const galleryImages = document.querySelectorAll(`${selector1}, ${selector2}`);
// Code to add links to gallery images (unchanged)
for (let i = 0; i < imgLinks.length; i++) {
if (imgLinks[i] !== "") {
galleryImages[i].href = imgLinks[i];
// Open link in new window (uncomment if needed)
/* galleryImages[i].target = "_blank"; */
}
}
};
document.addEventListener("DOMContentLoaded", function () {
ddGalleryLinks(
".dd-gallery--links",
[
"https://daveden.co.uk/tutorials/apply-custom-aspect-ratio-to-the-elementor-gallery-widget/",
"https://daveden.co.uk/tutorials/add-a-tooltip-to-elementor-pricing-widget-for-free/",
"https://daveden.co.uk/tutorials/elementor-horizontal-accordion-without-any-add-ons/",
"https://websquadron.co.uk",
]);
});
</script>Bonus: Multiple Gallery Widgets
If you have multiple galleries, follow these steps:
- Assign a unique class name to each additional gallery (e.g.
dd-gallery2--links). - Repeat the
ddGalleryLinks()function, passing in the new class names and their corresponding link arrays.
Example Code
<script>
let ddGalleryLinks = (className, imgLinks) => {
// Create a combined selector
const selector1 = className + " a.e-gallery-item";
const selector2 = className + " .gallery-item a";
// Use querySelectorAll with the combined selector
const galleryImages = document.querySelectorAll(`${selector1}, ${selector2}`);
// Code to add links to gallery images (unchanged)
for (let i = 0; i < imgLinks.length; i++) {
if (imgLinks[i] !== "") {
galleryImages[i].href = imgLinks[i];
// Open link in new window (uncomment if needed)
/* galleryImages[i].target = "_blank"; */
}
}
};
document.addEventListener("DOMContentLoaded", function () {
// First Gallery Widget
ddGalleryLinks(
".dd-gallery--links",
[
"https://daveden.co.uk/tutorials/apply-custom-aspect-ratio-to-the-elementor-gallery-widget/",
"https://youtu.be/j0yZ5oYh4Ss?si=wpwYoI0_QBEQu3tY",
"https://youtu.be/gIaCz3OdZkI?si=Ujhvf884MthNtEEx",
"https://websquadron.co.uk",
]
);
// Second Gallery Widget
ddGalleryLinks(
".dd-gallery2--links",
[
"https://youtu.be/6mwBj6Zpyyk?si=_mcz0dGx6kYMZ7cX",
"https://youtu.be/3pfPYhgmAZU?si=KQOXSj-HX19n0ZfM",
"https://youtu.be/J1k05Fa6Ag0?si=sVTUtgpINB-tcuSS",
"https://daveden.co.uk",
]
);
});
</script>
19 comments
Sharon Reaves
Hi David,
Thank you so much for this solution. It works beautifully on the site. The only problem is that Google can’t see the links which is negatively impacting our SEO. Any thoughts on how we can resolve this?
Thanks!
Sharon
David Denedo
Oh, I see. That’s because the links are added using JS, and Google doesn’t really read JS. It shouldn’t affect SEO too much, but we may need to look into using a different gallery solution.
chiara
Hi David, thanks for the tut… but is it possible to style in different ways the names of the galleries? like pagination when there are more than 10 galleries?
Jason Heid
Thanks so much for this code. It worked great for me. One hiccup, though: It seems to be causing the text of the overlay titles that appeal when you hover over the image to run way too big and not fit within the images anymore. Check it out on the front page of my site.
I know it must have something to do with this code because when I remove the HTML widget, the titles display at the right size on the images. Any idea what I can do to fix?
David Denedo
I just had a look at your website. The design looks like it is working fine now. Can you confirm that?
gustavo jimenez
Hi, for some reason links are not working on my page :(
David Denedo
Hi, sorry for the late reply. Can you share a url to your page using the contact form?
gustavo jimenez
Hi, for some reason is not working on my page :(
Leah
Thanks so much for this. How do I get the link to open in a new tab?
David Denedo
To open the links in a new tab, check within the code, and uncomment the portion which has
galleryImages[i].target = "_blank";by removing the startingand ending
Jay Savoor
Hi Maxime
I have done exactly what you have laid down. I am using Elementor Pro 3.18.2 and the code does not seem to work.
I have tried it on Mac Chrome and Mac Safari.
The code I have used is this:
document.addEventListener(‘DOMContentLoaded’, function () {
let linkedImages = document.querySelectorAll(‘.e-gallery-item’);
let links = [
‘https://www.pawsandbebes.com/the-anderson-kulik-family/’,
‘https://www.pawsandbebes.com/the-bell-family/’,
‘https://www.pawsandbebes.com/the-darson-family/'”,
‘https://www.pawsandbebes.com/the-eckanoye-lomax-family/’,
‘https://www.pawsandbebes.com/the-namaani-family/’,
‘https://www.pawsandbebes.com/the-wilson-family/’,
];
linkedImages.forEach((linkedImage, i) => {
if (links[i] && links[i].length > 0) {
linkedImage.style.cursor = “pointer”;
linkedImage.href = links[i];
}
});
});
I would be most grateful if you could please assist.
Jay Savoor
Hey David .. goofed up here.
I have also tried Maxime’s code, and both of yours’ do not work.
Followed all instructions to a tee .. i suspect that Elementor had screwed things up.
David Denedo
Hi Jay
Can you please share a url to your page. The last time I checked, the code was still working.
Zubair Amin
this script is not working for multi galleries, i am trying but on same page 2 galleries i am using separately and i can not repeat it.
let ddGalleryLinks = (className, imgLinks) => {
const galleryImages = document.querySelectorAll(className + ” a”);
// Code to add links to gallery images
for (let i = 0; i < imgLinks.length; i++) {
if (imgLinks[i] !== "") {
galleryImages[i].href = imgLinks[i];
// Open link in new window
/* galleryImages[i].target = "_blank"; */
}
}
};
document.addEventListener("DOMContentLoaded", function () {
ddGalleryLinks(
".gallery1",
[
"https://daveden.co.uk/tutorials/apply-custom-aspect-ratio-to-the-elementor-gallery-widget/",
"https://daveden.co.uk/tutorials/add-a-tooltip-to-elementor-pricing-widget-for-free/",
"https://daveden.co.uk/tutorials/elementor-horizontal-accordion-without-any-add-ons/"
]);
ddGalleryLinks(
".gallery2",
[
"http://google.com",
"http://fb.com",
"http://x.com"
]);
});
David Denedo
Hi Zubair,
Are you attempting to add links to two different gallery widgets on a single page, or are you referring to the Multiple Type in the Pro Gallery Widget, which includes a filter bar?
Wils
what if there is a filter, the images have a different order and the links don’t match the gallery, is there a solution for this? many thanks!
David Denedo
Yeah, if the order changes, it’ll be a problem. The best solution would be for Elementor to allow us add the links at the php level. But I’ll look into an improved solution.
Pan
Hello, thank you for your script. It works on desktop, even when using chrome devtool’s responsive mode, but sadly it doesn’t work on mobile. Is there any way to fix this?
David Denedo
That’s weird. It worked well when I tested it on a few mobile phones – Samsung Note 20 Ultra and iPhone XS.
Can you share the url to your page? If you like, you can send it directly to [email protected]