Image Gallery Widget¶
The Image Gallery widget shows your images in a responsive grid. Shoppers can zoom an image in a full-screen lightbox, download it, and share it to Facebook, Twitter, or Pinterest. Use it for lookbooks, product showcases, portfolios, or any visual collection.
Page Builder name: Image Gallery | PapaThemes — Version: 1.0.1
Add it to your page¶
- In Page Builder, open the widget panel and find Image Gallery | PapaThemes.
- Drag it onto the page where you want the gallery to appear.
- The widget starts with four sample images. Replace them with your own in the settings panel.
Settings¶
Settings¶
Icons¶
Turn the action icons that appear on each image on or off.
| Option | What it does | Default |
|---|---|---|
| Show Download Icon | Shows a button shoppers can use to download the image. | On |
| Show Zoom Icon | Shows a button that opens the image full-screen in a lightbox. | On |
| Show Facebook Icon | Shows a button to share the image on Facebook. | On |
| Show Twitter Icon | Shows a button to share the image on Twitter. | On |
| Show Pinterest Icon | Shows a button to pin the image on Pinterest. | On |
| Enable Image Lazyload | Loads images only as they come into view, which speeds up the page. | On |
| Color | The color of the action icons. | #000000 |
Columns¶
Set the spacing between images for each device size.
| Option | What it does | Default |
|---|---|---|
| Padding (Desktop) | Spacing around each image on desktop — top, right, bottom, left. | 10px all sides |
| Padding (Tablet) | Spacing around each image on tablet — top, right, bottom, left. | 10px all sides |
| Padding (Mobile) | Spacing around each image on mobile — top, right, bottom, left. | 5px all sides |
Image Title¶
Style the caption shown under each image.
| Option | What it does | Default |
|---|---|---|
| Heading Color | Text color of the image title. | #000000 |
| Typography | Default (theme font) or Custom; Custom reveals Font family, Weight, and separate Size values for Desktop, Tablet, and Mobile. | Default |
| Alignment | Aligns the title text left, center, or right. | Center |
| Padding | Inner spacing (padding) around the title — top, right, bottom, left. | 5px / 0 / 5px / 0 |
Images¶
Each picture in the gallery is an entry in the Images list.
- Add an image: open the Images list and choose to add a new entry, then upload or pick an image.
- Remove an image: use the delete (trash) control on the entry you want to remove.
- Reorder images: drag entries to change the order they appear in the grid.
Options for each image:
| Option | What it does | Default |
|---|---|---|
| Image | The image shown in the gallery. Upload one or pick from your image library. | Sample image |
| High-Res Image for Downloading | An optional larger version used when a shopper downloads the image. If left empty, the displayed image is downloaded. | Empty |
| Width | The image width in pixels, used to set the grid cell shape. | 600px |
| Height | The image height in pixels, used to set the grid cell shape. | 600px |
| Fit | How the image fills its cell — Contain (shows the whole image, may leave space) or Cover (fills the cell, may crop). | Contain |
| Hover overlay color | A color overlay shown when a shopper hovers over the image. | rgba(255,255,255,0.5) |
| Width (Desktop) | How wide this image's column is on desktop, from 0% to 100% (25% gives 4 across). | 25% |
| Width (Tablet) | How wide this image's column is on tablet, from 0% to 100% (50% gives 2 across). | 50% |
| Width (Mobile) | How wide this image's column is on mobile, from 0% to 100% (100% gives 1 across). | 100% |
Edit captions right on the page
You can click an image title directly on the page in Edit Mode and type your changes there.
Tips¶
Plan your columns
The per-image Width settings control how many images sit side by side. For a tidy 4-column desktop gallery use 25% on desktop, 50% on tablet, and 100% on mobile. For 3 columns use about 33% on desktop.
Keep downloads fast
Optimize your images before uploading, and leave Enable Image Lazyload on so the page loads quickly even with many images.
- Set Width and Height to match each image's real shape so cells don't look stretched.
- Add a High-Res Image for Downloading when you want shoppers to grab a print-quality version while keeping the on-page image light.
- Social sharing works best when your store and images are publicly accessible.