Stunning Elementor PRO Tutorial: How To Create 3D Parallax Holographic Illusion
Hello! Do you want to create an amazing hero section for your WordPress website? Today, I’ll show you a bullet-proof way to make the top section of your website’s Homepage engaging and attractive with Elementor Pro.
In a couple of steps I show you below, you can create a 3D Parallax Holographic Illusion that looks very cool. Here’s an example of what you can create:
Now, let’s get started!
Need Graphic Elements for your projects?
How To Create 3D Parallax Holographic Illusion
Step #1
Open up your Homepage with Elementor Pro. Add a section made of two columns using visual tools.
Step #2
Now, you add a background that you’ll use for your hero section. Add an image to the left column.
Step #3
Now we need to move this image to the right. I’ll move not the image itself. Instead, select the column that holds the image.
Go to “Advanced” and switch to “%” (percents) next to “Margins”.
NB! Always switch to percents (relative value) from pixels (fixed value for all screen resolutions) in order not to break the responsiveness of your website.
Next, unlink the “Margins” values and set the values to move the image to the right.
Step 4
Now, add a header element to the column on the right. Adjust the styling, text size and align of your text.
Next, move the heading to the left the same way you moved the image to the right earlier. So, select the right column and go to “Advanced”. Switch to “%” and unlink “Margins”.
Set the values to move your Heading widget to the left.
Step 5
It’s time to add some animation and depth to my elements. For now, I work with the heading and the image. I’ll add the button later on.
Select the Heading widget you created earlier and go to “Advanced” settings on the left. Go to “Motion Effects” section and enable “Mouse Effects”. Next, enable “3D Tilt”. Leave the “Direction” and “Speed” of the tilt as default.
Now, I enable the same effect for the image widget. Select the widget and enable “Mouse Effects” and “3D Tilt” under “Advanced” tab.
Turn the “Speed” of the 3D Tilt down to 3, as the image in the background should move a little bit slowlier.
Step 6
In the advanced settings of the Image widget, enable “Mouse Track”. Do not change the direction and speed of the effect!
Next, select the Heading widget again, go to “Advanced” and also enable “Mouse Track”. To add even more depth to your 3D Parallax Holographic Illusion, change the direction of “Mouse Track” to “Direct”. You may also want to increase “Speed” value for this element.
Step 7
It’s time to add a button. Create a new section, add a Button widget there. Adjust the styling of the button to match the rest of your 3D Parallax Holographic Illustration. Make the button circular. Watch this video tutorial to learn how to make your button circular + 8 additional Elementor button styles for you.
Step 8
In this step, I’ll move the button up. Select “Button” widget and go “Advanced” -> “Positioning”. Set “Width” to “Inline (auto)”. This turns your widget into a neat easy-to-move square.
Next, set the widget “Position” below to “Absolute”. This allows dragging your Button widget up. Switch to “%” and add an offset for the button to move it to the right a little bit.
Move your circular button up by adding an “Offset” next.
Step 9
It’s time to add the motion effects.
Turn on “Mouse Effects” and “Mouse Track”. Change the “Mouse Track” direction to “Direct” to match the effect you previously applied to the Heading widget. Next, enable the “3D Tilt”. You can optionally adjust the speed of the effect.
Wrapping Up
Congratulations! You’ve created a cool hero website section with 3D Parallax Holographic Illusion.
Of course, you can play around with the styling for a one-of-a-kind look or use a video background to make your website’s Homepage even more engaging!
If you want to check the process of creating this cool hero section in detail, check out this step-by-step 3D Parallax Holographic Illusion video tutorial. It covers the tiniest details and extra options that you have.
Do you create websites with Elementor Pro?
Create your next WordPress website in days with a quality ready-made Elementor WordPress theme. Drop by Elementor Marketplace to discover the best Elementor Pro themes, templates, and plugins available to supercharge your WordPress website with unlimited functionality and robust UI elements!
Have you enjoyed this 3D Parallax Holographic Illusion tutorial?
If you have any questions or comments, do not hesitate to share them below!
Stay tuned for more!
