When someone clicks a photo on your site, you want it to open bigger and beautifully without loading the page. That’s exactly what the lightbox effect does: it shows a larger version of the image in a clean overlay.
In this post, we’ll cover two straightforward ways to add that “enlarge on click” experience in WordPress:
- Using the Default WordPress Option (Best for Images)
- Using a Lightbox Plugin (Best for Galleries)
By the end, you’ll know which method fits your site, how to enable it step-by-step, and a few tips to keep images fast, accessible, and great-looking—especially on mobile.
Method 1: Using the Default WordPress Option (Best for Images)
WordPress includes a native “Expand on click” lightbox for images (WordPress 6.4+). It’s quick, lightweight, and perfect when you only need a basic enlarge-on-click effect.
A) Enlarge a Single Image (Image Block)
- Add an Image block in the editor and select/upload your image.
2. With the image selected, open the block settings panel.
3. Enable the lightbox (look for a toggle called “Expand on click” or a similar Lightbox/Link setting depending on your WP version). (Learn WordPress)
Update/Publish your post. On the front-end, clicking the image opens it in a larger view.
B) Enlarge Images in a Native Gallery (Gallery Block)
You can use the same “Expand on click” behavior with the Gallery block.
- Insert a Gallery block and add your images.
2. Select an image inside the gallery, open block settings, and enable “Expand on click.” (Depending on your setup, you may need to toggle it per image.) (Learn WordPress)
Update your page.
Limitations: It doesn’t let users slide the images from the Gallery. Users need to open images individually.
Method 2: Using a Lightbox Plugin (Best for Galleries)
If you want a more polished gallery experience—clean layouts plus a built-in lightbox—use a gallery plugin. Here we’ll use Galleryberg, a Gutenberg Gallery Block plugin.
Step-by-Step: Create a Lightbox Gallery with Galleryberg
- Install & Activate
Go to Plugins → Add New.
Search for “Galleryberg” and click Install → Activate.
2. Add a Galleryberg Block
In the editor, click + and insert Galleryberg.
Upload images or pick from the Media Library.
3. Choose a Layout
Switch between Tiles, Masonry, Justified or Square until you like the look.
4. Enable the Lightbox
In the block settings, turn on Lightbox so images open large on click.
5. Polish the Details
Add captions to images.
Adjust hover effects, spacing, and columns for a clean, cohesive style.
Publish
Preview on mobile and desktop, then click Publish.
Default vs Plugin: Which Should You Use?
Scenario |
Use the Default Option |
Use Galleryberg |
|---|---|---|
You only need to enlarge a single image |
✅ Simple and built-in |
Works too, but not necessary |
You want a styled, cohesive gallery |
Basic gallery works, limited features |
✅ Purpose-built layouts + lightbox |
Captions & Hover effects you can fine-tune |
Limited |
✅ Built-in and flexible |
Performance & simplicity |
✅ No extra plugin |
✅ Lightweight, optimized for galleries |
Hands-on control of layout |
Limited |
✅ Grid, Masonry, Justified |
Quick Rule of Thumb:
- One-off images? Use the default lightbox.
- Multiple images (galleries)? Use Galleryberg for better layout control and a seamless viewing experience.
Tips for a Better Lightbox Experience
- Optimize images (WebP/JPEG, appropriate sizes) to keep pages fast.
- Write clear captions—great for accessibility and context.
- Keep spacing consistent so your gallery feels intentional.
- Test on mobile to ensure tap targets and captions are readable.
Conclusion
You’ve got two easy paths to enlarge images on click in WordPress:
- Default WordPress lightbox for quick, no-plugin enlarging—perfect for single images.
- Galleryberg when you want beautiful layouts, captions, hover effects, and a smooth lightbox—ideal for real galleries.
Ready to make your galleries shine? Try Galleryberg to create beautiful, responsive image galleries in WordPress.
Leave a Reply