Need Help?

Here are some good places you cant start.

Whats New?

Get updated about all the good stuff!

Content Carousel - Featured Blog
Stacked Images - Featured Blog
ACF Repeater Field - Featured Blog

Grid Gallery for Elementor

The Grid Gallery widget for Elementor is a dynamic tool designed to create beautiful and engaging galleries for your website. It supports multiple content sources, including image uploads, videos, Instagram, WordPress posts, and WooCommerce products, giving you the flexibility to display media exactly how you envision. With a range of customization options and seamless integration with Elementor, this widget ensures your galleries stand out while complementing your site’s overall design.

Let’s look at each of the options in the Grid Gallery widget for Elementor below.

Add a Grid Gallery Widget to Elementor

This widget requires Unlimited Elements Pro version installed and activated on your WordPress website.

  1. Go to Unlimited Elements Widget Library
  2. Search in the search bar for “Grid Gallery”
  3. Hover over the widget in the search results and click install
  4. Add the “Grid Gallery” widget to any Elementor Page

Gallery Source Settings

1

Gallery Item Source

Determine the type of content that will populate your gallery. The available options include:

  1. Gallery
    Manually upload or select specific images to create a custom gallery. 
  2. Image and Video Items
    Show image and video items using the repeater field.
  3. Instagram
    Fetch and display content directly from your Instagram account. Ideal for showcasing social media posts and engaging with your audience.
  4. 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.
  5. Products
    Display product images sourced from your WooCommerce store or any product catalog. Useful for eCommerce galleries.
  6. Current Product Gallery
    Automatically pull images from the current product being viewed on a WooCommerce product page. Streamlines galleries for individual product pages.
  7. Current Product Variations
    Highlight images from the variations of the currently viewed product, such as different colors, sizes, or styles.
  8. 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.
2

Image Title Source

Select the image title source from below options:

  1. 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).
  1. Image Title: This uses the actual title attribute of the image as the source for its title.

  2. Image Alt: This uses the alt (alternative text) attribute of the image as the title source.

  3. Image Caption: This uses the caption associated with the image as its title source.

3

Image Description Source

This option allows you to choose where the description of the image should come from.

  1. Image Description: This pulls the description specifically written for the image. 
  2. Image Title: This uses the name or title you gave to the image. 
  3. 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. 
  4. Image Caption: This option uses the caption text, which is typically shown below the image on a website.
4

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.

  1. Full
  2. Large (max width 1024)
  3. Medium Large (max width 768)
  4. Medium (max width 300)
  5. Thumbnail (150x150)
  6. 1536x1536 (max width 1536)
  7. 2048x2048 (max width 2048)
  8. WooCommerce Thumbnail (300x300)
  9. WooCommerce Single (max width 600)
  10. WooCommerce Gallery Thumbnail (100x100)
5

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.

  1. Full
  2. Large (max width 1024)
  3. Medium Large (max width 768)
  4. Medium (max width 300)
  5. Thumbnail (150x150)
  6. 1536x1536 (max width 1536)
  7. 2048x2048 (max width 2048)
  8. WooCommerce Thumbnail (300x300)
  9. WooCommerce Single (max width 600)
  10. WooCommerce Gallery Thumbnail (100x100)

General Settings

1

Theme Panel Position

Set the position of the theme panel.

  1. Left
  2. Right
2

Hide Panel Below Width (px)

Specify the screen width (in pixels) below which the theme panel will automatically be hidden. This is useful for creating responsive designs, ensuring that the panel does not clutter the interface on smaller screens such as mobile devices.

3

Gallery Autoplay

When enabled, the gallery will automatically cycle through slides without requiring user interaction.

4

Autoplay Interval

Set the interval time between gallery slides (in milliseconds).

5

Pause on Mouseover

Pause autoplay when the mouse hovers over the gallery.

6

Control Thumbs Mousewheel

If enabled, scrolling the mouse wheel will navigate through the gallery thumbnails.

7

Gallery Control Keyboard

Enable gallery navigation using the keyboard.

8

Loop

By enabling this, gallery loops back to the first slide after the last one.

9

Image Fit

Determines how images are scaled within their containers.

  1. Fill
  2. Contain
  3. Cover
10

Transition

Set the transition effect used when switching slides.

  1. Slide
  2. Fade
11

Transition Speed

Specify the speed of the transition effect.

12

Swipe

Enables swipe gestures for navigating slides (useful for touch devices).

13

Zoom

Enables zoom functionality for images in the gallery.

14

Maximum Zoom Ratio

Set the maximum zoom level for images.

15

Loader Type

It allows selection of a loader style for the gallery.

16

Open Item Link on New Page

It opens links associated with items in a new tab.

17

Video Autoplay

Automatically plays videos when selected.

Text Panel Settings

1

Enable Text Panel

