Gallery is a premium element that requires a Pro or Agency license. Activate your license to use this element.
Overview
The Gallery element displays multiple images in a responsive grid layout. It supports a lightbox feature for viewing full-size images and maintains consistent aspect ratios across all items.
Default classes applied to the Gallery element:
grid– CSS Grid layoutgrid-cols-2– 2 columns on mobilemd:grid-cols-3– 3 columns on tablet and upgap-4– Consistent spacing between images
Images can be added via the WordPress Media Library or external URLs. The aspect ratio options ensure consistent image sizing regardless of original dimensions, creating a clean, uniform grid appearance.
Settings
Configure the Gallery element using these Inspector options:
| Setting | Description | Default |
|---|---|---|
| Images | Array of image URLs to display. Click "Add Images" to open the Media Library or paste external URLs. | [] (empty) |
| Columns | Number of columns in the grid layout. Choose from 1 to 6 columns based on your design needs. | 3 |
| Gap | Spacing between images using Tailwind's gap scale (0-12). Higher values create more visual separation. | 4 (gap-4) |
| Aspect Ratio | Force consistent image aspect ratio. Options include aspect-square, aspect-video, or aspect-[4/3]. |
aspect-square |
| Rounded | Border radius class for images. Options include rounded, rounded-lg, rounded-xl, or rounded-none. |
rounded |
| Lightbox | Enable click-to-enlarge lightbox view. When enabled, clicking an image opens it in a full-screen overlay. | true |
Examples
3-Column Square Grid Gallery
The default gallery configuration with square images arranged in a 3-column grid. Perfect for portfolio thumbnails or product showcases.
<div class="grid grid-cols-2 md:grid-cols-3 gap-4">
<a href="/images/photo-1-full.jpg" data-lightbox="gallery">
<img
src="/images/photo-1.jpg"
alt="Gallery image 1"
class="w-full aspect-square object-cover rounded"
>
</a>
<a href="/images/photo-2-full.jpg" data-lightbox="gallery">
<img
src="/images/photo-2.jpg"
alt="Gallery image 2"
class="w-full aspect-square object-cover rounded"
>
</a>
<!-- Additional images... -->
</div>4-Column Gallery with Video Aspect
A 4-column gallery using 16:9 aspect ratio images. Ideal for displaying screenshots, video thumbnails, or landscape photography.
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
<a href="/images/screenshot-1-full.jpg" data-lightbox="gallery">
<img
src="/images/screenshot-1.jpg"
alt="Screenshot 1"
class="w-full aspect-video object-cover rounded-lg"
>
</a>
<a href="/images/screenshot-2-full.jpg" data-lightbox="gallery">
<img
src="/images/screenshot-2.jpg"
alt="Screenshot 2"
class="w-full aspect-video object-cover rounded-lg"
>
</a>
<!-- Additional images... -->
</div>Gallery Without Lightbox
A static gallery display without click-to-enlarge functionality. Useful when images are decorative or when you want to link them to other pages.
<div class="grid grid-cols-2 md:grid-cols-3 gap-4">
<img
src="/images/team-1.jpg"
alt="Team member 1"
class="w-full aspect-square object-cover rounded"
>
<img
src="/images/team-2.jpg"
alt="Team member 2"
class="w-full aspect-square object-cover rounded"
>
<img
src="/images/team-3.jpg"
alt="Team member 3"
class="w-full aspect-square object-cover rounded"
>
</div>Use appropriately sized thumbnails in the grid and link to full-resolution images for the lightbox. This improves page load performance while maintaining quality when images are enlarged.