Looking to showcase images or videos on your website in a clean, user-friendly way—without spending a dime? The Thumbnail Gallery widget for Elementor is an easy-to-use tool for adding a simple image and video gallery to your website, enhancing visual content with minimal effort. In this step-by-step guide, we’ll walk you through the process of creating a free thumbnail gallery in Elementor, so you can highlight your visual content beautifully and boost engagement with ease.
Popular Use Cases for Displaying a Thumbnail Gallery on an Elementor Website
Portfolio Websites
Creative professionals like photographers, designers, and artists can use thumbnail galleries to neatly showcase their best work, allowing visitors to preview and click through to full-sized visuals.
E-commerce Websites
Online stores can display product images using a thumbnail gallery, helping customers view different angles or variations of a product before making a purchase decision.
Travel or Tourism Websites
Travel blogs and tourism businesses can highlight destinations, attractions, or past tour experiences using thumbnail galleries, creating visual inspiration and encouraging visitor engagement.
Restaurant or Café Websites
Thumbnail galleries can showcase food items, interior shots, and customer experiences, giving visitors a visual taste of what to expect before making a reservation or visiting.
Fashion or Lifestyle Blogs
Bloggers can display outfit collections, product roundups, or style inspiration posts using a thumbnail gallery, making it easier for readers to explore and interact with visual content.
Photography Websites
Professional and hobbyist photographers can use thumbnail galleries to display photo collections, categorize shoots by theme or location, and let visitors explore their portfolio with ease and elegance.
Step #1: Install and activate Unlimited Elements Free Version for Elementor
You have to install and activate the Unlimited Elements Free Version for Elementor.
Step #2: Adding the Testimonial Grid widget to your Elementor website
To display a gallery, install the free Thumbnail Gallery widget from the Unlimited Elements Widget library.
Step #3: Add the Thumbnail Gallery widget to your Elementor page
Now, in the Elementor editor, find the Thumbnail Gallery widget and drag it to the desired part of your page.
Gallery Source Settings
Gallery Item Source
Determine the type of content that will populate your gallery. The available options include:
- Gallery
Manually upload or select specific images to create a custom gallery. - Image and Video Items
Show image and video items using the repeater field. - Instagram
Fetch and display content directly from your Instagram account. Ideal for showcasing social media posts and engaging with your audience. - Posts
Populate the gallery with images or featured media from your WordPress posts. You can specify post types, categories, or tags to refine the selection. - Products
Display product images sourced from your WooCommerce store or any product catalog. Useful for eCommerce galleries. - Current Product Gallery
Automatically pull images from the current product being viewed on a WooCommerce product page. Streamlines galleries for individual product pages. - Current Product Variations
Highlight images from the variations of the currently viewed product, such as different colors, sizes, or styles. - Current Post Metafield
Use custom metadata from the current post to generate the gallery content. This is ideal for advanced dynamic galleries tied to specific fields.
Choose Images
Choose images to create a custom gallery.
Image Title Source
Select the image title source from below options:
Image Auto (title or alt or caption): This option automatically selects the title from the first available source in this priority order:
- Title (if provided).
- Alt text (alternative text describing the image).
- Caption (a description or annotation of the image).
Image Title: This uses the actual title attribute of the image as the source for its title.
Image Alt: This uses the alt (alternative text) attribute of the image as the title source.
Image Caption: This uses the caption associated with the image as its title source.
Image Description Source
This option allows you to choose where the description of the image should come from.
- Image Description: This pulls the description specifically written for the image.
- Image Title: This uses the name or title you gave to the image.
- Image Alt: This takes the alt text (alternative text) written for the image. Alt text is used to describe the image for visually impaired users or when the image doesn't load.
- Image Caption: This option uses the caption text, which is typically shown below the image on a website.
Thumb Image Size
Choose an appropriate image size for the thumbnail images.
Big Image Size
Choose an appropriate image size for the big image.
General Settings
Theme Panel Position
Set the position of the theme panel.
- Bottom
- Top
- Left
- Right
Hide Panel After Width
Set the screen width (in pixels) at which the panel will be hidden.
Gallery Autoplay
Enable or disable automatic slideshow playback.
Autoplay Interval
Set the time interval in milliseconds between image transitions during autoplay. function for smooth scrolling transitions.
Pause on Mouseover
Enable pausing the autoplay when the user hovers over the gallery.
Control Thumbs Mousewheel
Enable or disable the ability to scroll through thumbnails using the mouse wheel.
Gallery Control Keyboard (Pro Feature)
Enable navigation through gallery images using keyboard controls.
Loop (Pro Feature)
Enable looping, allowing navigation to the first image after reaching the last image.
Image Fit
Set how images fit within the gallery container.
Fill – Stretch the image to completely cover the available space, potentially cropping parts of the image.
Fit – Scale the image to fit within the available space while maintaining its aspect ratio, ensuring no cropping occurs.
Transition
Set the transition effect between images.
Slide – Move images horizontally in a sliding motion.
Fade (Pro Feature) – Gradually blend one image into the next.
Transition Speed
Define the speed (in milliseconds) of the transition effect.
Swipe (Pro Feature)
Enable swipe gestures for navigating images.
Zoom (Pro Feature)
Enable zoom functionality for images.
Maximum Zoom Ratio
Set the maximum zoom level for images.
Loader Type
Set the loader style for image loading.
1, 2, 3 – Standard loader types available in the free version.
4, 5, 6, 7 (Pro) – Additional loader animations available in the Pro version.
Open Item Link On New Page
Enable this to open item link on a new page.
Video Autoplay (Pro Feature)
Enable automatic playback of videos in the gallery.
(Pro options indicate features available in the Unlimited Elements Pro.)
Layout Settings
Enable Text Panel
Enable or disable the text panel overlay on images.
Text Panel Always On
Keep the text panel visible at all times.
Text Panel Title
Enable or disable the display of the title within the text panel.
Text Panel Description
Enable or disable the display of the description within the text panel.
Enable Bullets
Enable or disable navigation bullets for the gallery.
Enable Arrows
Show/Hide navigation arrows on thumbnail gallery.
Enable Slideshow Play Button
Enable or disable the slideshow play button.
Enable Fullscreen Button
Show/Hide the fullscreen button.
Enable Progress Indicator
Enable the progress indicator on grid gallery.
Enable Grid Panel Handle
Enable or disable the grid panel handle.
Connected Widgets Settings
Enable Remote Connection
Widget Name for Connection
Choose this to "Auto Detectable", so it will automatically detect the remote widgets.
Sync
Sync Group
Choose the same group for two or more item-based widgets so they can sync together.
Wrapping it Up!
And that’s it! You’ve just created a stunning thumbnail gallery using Elementor—completely free and without any coding required. With the Thumbnail Gallery widget, adding visual flair to your site has never been easier. Whether you’re showcasing a portfolio, product images, or video previews, this simple yet powerful tool helps you present your content in a polished, organized layout. Now go ahead and customize it further to match your style and make your visuals stand out!