Elementor - Add a Parallax Hero Section with No Plugin and No Extra Codes
ฝัง
- เผยแพร่เมื่อ 1 มิ.ย. 2024
- I forgot to add a Preview before the video, but here's a quick video of it: • Parallax Preview
Parallax Effects are wonderful for Websites, especially Hero Banners. Let's add a vertical scrolling effect using unique images.
00:00 Intro
00:16 Canva for Image Creation
01:00 Colour Scheme Palette coolors.co/
01:59 Image Layers (Transparent Background)
03:14 Canvas Size for the Images
04:03 Freehand Drawing in Canva
04:36 Optimise your Images
04:55 The First Elementor Section
05:52 1st Image Added (The Sun)
06:43 2nd Image (Clouds)
07:08 Absolute Positioning
08:15 Vertical Scrolling Effect
08:45 Positioning Vertical Effect
09:10 3rd Image (Mountain 1)
10:58 4th Image (Mountain 2)
11:42 5th Image (Birds)
12:32 6th Image (Mountain 3)
13:45 The Second Section
14:52 Preview
15:26 Add a Header
16:14 Fixed Positioning
17:46 Add Content to the Second Section
19:13 Mobile View
20:00 Outro
I forgot to add a Preview before the video, but here's a quick video of it: • Parallax Preview
Elementor - Add a Parallax Hero Section with No Plugin and No Extra Codes
Music used:
Track: Will You Be Mine (Remix)
Free download: brokeinsummer.com/will-you-be...
Artists: brokeinsummer.com
Contact: brokeinsummer.com/help
Music provided by Audio Library Plus
- Get Elementor Pro here --- trk.elementor.com/license
-- Of course, we're affiliated to them, but it helps to pay for resources to keep creating ace content for you :)
-- Book an Appointment/Consultation: calendly.com/info-28542
-- LinkedIn: / imran-siddiq-7320a74a
-- Instagram: / batswebsitedesign
-- Twitter: / imranwebsites
-- Facebook: / websquadrontraining
PS: websquadron.co.uk
PPS: Contact us at info@websquadron.co.uk
PPPS: We only build with Elementor Pro - แนวปฏิบัติและการใช้ชีวิต
![แข่งแลกของ 1 วัน!! ของใครแพงสุดชนะ!! [Ver.2024]](http://i.ytimg.com/vi/joRT59ilPHg/mqdefault.jpg)
I waited so long for this, thanks guy!
Daily i learn something new from you... Thank you ❤❤❤
Awesome work dude! Thanks for sharing your skills
FANTASTIC tutorial!! Thank you
thanks for valuable tutorial , these images made in canva , you taught the valuable use of canva
Great tutorial! Keep up the good work!
Thanks, will do!
Parallax has been a single fav style to build into sites going back to the Adobe Muse web design days!
When it's done right, it can be so beautiful :)
That looks so cool!
Was easier to do once I got my images laid out before in Canva
Just 14 hour ago someone post about this in elementor community.
And cool here it is just wow ☺️
Yup - thought I’d create something as they were mostly referring to plugins and I thought - no this can be done for free ;)
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.
Do you know what - that was meant to happen and I forgot to add it as an overlay :(
@@websquadron- aha! happens to the best of us, I suppose.
@@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 :(
Great tutorial, thks 💪🏽❤️👍🏽
You’re welcome 😊
this is lit bro
Great video
Glad you enjoyed it
Thanks!
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.
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.
tnx bro
Thanks Man..
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)?
There was some JS that Elementor had that - th-cam.com/video/wlAoaLM272Y/w-d-xo.html but.... not tried with ensuring that you can scroll down afterwards.
Your overlaid image (image #2) is full width ... how did you do that?
ahhhhhhh! never mind! SECTION: Content Width: Full Width Columns Gap: No Gap 😆
Thank you for the video!
That's it :) Sorry for the late reply.
Very nice. Next time add some Lottie files ... and a scroll effect on the whole section. It could be fun
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 :))
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
I forgot to do that - will add it now
Love your tutorials how about this same subject in Kadence Pro ?
Sorry, I don't use KPro.
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..
Are you setting them as absolute positioning?
How may i download images that you use on tutorial?
I don’t often have them available but I will revisit this soon
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.
I'll check.
@@websquadron Thank you.
Hi Sir, Why my elementor(free) not have these options
Which ones are you missing? Note that I am using Elementor Pro
@@websquadron motion scolling
@@InvestWithGirish You'll need Elementor Pro.
@@websquadron thanks
But only in Elementor Pro!?
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?
@@websquadron No, all Scrolling Effects are not in the free Version. 😓
@@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.
looks great on desktop, but a major headache on anything else.. no thanks
True.