Hi and welcome to this tutorial. In this
video we'll be creating this
cool-looking snowfall effect that you
can add to your website to add some
holiday feel to your pages. It's pretty
easy to create an really beginner
friendly, it doesn't require any coding
skills or any knowledge beyond that that
you have about Elementor page builder.
So if you're familiar with Elementor
it'll be a pretty easy one.
Besides Elementor to create this snowfall
effect we're gonna need the JetTricks
add-on for Elementor, which is a great
plugin that can do a lot of things such
as complex and flexible parallax, sticky
elements and columns, unfolding columns,
view more break, tool tips, section particles
(and actually with the help of section
particles we're going to be creating
this snowfall effect today) and elements
satellite and the hotspots and all of
these are animated, done with really
clean code and fast loading (are super
fast loading) and you can get this JetTricks
add-on for Elementor if you
follow the link in the description under
this video. Let me switch back to
Elementor and show you a couple of
preparation steps that you need to do
before you start creating your particles.
So first go to the section settings or
you can also right-click on some empty
spot and go to edit section. So here you
need to enable this stretch section
option and in the content width
choose full width so your section takes
up all the width of your page. And
there in the height you go and choose
minimum height so you can change the
height of your section manually. So
I actually wanted this section to take up
all the width and all the height of this
part that the user sees on the screen.
And actually if you scroll down there's
a really great
Elementor page template and you can also
learn more about how to get this one for
your website if you follow the link in
the description under this video
so now still staying in these section
settings go to Advanced tab and once
you have installed JetTricks plugin you're
gonna have the JetTricks tab right here
so you open it and you have one single
option in there, it's called enable
particles and you enable this option and
what you've got here is the empty field
and you don't have to do anything there
just yet and you have a little note: "paste
your particles JSON code here generated
from here" and don't be afraid you will
not have to deal with any code because
everything is done with this visual and
really beginner friendly particle
creator so first off let me go ahead and
switch this card off so it doesn't
distract us from creating particles and
we'll go to page background and enable
the hide card option there you have the
background color property and I'm gonna
go ahead and change the background color
and changing the background color in
here
doesn't affect the background color
of the section on your website. you're
gonna go and change the background color
of your section on your website from
your Elementor page builder. I'm
changing the color here because I want
to see how it's gonna look on my website
and let's let's choose the one that is
close that is close enough and let's
close the page background tab. so we have
the controls in here and everything will
be done from this little window and
let's go from bottom to top and on the
next tab we have what is called interactivity
so we're interested in two tabs in here
on hover and onclick. how the particles
are going to react to your cursor now
when you're hovering the next to the
particles they kinda... they're gonna be
pushed away from the cursor and when I
click you see that you know they just
shoot out from the tip of my cursor and
I don't want my snowflakes to do any of
that
so I go to onhover tab and I
disable and unclick I'll disable so now
whatever I do with my cursor nothing
happens to the particles. next one. we go
to the particles and the first tab from
bottom we have is called "move" so there
of course we want to enable our
particles to move and the direction
we're gonna choose bottom so they're
falling from top to bottom and we'd also
like to randomize them a bit if you
choose the straight option they're gonna
go like in one axis strictly in y-axis
and they're not gonna move to the sides
even a bit you know if you disable it
they are kind of twirling and it looks more
natural
so here you can change the speed I'd really
want to crank this up to nine or
something and the out mode you know you
can also make them bounce from the
bottom edge of your screen but if you
want the natural effect we're gonna
choose the out option now line linked
let's disable it because I don't want my
snowflakes to be linked to each other
and let's close this tab in the opacity
I like it to be 0.75 like so and if
you enable the random option it's gonna
randomize the opacity of your snowflakes
so we can actually go to 0.9 in here so
if you want to animate the opacity
property you can also do that but we're
not really interested in that for the
snowflakes and here in the size tab you
can change the size of the snowflakes
now it's set at three but you can change
it to two or maybe five but I guess that
is gonna look fine at two
so now in the shape tab we don't really
have to do anything because it's set as
circle that's what we need. in the color
it's like two pure white and in the
number we can actually crank this up to
say 800 so we have really a lot of them
and it looks like a really heavy
snowfall and there we can actually
change this value to 900 so it looks a
little more intense and that's actually
pretty good so far and in the size tab
what we're gonna do is to check this
random option so it randomizes the size
of the snowflakes and it also adds the
realism to our snowfall right and in the
value 600 is maximum I see and I'll show you
later if you're a more advanced user you
can change that in the field in the
Elementor. all right we're done in here
we have created our snowfall now we need
to export it and simply paste it in the
Elementor so what I need to do is to
download current configuration in JSON
format so here it goes and you open it
with your notepad or any other text
editor that you have on your computer
and you go back to Elementor and there
in the jettricks tab in the particle
json field simply paste the code that
you have copied from the json file as
i've said if you're a little more
advanced user you can go and see all of
the properties that you have changed and
adjusted there in the particle creator
but there they're simply set as property
and value property and value so if you
want to have even more snowflakes you
can change the maximum 600 value to say
seven hundred or a thousand
all right so this is pretty much it for
this tutorial on how to create a
snowfall effect with the help of Elementor
page builder and jettricks plugin if
you want to learn more about jettricks
follow the link in the description under
this video and if you want to get this
really great looking Elementor
WordPress theme just follow the link in
the description under this video and in
this tutorial I've been working with
Monstroid 2 WordPress theme and you also
need to check this out if you want to
get all of the jetplugins which is more
than ten of them all in one package and
dozens of skins that are being
constantly updated so I thank you for
watching and I hope you like this video
[Music]
