Whether you like it or not, starting a website might be challenging if you don’t know where to go. Not today though. Today, I suggest you take the easy way out. Here is a small Elementor Pro tutorial of designing a website with hero section scrolling and motion effects. All in all, learning how to start a website with Elementor is always a smart decision. To get even more inspiration, head off by creating a portfolio with Elementor builder how-to guide.
Do you enjoy a flawless scrolling effect when browsing websites? Sure, you are. Want your website to look super fancy, too? A piece of cake. That’s where my guide below would be a nice extra. I’ll tell you how to make that smooth hero section scrolling and motion effects with Elementor.
Reality is, in 5 easy steps, you’ll be able to give your website a super fancy look. Don’t know which template to go with? No worries, the list of the best photography WordPress themes would be just a thing. So, once the choice is made, open Elementor editor, and let’s get started.
Step #1: Warming up
So, go to the Elementor editor and create a section.
To make the effect work on mobile devices, set the Fit to Screen height. I recommend you to set the Minimum Height option and set the VH to 100.
Step #2: Set the Background Image
I don’t think there’ll be any problem here. Go to Style and select the image you want from your computer. Now, play around its settings such as the position (center), size (cover), and attachment (fixed). As a result, our image will stay still on the background while other elements scroll.
Step #3: Add the Scrolling Effect
First, start with the Transparency section. Click on Transparency -> Direction section -> Fade Out. Now, set the Viewpoint. As such, 52% for the first slide and 80% for the second one. After that, go to the Blur section -> Direction -> Fade Out -> Level (set the level of blur you need) -> Viewpoint.
Second, go to the Scale section to make sure that the Direction is at Scale Up. Now, when the Viewpoint is 52/80%%, set the speed (3 or 2).
At this point, I’d like to make the effect even smoother. Well, you can do the same. So, I go to the Settings -> Style -> Body Style. Here, I’d like to change the body color so that it fits the color of my other section’s background. It will make the transition between the sections more flawless and discreet.
Step #4: Adding the Heading
To create a hero section scrolling effect, go to Elements menu -> Heading. Once you’ve added the heading to your page, it’s time to edit it. Get creative, change the title, and add a link if required. Now, go to Style to change the color, size, and font. Once it fits your entire website design, align it to the center. Okay, the choice is yours, so a bit of experiment never hurts.
Now, when you go to the Advanced Settings -> Positioning -> Fixed, clicking the Offset and setting it at 45 will make your heading fixed. But there’s a trick. If you visit the mobile version of your site, you’ll see that this setting doesn’t work. No worries, though. You just have to create two versions of headings. So, go to the Advanced Settings -> Responsive and click the Hide on Tablet as well as on the Hide on Mobile.
To create the heading for a mobile version of the website, go to Positioning -> Default. In the Responsive section, click on Hide on Desktop.
Step #5: Adding the Motion Effect
Before you can even start thinking about adding motion effects to your website, there’s one important thing to consider. Adding motion effects makes a mobile version of the site cluttered and difficult to navigate. As a result, it annoys the user, and he/she is more likely to leave it with no reason to return. Anyway, you can try and see the result.
So, for that reason, I’m going to create motion effects for the desktop version. First, go to the Advanced Settings -> Motion Effects. Now, do the next:
- click on your header
- open Advanced Settings
- set the Z-index to 50 to make this section appear on top of the other sections on the page.
After that, follow the next path: Motion Effects tab -> Sticky -> Top -> Sticky On -> Desktop. Here click on Responsive -> Visibility and switch Hide on Tablet and Hide on Mobile. Soon after that, play around the color of the heading to match the color of your background. Finally, you’ve got a hero section scrolling effect as you wanted.
That’s it for now. As you see, no matter what type of website you need to create, Elementor makes this journey super easy and exciting. Afraid not to experiment and get creative. Remember that there’s always room for improvement, and Elementor keeps that door open. Satisfied with your smooth hero section? Got any questions? Go on and leave me a comment.