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:
Using the Gallery Widget
Creating a Gallery
To start, create a page with Elementor then set its Page Layout to Elementor Full Width:
Once that has been done, click on the Gallery widget and drag it to a section:
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.
Then, give the gallery a name.
Afterwards, choose the images you want to use.
Then you can give each image a caption:
Once you’re done with that, click Insert Gallery. You should see something like a gallery below:
We can also re-arrange the order of images:
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.
This layout allows us to change the number of columns in the gallery, spacing, aspect ratio and image size:
Secondly, a Justified layout gives all images the similar height:
With this layout, we can only edit the number of columns and not its height.
Lastly, a Masonry layout gives them all a similar width:
With this layout, we can’t edit its height, buy only the number of columns.
Filter Bar
We can also edit the Filter Bar properties. This is the styling of the gallery title for our widgets.
Overlay
Lastly, we can also select the overlay property when we hover on the images.
Styling
Since the gallery is a widget we can also style it like we could with other elements. We can edit the image border.
And we can also change the styling when the image is hovered:
We can also change the styling of the titles and descriptions:
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:
Putting It Altogether…
After our edits, this is what the gallery looks like:
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.
Conclusion
That’s it! You now know how to use the gallery widget.
Install Elementor Pro now.
