3D Parallax Holographic Illusion with Elementor PRO Motion Effects FAST & Easy | TemplateMonster


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!

One Comment

Add a Comment

Your email address will not be published. Required fields are marked *