Hey guys! Wanna learn a super simple
trick to achieve this 3d image effect?
Here is the image without the effect and here is the same image with the 3d effect.
Already excited? Let's get started! So what do we need? A WordPress website and a PRO
version of Elementor page builder. I
haven't installed a theme yet, though.
So, I'll go and get one at templatemonster.com. I need something cool with a lot of
images. This one! Installed it, opened the
page in Elementor, found a suitable
section to work with. Now, let's get to
the fun stuff! You'll need to set the
image as a column or a section
background, because this method won't
work with the Image Widget. Let's work
with the column now. To see the column
background, we need an object inside the
column, so I'll drop a spacer in there
and adjust the height. I also adjust the
margins of the section, so we'll get a
better view of it. Now, I'll set the
properties of the background image and
finally click on the Motion Effects
option here. I'll enable the Mouse Track,
set the direction to opposite and crank
the speed up to 3. Here's what I've got
so far. Now, this was the effect that we
have applied to the background image of
the column, but we can also add motion
effects to the column itself. Now, let's
go to the Advanced Settings and find
Motion Effects. Let's enable this option,
go to Mouse Track and set the direction
to "direct". The direction here has to be
different from the one that we have set
for the column background. Next, let's
enable the 3d tilt. Let's set the speed
to 3 and see what it looks like. So, this
is the effect that we were after! This
sort of a "fake 3d effect" is achieved by
overlaying multiple Motion Effects. The
Motion Effects of the background image,
of the column, and the Motion Effects
that were applied to the column itself.
In the Advanced Settings, you can play
around with the values to get different
effects, but you shouldn't go too crazy
with it. But you can definitely
experiment with the direction, and see
what you can come up with. As I've said,
you can also apply this effect to the
section backgrounds. But my
recommendation to you - don't apply this
effect to the sections that contain some
text, because it just gets out of hand. So,
I hope you liked today's tip and if you
need anything else for your creative
process, you can get it at templatemonster.com
templatemonster.com which is pretty much a supermarket of
digital products for designers and
developers. If you need anything starting
from a WordPress theme to new fonts, or
illustrations, or graphics or product
mock-ups, you can get it at templatemonster.com, and you can check out the
link in the description down below 👇👇👇 Thank you so much for watching, guys!
Experiment, stay creative and I'll see you around!
