In this tutorial, we’ll learn how to use the Pro Gallery Widget in Elementor.
The Pro Gallery widget comes with a lightweight library we developed, masonry and justified layouts, hover and sequence animations and more.
In this tutorial you’ll learn how to:
✔︎ Add the Pro Gallery widget to your landing page or WordPress website
✔︎ Create a Multiple Gallery
✔︎ And more!
hile its zip from Elemental today I’ll
show you how to use the pro calorie
widget which is a very unprofessional
gallery solution that allows you to
create advanced and stunning image
galleries like the one you see here so
let’s dive in and check it out first off
go ahead and search for the gallery
widget then drag and drop it onto the
canvas let’s go over its features one by
one in the settings drop-down we can
choose the type of gallery we want
either single or multiple multiple gives
us the option to add more than one
gallery and filter between them just
like you saw before pro gallery is smart
at filtering too if the same image is
used in multiple galleries the old
filter will still only show the image
once for this example
I’ll go ahead and set it to multiple now
let’s click on the gallery and give it a
name then add some images here you can
of each image its uncaptioned and on the
right a title and at a description if
you like you can reorder them
individually or reverse the order like
so
then simply insert it cool by the way
you can create more advanced galleries
by having the images appear dynamically
simply click dynamic and set it up
accordingly next I want to add another
gallery so like before give it a name
and add the images then insert it okay
great
now that we’ve added our galleries let’s
check out the other features in layout
we can choose between grid justified and
masonry grid sets all the images to the
same height and width it also gives us
the option to set the amount of columns
and add some spacing and set the aspect
ratio justified only sets the images to
the same height this way the width can
be different based on the image
dimensions you can control the row
height over here as you can see
increasing the height leads to less
images per row and vice versa
masonry sets the images to the same
width
just like in grid but this time the
height can be different I’ll go ahead
and set it to three columns and set the
spacing to 30 pixels cool let’s move on
to the filter bar options which appears
if you set the gallery type to multiple
we can hide the oil filter and give it a
different name here
we can change the pointer style and here
the animation there are many options so
go ahead and try them out in the overlay
drop-down we can set the background to
either show or not and here we can set
the title and description by linking
them to one of the images metadata
details like you see here okay great
now let’s start styling our gallery and
the image we can set a border color
width as well as a radius we can also
set a CSS filter I’ll go ahead and set
the image to blur a bit on Havva
however animation gives us the option to
set a cool animation when hovering over
the image I’ll go ahead and set it to
zoom in we can also set the animation
duration which is in milliseconds a
thousand for example sets the zoom
animation to take exactly one second
cool let’s move on to overlay settings
I’ll go ahead and set a gradient overlay
first I’ll set the colors for this
design I’ve given the background overlay
a blend mode and a hover animation
giving it this cool color changing
effect go ahead and play around with it
there are so many options and
combinations for you to try out so you
can get the exact effect you’re looking
for in the content drop-down we can
style the title and description we can
position them by setting the alignment
and vertical position like sir then give
it some padding to position it exactly
where you like style the title and
description to your liking and choose
one of many hover animations for them as
well sequenced animation sets the
overlay and text to enter gradually
enhancing the fade in effect even more
now let’s check out the filter bar
options here we can set its alignment
next I’ll go ahead and style the text
give it a color and set its typography
in the habit AB
change the text color and in the active
tab we can customize it even more and
last but not least we can set space
between as well as control the gap
between the filter bar and the images
let’s check it out cool well that’s it
now you know how to use the pro calorie
widgets and create your own advanced
stunning image galleries have fun
playing around and don’t forget to
subscribe to our youtube channel for
more tips and tutorials ciao for now
