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/articles/apply-custom-aspect-ratio-to-the-elementor-gallery-widget/",
"https://daveden.co.uk/articles/add-a-tooltip-to-elementor-pricing-widget-for-free/",
"https://daveden.co.uk/articles/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/articles/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>
Leave a Reply