Elementor - Add a Parallax Hero Section with No Plugin and No Extra Codes

[@mooltech]

Just 14 hour ago someone post about this in elementor community. And cool here it is just wow ☺️

[@websquadron]

Yup - thought I’d create something as they were mostly referring to plugins and I thought - no this can be done for free ;)

[@JanesBlignautInHD]

I waited so long for this, thanks guy!

[@bySterling]

Parallax has been a single fav style to build into sites going back to the Adobe Muse web design days!

[@websquadron]

When it's done right, it can be so beautiful :)

[@maityweb427]

Daily i learn something new from you... Thank you ❤❤❤

[@WickyDesign]

Great tutorial! Keep up the good work!

[@websquadron]

Thanks, will do!

[@anupkaushik9370]

thanks for valuable tutorial , these images made in canva , you taught the valuable use of canva

[@Pedant_Patrol]

Great video as usual. May I recommend showing the final effect you're trying to achieve at the beginning of the video. Just a few seconds would do. Will help with the intrigue factor, as allow viewers to see if what you're building is something they want to learn.

[@websquadron]

Do you know what - that was meant to happen and I forgot to add it as an overlay :(

[@Pedant_Patrol]

@@websquadron- aha! happens to the best of us, I suppose.

[@websquadron]

@@Pedant_Patrol As soon as you mentioned it, I smacked my head! Added a URL into the description which isn't great as a preview, bur serves me right for rushing to get this right. My bad :(

[@CalebBennett07]

FANTASTIC tutorial!! Thank you

[@UrielSoto]

That looks so cool!

[@websquadron]

Was easier to do once I got my images laid out before in Canva

[@SvenSchlau]

Awesome work dude! Thanks for sharing your skills

[@raoulshah]

Great tutorial, thks 💪🏽❤️👍🏽

[@websquadron]

You’re welcome 😊

[@sonythomas8188]

Thanks Man..

[@ziehhoch]

Very nice, thank you for sharing. Unfortunately the video title suggests everything would come for free. Unfortunately, your approach requires Elementor Pro - it would be good to mention this in the text somewhere.

[@websquadron]

The cover does show Elementor Pro, and if I'm ever showcasing a video that can be done just EL Free then I state Elementor Free in the title. Please do see other videos with Elementor Free in the title.

[@joshthill3330]

Thanks!

[@ayushmanjena5362]

this is lit bro

[@DavidBenamou]

Very nice. Next time add some Lottie files ... and a scroll effect on the whole section. It could be fun

[@websquadron]

Of course :) This was stage 1 - but yes, I’ll be adding further so what happens below etc and can we get more going on with it :))

[@answer4274]

Great video

[@websquadron]

Glad you enjoyed it

[@mehdishamsedini210]

tnx bro

[@shelleymontreuil9907]

Your overlaid image (image #2) is full width ... how did you do that?

[@shelleymontreuil9907]

ahhhhhhh! never mind! SECTION: Content Width: Full Width Columns Gap: No Gap 😆 Thank you for the video!

[@websquadron]

That's it :) Sorry for the late reply.

[@ChAhsanAli1]

Hi, Can you please start adding perview of finish effect/result in starting 20 secs. so people who don't understand terms like parallax , can decide to watch it or not. Thanks

[@websquadron]

I forgot to do that - will add it now

[@tomfraser3086]

Love your tutorials how about this same subject in Kadence Pro ?

[@websquadron]

Sorry, I don't use KPro.

[@thewebstylist]

Luv Parallax 💯🎉💪🏻💥🕊️ Curious if you know bro a way to have a wide timeline image horizontally scroll left to right fixed then when hit end of image the row scrolls up? I can’t figure out no matter what I try (or tried Premium AddOns Pro but the image is trapped in the column)?

[@websquadron]

There was some JS that Elementor had that - kzbin.info/www/bejne/rZ2koJSCgpdqaLs but.... not tried with ensuring that you can scroll down afterwards.

[@InvestWithGirish]

Hi Sir, Why my elementor(free) not have these options

[@websquadron]

Which ones are you missing? Note that I am using Elementor Pro

[@InvestWithGirish]

@@websquadron motion scolling

[@websquadron]

@@InvestWithGirish You'll need Elementor Pro.

[@InvestWithGirish]

@@websquadron thanks

[@cryptosir2025]

When I use the elementor Parallax it makes my page load with the images in the wrong place then when I start scrolling they go to the right position. Do you know a fix for this?? it's super frustrating..

[@websquadron]

Are you setting them as absolute positioning?

[@arifrimel7917]

How may i download images that you use on tutorial?

[@websquadron]

I don’t often have them available but I will revisit this soon

[@HarisKhan-ln7zy]

how do you upload webp images on wordpress?

[@websquadron]

Just add them to Media Library. Are you getting issues? Check with your Host Provider.

[@MrBitLearner]

I can't print pages made with Elementor with background image or color. Printing in black and white. Even after turning on the background image from the print option. Please make a video on it. Or please make a video to generate PDF in Unicode font while submitting JetEngine Form.

[@websquadron]

I'll check.

[@MrBitLearner]

@@websquadron Thank you.

[@lorenzimedia]

But only in Elementor Pro!?

[@websquadron]

I have to be honest that I can't recall if Scrolling Effects is purely Pro or available in Free. Can you see it in Free?

[@lorenzimedia]

@@websquadron No, all Scrolling Effects are not in the free Version. 😓

[@websquadron]

@@lorenzimedia Thought so. I was just about to test by deactivating my Pro. You'll have to resort to a plugin. To keep your site clean of conflict, I do recommend getting Pro rather than using multiple plugins.

[@Thecollekter]

looks great on desktop, but a major headache on anything else.. no thanks

[@websquadron]

True.