Articles, Blog

3D Parallax Phone Effect with Elementor Pro Motion Effects | TemplateMonster


Hey you guys! Today we’re making this
3D-ish phone with Parallax effect. It can be done with pretty much any background, any phone color and almost any kind of image or screenshot. You need Elementor Pro, a phone mockup
and an actual app screenshot. No Photoshop or any other software is required because
we’ll use a free web-based tool to prepare our assets. And in case you need a phone mockup, chances are you’ll find something you like at templatemonster.com where I actually got the one I’m using in this video. So that’s it. Let’s start with the assets. We’ll use
the free online tool called Photopea. It’s super easy to use because it’s so similar to Photoshop. But of course you’re free to use any other tools. So, let’s drop a PSD
file with the mockups we download here, delete all the extra stuff like shadows and
reflections, and delete the screen container. Now, let’s change the dimensions and the size of our mockup. It means that I need to change the canvas size. I’ll go for the following
values and in your case, they might be different but it’s important that you memorized to aspect ratio because our screenshot will need to have the same ratio and change the color of the placeholder to white. And if you’re wondering Why we need the white backgrounds and couldn’t just export the mockup with transparent screen, here is why. We will have a closer look
at how it works later in the video. If you have a gray or almost white phone mockup or phone or any other color, also set placeholder color to white. We’re done with the mockup. Make sure it has no background and save it as PNG. When saving, I can even pick a bit smaller image size. It won’t hurt cuz we don’t need the mockup to be super sharp unlike the screenshot. Now, the image is saved, let’s bring our screenshot in the same project file. You can edit your
screenshot in a separate tab, but to remember that you need to preserve the same aspect ratio. Scale it up a bit, so the contents are closer to the edges and save it as JPG or PNG. Here we go. We got our assets prepared. Now, the simple part is left – putting it altogether in the Elementor editor, I’ll jump to my page and create a
new section, I put some content on the left just for the context. Adjust the height of
the section and set the vertical align inside the column to ‘Middle’. Now it’s time to bring in the phone. I’ll drop an inner section here and delete the second column. So it looks
just like that. Why? Because this way we’ll be able to create multiple layers of motion effects for our object. I know that’s not the best practice to use a lot of inner sections across your page, because it makes the page structure more complex. But if you do it
once, it won’t ruin your site. So, there we have our container for your phone. And to add the mockup, I’ll go to the inner section settings ->”Background Overlay”, bring in the phone PNG, and bring up the opacity. Set the following values for the ‘Position’ and ‘Repeat’ and
for the ‘Size’ – select ‘Contain’. Now we’ll add our screenshot. Go to the background tab, upload your image, by the way, make sure you optimize images on your site and set it as
the ‘Section Background’. Now it’s there but the mockup is covering it. To fix that go back to ‘Background Overlay’ and set the ‘Blend Mode’ to ‘Multiply’. Now all the areas of
the mockup that are completely white become transparent. Now we’ll adjust the background image properties the following way, just like we did with the mockup, but the size option to pick is not ‘Contain’, but ‘Custom’. This way we can tweak the size of the image so it fits perfectly
inside the phone frame. Now, adding the motion effects to the background image, we’re still in the settings of the inner section background image. And let’s enable the ‘Mouse Track’
and change the speed to 0.6. This is what we’ve got. Now, you could think: “Well, let’s add motion effects to the inner section to make your phone move”, but we don’t have this option here. But there is a workaround! Go to the settings of the parent column ->Advanced settings ->Motion effects and enable ‘Mouse effects’. Turn on the ‘Mouse track’, change the direction to direct and bring the speed down a little bit. Next 3D tilt. Leave it on ‘Direct’,
and set the speed to around 2. There it is! Now you’ve got your fake 3D phone effect. Play around with the values and figure out what works best for you. The process is completely the same for any other background and for phones of other colors, and if your phone
mockup is of a different shape and you can see the screenshot edges peeking out, just adjust the screenshot size so it fits inside the phone frame. Well, that is it. That’s how we create this effect with Elemento Pro and Motion effects. If you like the video, thumbs up
and some nice comments are appreciated! Subscribe and leave a request if you want more tutorials like this one, and if you’re ever need something to speed up your creative process there is
templatemonster.com with hundreds of WordPress themes for Elementor, and other design assets like phones, illustrations and more, and even a collection of Elementor WordPress themes for your app! And I thank you for watching! Hope, you liked the video, see you in another one!

7 Comments

  1. Agnes S Author

    this is great, but can you do such an effect that you can see Video on full screen and when scrolling the video page decreases and appears on the phone? Such an effect more or less as Apple used on its own website advertising the iPhone 11 Pro

    Reply

Leave a Comment

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