The Thumbnail Gallery widget for Elementor allows you to create visually engaging image and video galleries with ease. Supporting multiple content sources like image uploads, videos, Instagram feeds, WordPress posts, and WooCommerce products, it offers flexibility for various display needs. With its customizable settings, you can tailor the gallery’s appearance to match your website’s style seamlessly.
Let’s look at each of the options in the Thumbnail Gallery widget for Elementor below.
Elementor Thumbnail Gallery Widget Tutorial Video (Step by Step Guide)
Add a Thumbnail Gallery Widget to Elementor
This widget requires Unlimited Elements Free version installed and activated on your WordPress website.
- Go to Unlimited Elements Widget Library
- Search in the search bar for “Thumbnail Gallery”
- Hover over the widget in the search results and click install
- Add the “Thumbnail Gallery” widget to any Elementor 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
This dropdown allows you to select the size at which thumbnail images of gallery will be displayed, ensuring they are optimized for your website's layout, performance, and purpose.
- Full
- Large (max width 1024)
- Medium Large (max width 768)
- Medium (max width 300)
- Thumbnail (150x150)
- 1536x1536 (max width 1536)
- 2048x2048 (max width 2048)
- WooCommerce Thumbnail (300x300)
- WooCommerce Single (max width 600)
- WooCommerce Gallery Thumbnail (100x100)
Big Image Size
This dropdown allows you to select the size at which big images of gallery will be displayed, ensuring they are optimized for your website's layout, performance, and purpose.
- Full
- Large (max width 1024)
- Medium Large (max width 768)
- Medium (max width 300)
- Thumbnail (150x150)
- 1536x1536 (max width 1536)
- 2048x2048 (max width 2048)
- WooCommerce Thumbnail (300x300)
- WooCommerce Single (max width 600)
- WooCommerce Gallery Thumbnail (100x100)
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 (Pro Feature)
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.
Preserve Ratio
Enable maintaining the aspect ratio of images when resizing the window.
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.
Video Autoplay (Pro Feature)
Enable automatic playback of videos in the gallery.
Text Panel 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 Padding
Set the padding (in pixels) around the text within the panel.
Text Panel BG Color
Define the background color of the text panel.
Text Panel Opacity
Adjust the transparency level of the text panel (0 = fully transparent, 1 = fully opaque).
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.
Bullets Settings
Enable Bullets
Enable or disable navigation bullets for the gallery.
Space Between Bullets
Define the spacing (in pixels) between navigation bullets.
Bullets Align
Set the horizontal alignment of bullets.
- Left
- Center
- Right
Bullets Vertical Align
Set the vertical alignment of bullets.
- Top
- Middle
- Bottom
Bullets Offset
Adjust the horizontal position of bullets from their default placement.
Bullets Offset Vertical
Adjust the vertical position of bullets from their default placement.
Arrows Settings
Enable Arrows
Show navigation arrows on thumbnail gallery.
Arrow Align Vertical
Set the vertical alignment of navigation arrows.
- Top
- Middle
- Bottom
Arrows Horizontal Offset
Adjusts the horizontal position of the arrows. Positive values move the bullets to the right, while negative values move them to the left.
Progress Indicator Settings
Enable Progress Indicator
Enable the progress indicator on grid gallery.
Indicator Type
Select the type of progress indicator to show on grid gallery.
- Pie
- Bar
Indicator Align
Set the horizontal alignment of progress indicator.
- Left
- Center
- Right
Indicator Align Vertical
Set the vertical alignment of progress indicator.
- Top
- Middle
- Bottom
Indicator Horizontal Offset
Adjusts the horizontal position of the progress indicator.
Indicator Vertical Offset
Adjusts the vertical position of the progress indicator.
Zoom Panel Settings
Enable Zoom Panel
Show zoom panel on thumbnail gallery.
Zoom Panel Align
Set the horizontal alignment of zoom panel.
- Left
- Center
- Right
Zoom Panel Align Vertical
Set the vertical alignment of zoom panel.
- Top
- Middle
- Bottom
Zoom Panel Horizontal Offset
Set the horizontal offset of zoom panel.
Zoom Panel Vertical Offset
Set the vertical offset of zoom panel.
Connected Widgets Settings
Connected Widgets Settings let you create dynamic, interactive layouts with advanced features. Use remote control widgets for creative layouts or sync item-based widgets together for smooth integration.
Enable Remote Connection
Use remote control widgets to create advanced creative layouts.
Widget Name for Connection
This name will be used to connect and controls this widget by other widgets.
Sync
You can connect two item-based widgets and sync them.
Sync Group
Choose the same group for two or more item-based widgets so they can sync together.
Thumbnail Gallery Widget Styling
There are a number of styling options that allow you to control every aspect of the widget’s design. Choose colors that complement the style of your website. You can modify the text, icons, fonts, and layout to make the widget look and work the way you want.
Gallery Styling
Set the gallery width, height, and background.
Thumbs Panel Styling
You can set the thumbs panel background color and alignment.
Thumb Styling
Set the thumbnail width, height, border, overlay color, opacity, and image fit.
Thumbnail Gallery Design Examples For Elementor
Here are some live use cases for the Thumbnail Gallery Widget.
Thumbnail Gallery with WooCommerce products and autoplay option.
Thumbnail gallery with tabs filter.
We hope this guide helped you explore the powerful features of the Thumbnail Gallery widget. With its support for multiple content sources and customizable settings, you can create stunning image and video galleries effortlessly. If you have any questions or need further assistance, feel free to reach out.
