---
title: Image Gallery
description: "## Overview The **Image Gallery widget in SiteCraft** allows you to showcase images in clean grid layouts or interactive tab-filtered galleries. It’s perfect for displaying portfolios, projects, or media collections with optional filtering for better user experience. --- ## Key…"
url: "https://sitecraft.themeshala.com/docs/image-gallery/"
updated: "2026-04-18"
category: General Widgets
---

# Image Gallery

## Overview

The **Image Gallery widget in SiteCraft** allows you to showcase images in clean grid layouts or interactive tab-filtered galleries. It’s perfect for displaying portfolios, projects, or media collections with optional filtering for better user experience.

---

## Key Features

- Two gallery types: Simple Grid & Tab Filter
- Category-based filtering (tab filter layout)
- Multiple column layouts
- Image upload and management
- Lightbox support (image preview on click)
- Responsive and mobile-friendly design
- Spacing and alignment controls
- Clean and modern layout styles

---

## How to Enable the Widget

Before using the Image Gallery widget, make sure it is enabled.

**Steps:**

1. Go to **SiteCraft → Dashboard → Widgets**
2. Find **Image Gallery Widget**
3. Toggle to enable it
4. Click **Save Changes**

[![](https://sitecraft.themeshala.com/wp-content/uploads/2026/04/gallery-switcher.png)](https://sitecraft.themeshala.com/wp-content/uploads/2026/04/gallery-switcher.png)

---

## How to Add the Widget in Elementor

1. Open your page with **Elementor Editor**
2. Search for **“Image Gallery”** under SiteCraft widgets
3. Drag and drop it into your section
4. Choose gallery type and start customizing

[![](https://sitecraft.themeshala.com/wp-content/uploads/2026/04/gallery-el-scaled.png)](https://sitecraft.themeshala.com/wp-content/uploads/2026/04/gallery-el-scaled.png)

---

## Content Settings

Control gallery structure and images.

[![](https://sitecraft.themeshala.com/wp-content/uploads/2026/04/gallery-el-content-scaled.png)](https://sitecraft.themeshala.com/wp-content/uploads/2026/04/gallery-el-content-scaled.png)

**Options:**

- **Gallery Type** – Simple or Tab Filter
- **Images** – Upload and manage gallery images
- **Categories** *(Tab Filter)* – Assign categories for filtering
- **Columns** – Set number of columns
- **Image Size** – Choose image resolution
- **Lightbox** – Enable/disable image popup

---

## Style Settings

Customize gallery appearance.

[![](https://sitecraft.themeshala.com/wp-content/uploads/2026/04/gallery-el-style-scaled.png)](https://sitecraft.themeshala.com/wp-content/uploads/2026/04/gallery-el-style-scaled.png)

**Available Controls:**

- **Image Spacing** – Adjust gap between items
- **Border Radius** – Rounded corners
- **Hover Effects** – Zoom, overlay, etc.
- **Overlay Color** – Customize hover overlay
- **Tab Styling***(Filter Layout)* –
  - Tab colors (normal/active)
  - Typography
  - Spacing and alignment

---

## Advanced Settings

Fine-tune layout and responsiveness.

[![](https://sitecraft.themeshala.com/wp-content/uploads/2026/04/gallery-el-advanced-scaled.png)](https://sitecraft.themeshala.com/wp-content/uploads/2026/04/gallery-el-advanced-scaled.png)

**Includes:**

- Margin & padding
- Responsive visibility
- Motion effects
- Positioning
- Background & border

---

## Use Cases

Perfect for:

- Portfolio showcases
- Project galleries
- Photo collections
- Case studies with filters

---

## Result

You can now create responsive and interactive image galleries using the **SiteCraft Image Gallery Widget**, with both simple and filterable layouts for better user engagement.