Create 3D Image Effect with Elementor Pro Motion Effect

Let’s compare two images with and without 3D Image Effect that we achieved with Elementor Pro Motion Effect: 

without the Motion Effect
with the Motion Effect

As you see, the objects in the picture became movable – it seems that they are moving with a change of perspective. There is the “being there” effect – the viewer becomes the participant of the mise-en-scene. The picture becomes more dynamic and looks stunning, indeed. 

Why and where to use the 3D Image Effect? 

As we already stated, a 3D image looks impressive – you can spot some deepness in the image. 

Plus, the appearance of the website can affect expertise. A thoroughly created website gives the impression that the owner is serious and indeed cares about his business, blog, project, eCommerce store, etc. Thus, investing in design makes sense. 

Of course, such effects might slow down the work of the website – better not to bring too many of them. Besides, there are some effective ways to optimize the website for speed, which is important in terms of UX and SEO. 

The place to add an effect is another question. The motion effect is good for the presentation of products or in those places, where visuals play a significant role. It works well with product showcases and looks good on the landing pages.  

If you haven't created a landing page yet, you can do it in a matter of clicks with splendid Elementor landing page templates.  

Now, let’s figure out how to create this effect without much of a hassle. 

How to Create a 3D Image Effect with Elementor Pro Motion Effect Fast 

To create an effect, you need: 

  • a WordPress website;
  • Elementor Pro. 

If you still don’t have a WordPress theme, you can find dozens of awesome options on the Elementor marketplace. Once you purchase, download, and install it, it will appear on the builder’s dashboard. 

Now, go to the page and section you want to have a 3D image. Since this method won’t work with the Image Widget, you need to set the image as a column or a section background. Go to Style > Background > Choose Image

To set the column background, we need an object inside the column. Go to Elements > Spacer, drop it in the section with an image, and adjust such parameters as height, margin, etc. for a better view. 

As you see, working in Elementor is super convenient but if you hadn’t familiarized with the builder yet, here is its detailed Elementor review that reveals its working principle, strong and weak sides. 

Now, let’s work with the properties of the background image and activate the effect. Here, enable Mouse Effects and Mouse Tracks, set the Direction to Opposite and crank the Speed up to 3. Here is what we’ve got: 

So, we’ve applied motion effects to the background image of the column, but we can also apply it to the column itself. 

Go to Advanced > Motion Effects, enable Mouse Effects and Mouse Tracks, and set the Direction to Different. The direction here should be different from the direction that we set to the column background. Now, enable 3D Tilt and speed it up to 3. 

This is what we get when overlaying multiple motion effects (motion effects on the background image + on the column itself). You can experiment with the direction and see how it changes: 

You can also apply motion effects to a section background, but be careful with sections with a text because it might simply spin out of control. Plus, the entire picture might look messy, and the text might be hard to read. 

A couple of final touches and a stunning 3D picture will show off on your website. 

To watch the process of customization “live”, check out the 3D image effect video tutorial. 

If you need anything for your website, let’s say you want to change its appearance, check out the marketplace with such high-quality products for web design as personal website templates.

How to use a product after purchase? 

Elementor Page Builder makes all stages of the website customization intuitive, fast, and user-friendly. Apart from a drag-and-drop nature, it carries out some operations for you. 

For instance, when you download and install the product, it automatically appears on the dashboard – ready for edit. Thus, you don’t have to worry about this technical hassle – focus on the creative part of the process:)

So, we went through the process of applying the Elementor Pro Motion Effect to create a 3D image effect, and, hopefully, this tutorial was helpful.

Since high-quality and relevant visuals are super important, it’s always good to diversify them, and adding some dynamics is an awesome option. If you have any questions, feel free to leave comments and stay tuned for more tutorials! 

If you looking to try some Free Elementor Templates we have the best collection for 2020, all the templates are compatible with Elementor plugin and you can use the 3D effect.