Show text overlay over grid gallery.

2

Text Panel Always On

Determines whether the Text Panel remains visible at all times.

3

Text Panel Padding

Sets the padding inside the Text Panel in pixels.

4

Text Panel Background Color

Set the background color of the Text Panel.

5

Text Panel Opacity

Adjusts the transparency level of the Text Panel background.

6

Text Panel Title

Set the visibility of the title text within the Text Panel.

7

Text Panel Description

Set the visibility of the description text within the Text Panel.

Bullets Settings

1

Enable Bullets

Show navigation bullets on grid gallery.

2

Space Between Bullets

Set the spacing between bullet items.

3

Bullets Align

Select the alignment of navigation bullets.

  1. Left
  2. Center
  3. Right
4

Bullets Vertical Align

Select the vertical alignment of navigation bullets.

  1. Top
  2. Middle
  3. Bottom
5

Bullets Offset

Adjusts the horizontal position of the bullets. Positive values move the bullets to the right, while negative values move them to the left.

6

Bullets Offset Vertical

Adjusts the vertical position of the bullets. Positive values move the bullets downward, while negative values move them upward.

Arrows Settings

1

Enable Arrows

Show navigation arrows on grid gallery.

2

Arrow Align Vertical

Set the vertical alignment of navigation arrows.

  1. Top 
  2. Middle
  3. Bottom
3

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

1

Enable Progress Indicator

Enable the progress indicator on grid gallery.

2

Indicator Type

Select the type of progress indicator to show on grid gallery.

  1. Pie
  2. Bar
3

Indicator Align

Set the horizontal alignment of progress indicator.

  1. Left
  2. Center
  3. Right
4

Indicator Align Vertical

Set the vertical alignment of progress indicator.

  1. Top
  2. Middle
  3. Bottom
5

Indicator Horizontal Offset

Adjusts the horizontal position of the progress indicator.

6

Indicator Vertical Offset

Adjusts the vertical position of the progress indicator.

Play Button Settings

1

Enable Play Button

Show play button on grid gallery.

2

Play Button Align

Set the horizontal alignment of play button.

3

Play Button Vertical Align

Set the vertical alignment of play button.

4

Play Button Offset Horizontal

Set the horizontal offset of play button.

5

Play Button Offset Vertical

Set the vertical offset of play button.

Fullscreen Button Settings

1

Enable Fullscreen Button

Show fullscreen button on grid gallery.

2

Play Button Align

Set the horizontal alignment of play button.

  1. Left 
  2. Center
  3. Right
3

Play Button Vertical Align

Set the vertical alignment of play button.

  1. Top
  2. Middle
  3. Bottom
4

Play Button Offset Horizontal

Set the horizontal offset of play button.

5

Play Button Offset Vertical

Set the vertical offset of play button.

Zoom Panel Settings

1

Enable Zoom Panel

Show zoom panel on grid gallery.

2

Zoom Panel Align

Set the horizontal alignment of zoom panel.

  1. Left 
  2. Center
  3. Right
3

Zoom Panel Vertical Align

Set the vertical alignment of zoom panel.

  1. Top
  2. Middle
  3. Bottom
4

Zoom Panel Offset Horizontal

Set the horizontal offset of zoom panel.

5

Zoom Panel Offset Vertical

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.

1

Enable Remote Connection

Use remote control widgets to create advanced creative layouts.

2

Widget Name for Connection

This name will be used to connect and controls this widget by other widgets.

3

Sync

You can connect two item-based widgets and sync them.

4

Sync Group

Choose the same group for two or more item-based widgets so they can sync together.

Grid 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 maximum width, height, and background color.

Thumb Styling

You can set the thumbnail width, height, radius, border, and overlay.

Grid Panel Styling

Set the columns, column spacing, row spacing, panel padding, and background.

Play Video Button Styling

Here, you can set the play video button width, height, background color, border and border radius.

Fullscreen Icon Styling

You can set the icon color and opacity of fullscreen icon.

Play Slideshow Icon Styling

Set the icon color for play and pause slideshow icon.

Open/Close Thumbpanel Icon Styling

You can set the icon color and icon hover color for open and close thumbpanel icon.

Grid Gallery Design Examples For Elementor

Here are some live use cases for the Grid Gallery Widget.

Grid gallery with instagram as the source of gallery items.

Grid gallery with tabs filter.

Thank you for exploring the Grid Gallery Widget for Elementor! We hope this widget helps you transform your website with beautiful, responsive galleries that captivate your audience. If you have any questions or need assistance, feel free to reach out—we’re here to help. Don’t forget to explore additional widgets to enhance your Elementor experience further.

Download is just a click away

Get instant access to tons of Elementor goodies, completely FREE!

Hurray!

You got FREE access to the worlds leading widgets for Elementor page builder!