Start with a blank page and the Elementor editor

Open Elementor on a new page by clicking the edit button, then select "Edit with Elementor" from the toolbar. You will see a blank canvas on the left and a panel of widgets on the right. The widgets panel is where you find the tools to add images, text, buttons, and layouts to your page.

Elementor works by dragging widgets onto your page. Each widget is a building block — a gallery widget holds images, a text widget holds words, a button widget creates a clickable link. You can resize and style each one without writing code.

Key Takeaways

  • The Gallery widget in Elementor lets you upload multiple images at once and arrange them in rows, columns, or masonry layouts without touching code.
  • Lightbox settings make images open in a larger view when clicked, which keeps visitors on your page instead of opening a new one.
  • You can style the gallery by changing spacing, borders, shadows, and hover effects directly in the Elementor panel without leaving the editor.
  • For more control over image order and captions, upload images to your WordPress media library first, then select them in the gallery widget.

Add the Gallery widget to your page

In the widgets panel on the right, search for "Gallery" or scroll down to find it. Click and drag the Gallery widget onto your page. A gallery placeholder will appear with a button that says "Add Images".

Click "Add Images" to open your WordPress media library. You can upload new images here or select ones you have already uploaded. Hold Ctrl (or Cmd on Mac) and click multiple images to select them all at once, then click "Insert Gallery". Elementor will arrange them in a grid on your page.

Arrange images in rows and columns

Once your images are in the gallery, look at the panel on the right for layout settings. You will see a field called "Columns" — this controls how many images appear side by side. Set it to 3 for a three-column layout, 4 for four columns, or 2 for a wider look with fewer images per row.

Below that, you can adjust spacing between images. The "Gap" setting controls the white space between each image. Increase it if you want breathing room, decrease it if you want images closer together. You can also set different spacing on mobile devices so the gallery does not look cramped on phones.

Enable lightbox to enlarge images on click

Scroll down in the right panel until you find "Lightbox". Toggle this on. Now when someone clicks an image in your gallery, it will open in a larger view on top of the page instead of opening a new tab. They can click through to the next image, zoom in, or close it to go back to your page.

You can customize the lightbox appearance by changing the background color, adding captions, or turning on a counter that shows "1 of 12" so visitors know how many images are in the set. These options appear below the Lightbox toggle.

Style the gallery with borders, shadows, and hover effects

In the right panel, find the "Style" tab (it usually looks like a paint palette). Here you can add borders around each image, shadows that appear when you hover over them, or rounded corners to soften the edges.

The "Hover" section lets you add effects when someone moves their mouse over an image — you can make it zoom in slightly, change opacity, or add a color overlay. These small touches make the gallery feel interactive and polished without slowing down your page.

Add captions and descriptions to images

If you want text under each image, you need to add captions before uploading to the gallery. In your WordPress media library, click on an image and scroll down to the "Caption" field. Type a short description, then save. When you add that image to the Elementor gallery, the caption will appear below it.

Alternatively, you can use the Gallery widget's "Image Caption" setting in the right panel to pull captions from your media library automatically. This works best if you have already filled in captions for all your images.

Use masonry layout for varied image sizes

If your images are different heights and widths, switch the gallery layout to "Masonry" instead of the default grid. Masonry arranges images like a brick wall — smaller images fit into gaps left by larger ones, creating a natural-looking layout without awkward empty spaces.

Masonry works well for portfolios, product showcases, or any gallery where images are not uniform. You can still adjust columns and spacing the same way you would with a regular grid.

Frequently Asked Questions

Can I add text or titles above and below the gallery?

Yes. Add a Text widget above the gallery for a title or description, and another below for captions or a call-to-action button. Drag the Text widget onto your page just like the Gallery widget, then type your content. You can style the text with fonts, colors, and sizes in the right panel.

What image size should I upload for the best quality?

Upload images at least 1200 pixels wide. Elementor will resize them to fit your layout, but starting with larger images keeps them sharp on high-resolution screens. Compress images before uploading to keep your page fast — tools like TinyPNG or your camera's built-in compression work well.

Can I change the order of images after I add them?

Yes. Click "Add Images" again in the gallery widget, and you will see your current images listed. You can drag them to reorder, remove ones you do not want, or add new ones. The changes save when you click "Insert Gallery".

How do I make the gallery responsive on mobile phones?

Elementor handles this automatically, but you can fine-tune it. In the right panel, look for responsive settings (usually a phone icon). Set the number of columns for tablets and mobile separately — for example, 3 columns on desktop, 2 on tablet, 1 on mobile. This ensures the gallery looks good on all screen sizes.

Can I add a filter to show only certain images?

The basic Gallery widget does not have built-in filters. For that, you would need the Portfolio widget (which has category filters) or a third-party plugin like Elementor Pro's Portfolio widget. The free Gallery widget is best for straightforward image collections without categories.