Hi everyone! in this quick video, I'm
going to show you how to create a
similar cool-looking 3d effect for your
hero section or for any other type of
section you want to apply this
effect to. And we're going to create it
with the help of Elementor PRO motion
effects, so unfortunately you will not be
able to create this exact effect, if you
don't have the Elementor PRO. So, you
guys requested more tips and tricks,
especially for the motion effects. So, the
other day I came across this
cool-looking website and it's a lot of
fun to explore, and I'm going to leave
the link in the description so you can
check it out yourself. And what
interested me in particular is this hero
section and this... this button, and
unfortunately it's not that easy to do
with the Elementor PRO only and with
no additional JavaScript and stuff, so
we're not gonna dive deep into that!
We're only gonna focus on creating this
3d Parallax thing which creates this
three-dimensional effect. Like, you have
all of these three elements on a
different plane, on the z-axis, but in
fact, there are simply flat images and
you can achieve that using the Mouse
Track effect in Elementor Pro. All right,
let's just dive right in in the tutorial
and see how we can create this effect
ourselves. So, it's actually turned out to
be much quicker than I expected, so I
think we're gonna start with creating
the columns first. Well, I have prepared a
little header in here, and here I'm going
to create a section made of two columns,
and in the column on the left will be an
image, so we're gonna drop an image in
here. Select the image real quick, the
size doesn't really matter in here. It's
just up to you, the image dimensions
can be also different, but what we need
to do is - to go to this settings of the
column and move it to the right, because
we will need to make our image and
our heading element in here overlap. So,
how are we gonna do that? I'm gonna go
to advanced -> switch the percents. Also, try to avoid using pixels because they are
absolute value, while percents are a
relative value. While using percents is
going to improve the ability of your
page to adjust to different screen sizes.
So, what we're gonna do here is unlink
all of these values and set the
following values. Also, for your own page
and for your own elements the values
might be different, but I'm just going to
use these as an example. So, this is
how I moved my image to the right of the
page. Now, what we need to do is to add a heading.
I'm just going to change the color and apply this style settings real quick.
The settings might be different
for your own project. As always, it's up
to you, it's up to your own idea and
creativity. So, we're done with the
heading with this title here. Now, we're
gonna move the column to the left by
using negative margin again. And I'm
gonna add the following value in here.
So, let's check it. All right, looking good!
Only need to go to the settings of the
column again, and change the
vertical-align to middle. All right, we're
pretty much set, and I think we're gonna
start with the two of these elements, so you
can grasp the concept, and then we're
gonna add the button - the additional
element - later. All right, so let's start
with the text element, and all you're
gonna do is to go to the settings of the
widget this time. Not the column, but the
widget itself, the heading. And doing some motion effects, and I'm gonna enable the mouse effects.
And first what we're gonna do is enable the 3d tilt and we're gonna
leave it as default just for now. It's
gonna be fine, and you see what this is doing.
The heading is now reacting to the
movement of your cursor and according to
your own idea, and your own vision, you can change it to the opposite and it's gonna
give you a little bit different effect.
But in fact, it is pretty much the same
thing your element reacting to the
movement of your cursor. For now, not much
is happening in terms of the Parallax
effect, but we're going to get there now.
Let's enable the same effect for the
image. We're clicking on the Image widget
-> Advanced Motion Effects, then Mouse Effects and 3d Tilt, too.
So, you can see this is what it gives us. But what I would do here is
leave these settings as default
directions to direct... direct direction.
And the speed - I will tune it down to
'3', just because this image is
supposedly in the background. So, it's a
little bit behind this element. So. there
has to be some space between them in the z-axis. So to create this illusion, we
will need to tune down the speed of the
3d Tilts a little bit. Still, not really
looking like there is much space between
these two elements. Now, to make it a
little bit more apparent, we need to
enable the Mouse Track. Still being in the
settings of the image, go to  Mouse Track,
and just... just click on 'Enable' and this
is what its gonna give you Opposite and
'1'. These are, well, so-called default
values for this particular element, so
Opposite and Speed at '1'. Well, it is
already looking like something, but this
element - the heightened element - is still
not moving, and we still don't have this
3d effect on the heading here. So, enable
Mouse Track for this one, too. But in
order to make this illusion - they are
are quite far apart from each other. We
need to change the direction to 'Direct'.
We need the direct direction here, and
speed - I'd leave it as '1', but I would
encourage you to play around with the
values for the speed for both of these
to figure out what suits best. Your own
composition and your own idea, but for me
this is what worked out the best. So now
you can see that we have some space
between these two elements, and it really
creates this dimension and this illusion.
That they are really in 3D space, so this
is what we've got so far. And I would
actually end this tutorial - just on
this note, just right at this point,
but I decided we would add one more
element in here, cuz in our original
reference - there was this cute little
button. I think it's kind of the same
plain as the text, but we're gonna see
and we're gonna try and play around with
it, and see what we can come up with. So,
in order to drop this button somewhere
around here, what I would do is create a
new section and let's look for the
button widget. Here it is, drop it in
here, just gonna quickly give it some
cell settings, so it looks kind of the
same as our heading, and the rest of the
elements in our composition. Well, what I
also wanted - to make it circular. Here it is.
By the way we have an entire video
devoted to different button styles and
there we have also covered how to create
a circular button. So, if you wanna check
it out - just find it on our YouTube
channel! There is a ton of ideas for your
button styles, so you can definitely
find something to your taste! Right now,
before we go to the motion effects for
this particular button, we actually need
to move it up a little bit, so it is on...
It seems to be in the same area, in the
same hero section as these two elements. So, what we gotta do is to get to the
positioning tab here and in the Width, I
would set it to 'Inline', so it cuts this
really unnecessary space, that this widget
takes up. All right, now in the Position,
we'll set it to 'Absolute', and this is
gonna allow us to drag this widget
around and place it wherever we want to.
Just be careful with these settings for
your mobile devices and stuff like that!
And keep in mind that it's not always
gonna work properly in mobile devices,
and you might take extra time to tweak
these values for the different devices -
like for the tablet devices and for the
mobile devices, and definitely here as
well. These are only the relative values,
not the absolute values like pixels but the
relative values-  per cents - V W and V H.
And if you guys want us to do a video
explaining all of these and how they
work in Elementor and with Elementor
elements and other settings, just let me
know in the comments down below.
So, here I'm going to use the following
values and move this object up a little
bit. So, here it's kind of where I want it
to be. Now, let's proceed to add in the
Motion Effects like Mouse Track, and if
we want to make it look like it's around
the same plain with this text element.
Let's just set it to 'Direct' here and the
3d Tilt. Now, I'll leave it as it is but
maybe increase the speed by one, or yeah
something like that - I think it's looking
good for now. Maybe even now '6' is like
way too much. Okay, let's close it and
have a look. Alright, this is pretty much
it - we have achieved the exact same look
as on our original reference. And now you
know how to create a similar look yourself.
And you can try and experiment
with it - play around with the values and
see what you can come up with. So this
was pretty much it for this video, and if
you want to learn more about new
interesting Elementor techniques and
design ideas - check out our YouTube
channel! Also, if you haven't heard of
TemplateMonster Marketplace - it is the
right time to Google it, and go to our
website and see what we have to offer in
terms of WordPress themes, WordPress
plugins. And yeah, since you are on a
channel devoted to Elementor and
WordPress, I assume you're interested in
WordPress! So, have a look at our
WordPress themes! And also we have a ton of products for other CMS and other
platforms. So, if you need something like
illustrations, graphics, maybe product
mock-ups, maybe fonts or something like
that - you can also find it in here! And if
you're interested in buying in bulk -
there is also an option like that called
ONE subscription by TemplateMonster. If
you want to learn more about all that, or
one of those in particular - check out the
links in the description or click on the
linked just in the flying card somewhere
in the right hand upper corner. ↗️↗️↗️
That's it from me for today! Thank you so
much for watching! I hope you found this
tutorial useful and interesting. And you
can apply what you learned today in your
own work! See you around!
