Skip to content

How To Use the Elementor Pro Gallery Widget

  • 5 min read
  • by

If you don’t have Elementor Pro installed yet, do it now. In this tutorial we show you how.

Introduction

When creating a website, we often would like a section to display some static images. While we can do this with Elementor by creating a section, creating a layout, and placing the necessary widgets. There is a much easier way – we can use the Gallery Widget.

In case, you are wondering, this is what a gallery looks like:

gallery - How To Use the Elementor Pro Gallery Widget

Using the Gallery Widget

Creating a Gallery

To start, create a page with Elementor then set its Page Layout to Elementor Full Width:

set page layout

Once that has been done, click on the Gallery widget and drag it to a section:

drag the Gallery widget

On the left side panel, we can choose whether the gallery type is Single or Multiple. What this means is that we can choose whether to place all the images in a single gallery widget, or we can give the widget a tabbed look. Tabbed galleries, don’t allow duplicate images.

For our article, we will go ahead and choose the Multiple type.

Settings: choose type multiple

Then, give the gallery a name.

name the gallery

Afterwards, choose the images you want to use.

choose your images

Then you can give each image a caption:

write captions

Once you’re done with that, click Insert Gallery. You should see something like a gallery below:

click insert a gallery

We can also re-arrange the order of images:

change order

Gallery Widget Properties

These are the most important properties that a gallery widget can have.

Grid Layout

There are three gallery layouts. Grid, Justified, and Masonry.

A Grid layout, gives all images identical heights and widths.

grid layout

This layout allows us to change the number of columns in the gallery, spacing, aspect ratio and image size:

layout settings

Secondly, a Justified layout gives all images the similar height:

images with different high

With this layout, we can only edit the number of columns and not its height.

edit number of columns

Lastly, a Masonry layout gives them all a similar width:

images with similar width

With this layout, we can’t edit its height, buy only the number of columns.

edit number of columns

Filter Bar

We can also edit the Filter Bar properties. This is the styling of the gallery title for our widgets.

add pointer: overline

Overlay

Lastly, we can also select the overlay property when we hover on the images.

select overlay

Styling

Since the gallery is a widget we can also style it like we could with other elements. We can edit the image border.

edit image border

And we can also change the styling when the image is hovered:

edit color wehne the image is hovered

We can also change the styling of the titles and descriptions:

edit title and description

Advanced Settings

Lastly, we can also edit more advanced settings. For instance, here we are giving the widget a background image, which we can set in the advanced property:

background image

Putting It Altogether…

After our edits, this is what the gallery looks like:

the finished gallery

However, we recommended…

Using the Default Settings

We personally recommend going with the default settings when it comes to styling and here is what our gallery looks like if we go with the default styling. For this example, we added a new gallery.

default settings

Conclusion

That’s it! You now know how to use the gallery widget.

Install Elementor Pro now.

nv-author-image

Kristin Eitel

Leave a Reply

Your email address will not be published.