Do you want to show images in a neat grid in Elementor? A grid gallery puts every image in an even row-and-column arrangement, which is the right choice when the images matter equally and you want the page to look orderly rather than editorial.
The Gallery Listing widget in The Plus Addons for Elementor builds one in a few clicks, with separate column counts for desktop, tablet and mobile.
To check the complete feature overview documentation of The Plus Addons for Elementor Gallery Listing widget, click here.
Requirement – This widget is a part of The Plus Addons for Elementor, make sure it’s installed & activated to enjoy all its powers.
Before You Start
- Edition: Free — available in both The Plus Addons for Elementor (Free) and Pro.
- Widget to enable: Gallery Listing, switched on under ThePlus Settings > Widgets.
Step 1: Add the widget and choose the Grid layout
Drag the Gallery Listing widget onto the page. On the Content tab, open the Layout section and pick Grid — it is the default, so it is usually already selected. Grid, Masonry and Metro are all available in the free plugin; Carousel is Pro.
Step 2: Add your images
Open the Content section, leave Select Option on Normal, and click Add Images to choose photos from the media library. You can reorder them by dragging inside the picker.
Step 3: Set the columns
Open Content > Columns Manage. Desktop Column defaults to Column 4, Tablet Column to Column 3 and Mobile Column to Column 2, each with a choice of 1 to 6 columns, so a six-across desktop grid can drop to two across on a phone without any custom CSS.
Step 4: Choose what a click does
Popup Layout, back in Content > Layout, controls the lightbox. Leave it on Default Light-box to let visitors open a full-size version, or set it to No if the images are decorative and should not be clickable.
Making every tile the same size
Photos straight from a camera arrive at different dimensions, which makes a grid look ragged. Open Content > Extra Options, turn on Display Image Size, and pick a fixed size from Image Resolution. There is a full walkthrough in make an Elementor image gallery the same size in a grid.
Settings Reference
| Setting | Where | Options | Default |
|---|---|---|---|
| Layout | Content > Layout | Grid, Masonry, Metro, Carousel (Pro) | Grid |
| Popup Layout | Content > Layout | Default Light-box, No | Default Light-box |
| Select Option | Content > Content | Normal, Repeater (Pro), ACF Gallery (Pro) | Normal |
| Add Images | Content > Content | Media library picker | Empty |
| Desktop Column | Content > Columns Manage | Column 1 to 6 | Column 4 |
| Tablet Column | Content > Columns Manage | Column 1 to 6 | Column 3 |
| Mobile Column | Content > Columns Manage | Column 1 to 6 | Column 2 |
| Display Image Size | Content > Extra Options | Show / Hide | Hide |
Two sections are called Extra Options — one on the Content tab, one on the Style tab — and they hold different controls. Image sizing is on Content > Extra Options.
Limitations
- The grid is even by design. Every tile gets the same width. For deliberately uneven tiles use Metro, and for varying heights use Masonry.
- Column counts are fixed choices, from one to six — there is no arbitrary number.
- Repeater and ACF sources are Pro. The free plugin uses the Normal image picker.
- Uneven originals show. Without Display Image Size the grid inherits whatever dimensions your photos have.
Troubleshooting
The gallery shows one image per row
Check Mobile Column and Tablet Column in Content > Columns Manage — you may be previewing a smaller breakpoint than you think. Use Elementor’s device switcher to confirm.
The tiles are different heights
That is the original image dimensions coming through. Turn on Display Image Size in Content > Extra Options and set a fixed Image Resolution.
Clicking an image does nothing
Popup Layout is set to No. Set it back to Default Light-box.
