> For the complete documentation index, see [llms.txt](https://modernpress-io.gitbook.io/modernpress/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://modernpress-io.gitbook.io/modernpress/widgets/gallery.md).

# Gallery

### Introduction

The **Gallery Widget** in **ModernPress** allows you to showcase images beautifully with multiple layout styles and a built-in lightbox feature. Whether you're displaying a portfolio, product gallery, or creative showcase, this widget provides flexibility, responsiveness, and interactive viewing options.

***

#### Key Features:

✅ 5 Unique Layouts\
✅ Masonry, Grid, and Uneven Layouts\
✅ Lightbox for Image Previews\
✅ Customizable Spacing, Borders, and Effects\
✅ Responsive and Mobile-Friendly

***

### Adding the Gallery Widget

{% stepper %}
{% step %}
Open your WordPress Dashboard.

{% endstep %}

{% step %}
Edit a page with **Elementor**.

{% endstep %}

{% step %}
Search for **"Gallery"** in the **ModernPress Widgets** panel.

<figure><img src="/files/qf08HEDmPK2PPc9AR5kr" alt=""><figcaption></figcaption></figure>

{% endstep %}

{% step %}
Drag and drop the widget into your section.

{% endstep %}

{% step %}
Select your desired layout and customize settings.

<figure><img src="/files/Nbk4vGf88a47mIdcQqOF" alt=""><figcaption></figcaption></figure>
{% endstep %}
{% endstepper %}

***

### Layouts Overview

#### Layout 1 - Grid Style

📌 Displays images in equal-sized grid columns and rows.\
🎨 Best for **clean and uniform galleries**.

<figure><img src="/files/nGwTJzN0jWThgUXTGulk" alt=""><figcaption></figcaption></figure>

#### Layout 2 - Masonry Style

📌 Images adjust in height dynamically while maintaining a neat layout.\
🎨 Ideal for **portfolios, photography showcases, and blogs**.

<figure><img src="/files/a4b6R2kKEyxUBl26b8ur" alt=""><figcaption></figcaption></figure>

#### **Layout 3 - Uneven Layout** *(Sometimes called Justified Grid)*

📌 A mix of different-sized images arranged aesthetically.\
🎨 Great for **artistic presentations and creative galleries**.

<figure><img src="/files/gfACJ7CuoGkdYKAoSPx5" alt=""><figcaption></figcaption></figure>

#### Layout 4 - Full-Width Gallery

📌 Expands across the full width of the section.\
🎨 Perfect for **landscape photography and large visuals**.

#### Layout 5 - Carousel Gallery

📌 A gallery slider with multiple images visible per slide.\
🎨 Works well for **compact image showcases and testimonials**.

<figure><img src="/files/nHq2EAdh6341DPXPvnng" alt=""><figcaption></figcaption></figure>

***

### Customization Options

#### Content Settings

📸 **Image Uploads** – Add and arrange multiple images.\
🎭 **Caption & Overlay** – Show text or hover effects on images.\
🔍 **Lightbox Enable/Disable** – Allow images to open in a popup.

<div><figure><img src="/files/HI7awzZZFdOBt5SQwuYx" alt=""><figcaption></figcaption></figure> <figure><img src="/files/BF7A6PnY689CVpjVdwMf" alt=""><figcaption></figcaption></figure></div>

#### Style Settings

🎨 **Spacing & Columns** – Adjust padding, margins, and number of columns.\
🔠 **Typography** – Customize font styles for captions.\
🖼 **Hover Effects** – Choose from zoom, fade, and grayscale effects.

<div><figure><img src="/files/e3nSf9bdZJibFd5l1gZ1" alt=""><figcaption></figcaption></figure> <figure><img src="/files/V6xkrhjjK9dXlRw21Vhy" alt=""><figcaption></figcaption></figure></div>

#### Advanced Features

✨ **Lightbox Options** – Full-screen preview with navigation.\
📱 **Responsive Adjustments** – Optimize layout for mobile and tablet.

***

### FAQs

<details>

<summary>Can I mix different image sizes in one gallery?</summary>

Yes! The **Masonry and Uneven Layouts** allow for mixed image sizes.

</details>

<details>

<summary>How do I enable/disable the lightbox?</summary>

Go to **Content Settings** and toggle the **Lightbox** feature.

![](/files/BF7A6PnY689CVpjVdwMf)

</details>

***

### Need Help?

If you have any questions or need support, feel free to reach out at <support@modernpress.com>.