Image Gallery

< All Topics

The Image Gallery widget is used to showcase an image gallery on your website. You just need to add the images and set the order then you’re done. Our Element’s options give full justice to all needs related to it.

You can create amazing gallery layouts with lots of listing, customization, and styling options using this widget for WordPress using Elementor.

Pro tip
Why not create your own image gallery to your website using this widget. You can add multiple images at once with multiple styles. Make sure to add images in the correct order.

How to use the Image Gallery Widget of The Plus Addons For Elementor

The Image Gallery widget comes with different styles and a plethora of customization options using which you can create a stylish looking image gallery for your websites.

Table Of Contents

General Steps

Search for the Image Gallery element from the Elementor screen in the left and then drag and drop it into the content building area. After dropping the element, you will see three tabs i.e. Content, Style, and Advanced related to the Image Gallery widget. First, click on the Content tab.

1. Content

Layout

Style

Select your preferred Style for the Image Gallery. You will get the option to choose from 4 styles of your image gallery.
Style 1
Style 2
Style 3
Style 4

Layout

Select your preferred Layout for the Image Gallery. You will get four layout options to choose from, which are listed below.
Grid
Masonry
Metro
Carousel

Popup Layout

You can either choose the Default Light-box for the popup layout or disable it.

Content

Select Option

Select the option for the content you want to be displayed. You will get three options here:
Normal – Choose this option to create a gallery and add images.
Repeater –
Choose this option to add a Repeater Gallery.
ACF Gallery
– Choose this option to add an ACF Gallery.

Add Images

Add Images here for the Normal Gallery.

Gallery Field Name

Enter the name of the ACF Gallery here.

Columns Manage

Metro Column

Select the Metro Column here.

Metro Style

Select the style for the Metro Column here.

Tablet Responsive

Slide to enable Tablet Responsiveness.
Metro Column – Select the Metro Column here.
Metro Style – Select the style for the Metro Column here.

Columns Gap/Space Between

Select how much Gap will be there in between the Columns.

Extra Options

Display Title

Enable and set the display title here.

Title Tag

Set the title tag here.

Display Image Size

Enable and set the Display Image Size here.

Image Size

Set the Image Size here.

Display Excerpt/Content

Enable and set the Display Excerpt/Content here.

Box-Link

Enable and set the Box-Link here.

Force Custom URL

Slide to enable force custom URL.

2. Style

The Style tab is used for customizing the appearance of all the Image Gallery widget components. All these styling options include customizing the fonts, colors, background, margins, and padding which are common across all the widgets. So, we have created a single detailed article explaining these Styling Options.

View Style Tab Tutorial

Popup Icon

Enable and set the Display Icon here.

Title

Set the Typography and Title color of the Title here.

Excerpt/Content

Set the Typography, Content color, top space and bottom space for Excerpt/Content here.

Content Background

Set the Background type of the Content Background here.

Featured Image

Set the Background type and Image Hover Effect of the Featured Image here.

Box Loop Background Style

Enable and set the Box Border and Box Shadow options here.

Post Not Found Options

Set the padding, Typography, color, background type, border-radius, and box-shadow for the Post Not Found Options here.

Extra Options

Enable and set the Messy Columns options here.

On Scroll View Animation

On Scroll View Animation Options are used to set beautiful animations to your sections. They are a common option for almost all the widgets. So, we have written a detailed tutorial explaining how to use these options.

View On Scroll View Animation Tutorial

3. Advanced

Advanced Tab Options are common across all the widgets. So, we have written a detailed tutorial explaining how to use these options

View The Advanced Tab Tutorial

Do you want to rate this article?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.
Need help?