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

Поделиться
HTML-код
  • Опубликовано: 23 авг 2024

Комментарии • 59

  • @mooltech
    @mooltech 2 года назад +1

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

    • @websquadron
      @websquadron  2 года назад +2

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

  • @bySterling
    @bySterling 2 года назад

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

    • @websquadron
      @websquadron  2 года назад +1

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

  • @JanesBlignautInHD
    @JanesBlignautInHD 2 года назад +3

    I waited so long for this, thanks guy!

  • @maityweb427
    @maityweb427 2 года назад +2

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

  • @anupkaushik9370
    @anupkaushik9370 Год назад +1

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

  • @WickyDesign
    @WickyDesign 2 года назад +4

    Great tutorial! Keep up the good work!

  • @Pedant_Patrol
    @Pedant_Patrol 2 года назад +9

    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
      @websquadron  2 года назад +2

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

    • @Pedant_Patrol
      @Pedant_Patrol 2 года назад +1

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

    • @websquadron
      @websquadron  2 года назад +2

      @@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
    @CalebBennett07 Год назад +1

    FANTASTIC tutorial!! Thank you

  • @UrielSoto
    @UrielSoto 2 года назад +1

    That looks so cool!

    • @websquadron
      @websquadron  2 года назад +1

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

  • @SvenSchlau
    @SvenSchlau Год назад +1

    Awesome work dude! Thanks for sharing your skills

  • @DavidBenamou
    @DavidBenamou 2 года назад +1

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

    • @websquadron
      @websquadron  2 года назад +2

      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 :))

  • @ziehhoch
    @ziehhoch 2 года назад +1

    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
      @websquadron  2 года назад +1

      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.

  • @tomfraser3086
    @tomfraser3086 Год назад +1

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

  • @raoulshah
    @raoulshah 2 года назад +1

    Great tutorial, thks 💪🏽❤️👍🏽

  • @sonythomas8188
    @sonythomas8188 Год назад

    Thanks Man..

  • @joshthill3330
    @joshthill3330 2 года назад +1

    Thanks!

  • @ChAhsanAli1
    @ChAhsanAli1 2 года назад +1

    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
      @websquadron  2 года назад +1

      I forgot to do that - will add it now

  • @answer4274
    @answer4274 2 года назад +1

    Great video

  • @ayushmanjena5362
    @ayushmanjena5362 2 года назад +1

    this is lit bro

  • @mehdishamsedini210
    @mehdishamsedini210 Год назад +1

    tnx bro

  • @shelleymontreuil9907
    @shelleymontreuil9907 2 года назад +2

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

    • @shelleymontreuil9907
      @shelleymontreuil9907 2 года назад +2

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

    • @websquadron
      @websquadron  2 года назад +1

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

  • @thewebstylist
    @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
      @websquadron  Год назад +1

      There was some JS that Elementor had that - ruclips.net/video/wlAoaLM272Y/видео.html but.... not tried with ensuring that you can scroll down afterwards.

  • @InvestWithGirish
    @InvestWithGirish 2 года назад +1

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

    • @websquadron
      @websquadron  2 года назад +2

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

    • @InvestWithGirish
      @InvestWithGirish 2 года назад +2

      @@websquadron motion scolling

    • @websquadron
      @websquadron  2 года назад +1

      @@InvestWithGirish You'll need Elementor Pro.

    • @InvestWithGirish
      @InvestWithGirish 2 года назад +1

      @@websquadron thanks

  • @HarisKhan-ln7zy
    @HarisKhan-ln7zy Месяц назад

    how do you upload webp images on wordpress?

    • @websquadron
      @websquadron  Месяц назад

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

  • @cryptosir2025
    @cryptosir2025 2 года назад

    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
      @websquadron  2 года назад +1

      Are you setting them as absolute positioning?

  • @MrBitLearner
    @MrBitLearner 2 года назад

    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.

  • @arifrimel7917
    @arifrimel7917 10 месяцев назад

    How may i download images that you use on tutorial?

    • @websquadron
      @websquadron  10 месяцев назад +1

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

  • @lorenzimedia
    @lorenzimedia 2 года назад +1

    But only in Elementor Pro!?

    • @websquadron
      @websquadron  2 года назад +1

      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
      @lorenzimedia 2 года назад +1

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

    • @websquadron
      @websquadron  2 года назад +1

      @@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
    @Thecollekter Год назад

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