How to Webflow: Create a custom modal (2019) - Tutorial

แชร์
ฝัง
  • เผยแพร่เมื่อ 3 ธ.ค. 2024

ความคิดเห็น • 78

  • @SuperQuwertz
    @SuperQuwertz 3 ปีที่แล้ว +1

    The best webflow teacher from south park!
    Thank you for your tutorials :)

  • @Kate-J
    @Kate-J 4 ปีที่แล้ว +3

    Thank you so much! This took me a while to do but it works! Somewhere I got stuck on that might help someone else: I had already made my nav bar a symbol before adding this modal which caused issues when I tried to add the interactions.. I solved this by putting the modal inside the nav bar symbol and underneath it.

  • @refused1
    @refused1 ปีที่แล้ว

    Great tutorial, thanks bro

  • @JulianHibbert
    @JulianHibbert 3 ปีที่แล้ว

    Life saver, thanks bro!

  • @corinaskywalker
    @corinaskywalker 3 ปีที่แล้ว

    Your videos are so helpful!!! Thank you!

  • @adamiscrupe2276
    @adamiscrupe2276 5 ปีที่แล้ว +3

    Thank you, great tutorial! Really easy to follow along, love your content!!
    One thing I didn't get out of your tutorial that might help others (since it took me a few days to figure out!) was that if your modal is triggered from the navigation, and you add that symbol to other pages, it won't work unless you turn the modal into a symbol and add it to every page too.

    • @pixelgeek
      @pixelgeek  5 ปีที่แล้ว +1

      Good point. I'll make sure to make a note of that on future videos 😁

    • @lynnemarie7885
      @lynnemarie7885 4 ปีที่แล้ว

      Question: If I made the navigation a symbol (which I commonly do, because whoa yeah!) then the modal would work on every page too, or not??

    • @davidlira94
      @davidlira94 4 ปีที่แล้ว

      @@lynnemarie7885 hello! i guess that in this way it will work only if you put the same modal (or at least the same class of the modal) to the page you wanna show the modal. But make sure first that this one be a symbol :)

  • @travismccormick4799
    @travismccormick4799 3 ปีที่แล้ว +1

    Fantastic tutorial! Thank you so much.

    • @pixelgeek
      @pixelgeek  3 ปีที่แล้ว

      Glad it was helpful!

  • @GauravKumar-ue7nz
    @GauravKumar-ue7nz 3 ปีที่แล้ว

    Thanks a lot, Really Helped a lot.

  • @carpathianshepherdess4990
    @carpathianshepherdess4990 4 ปีที่แล้ว +1

    Thank you! This was GREAT and so easy to follow.

  • @martinangst3396
    @martinangst3396 4 ปีที่แล้ว +1

    Fantastic. Very helpful!

    • @pixelgeek
      @pixelgeek  4 ปีที่แล้ว

      Glad it was helpful!

  • @dillonbradley
    @dillonbradley 5 ปีที่แล้ว +1

    Amazing tutorial man - thanks so much!

    • @pixelgeek
      @pixelgeek  5 ปีที่แล้ว

      My pleasure. Thanks for watching 😁🙇🏽‍♂️

  • @MrJohntra
    @MrJohntra 5 ปีที่แล้ว +3

    great, man. keep going.

    • @pixelgeek
      @pixelgeek  5 ปีที่แล้ว

      Thanks for your support

  • @marie.bydesign
    @marie.bydesign 2 ปีที่แล้ว

    Hi, do you have any advice for positioning over a sticky navbar?

  • @KB-2324
    @KB-2324 3 ปีที่แล้ว

    This works great, thank you! I have one problem. Do you know why when I add sections or elements to the page, I am not able to scroll. Is there a way to fix this? Thanks again...

  • @SuperStevestan
    @SuperStevestan 5 ปีที่แล้ว +1

    Thanks for making this video, really helps the community. A +++

    • @pixelgeek
      @pixelgeek  5 ปีที่แล้ว +1

      my pleasure. :) Thanks for watching.

  • @johanjenefeldt4774
    @johanjenefeldt4774 4 ปีที่แล้ว

    Awesome. Really helpful, but... If the contents in the modal makes it (the modal) taller then the screen size there is a problem. I would like to be able to scroll the page, not inside the modal, to explore the entire modal. Solutions?

  • @TsapkoAndrii
    @TsapkoAndrii 4 ปีที่แล้ว +1

    so many thx! you help me so much!

    • @pixelgeek
      @pixelgeek  4 ปีที่แล้ว

      My pleasure 😁🙇🏽‍♂️

  • @hamishmaclean1629
    @hamishmaclean1629 5 ปีที่แล้ว

    got to make these bad boys accessible 🤯

  • @juniocesar2212
    @juniocesar2212 4 ปีที่แล้ว +1

    Thanks so much!

    • @pixelgeek
      @pixelgeek  4 ปีที่แล้ว +1

      my pleasure :)

  • @ohwhatworld5851
    @ohwhatworld5851 5 ปีที่แล้ว +8

    I wish you would show what you are making at the start of the video to give context.

    • @pixelgeek
      @pixelgeek  5 ปีที่แล้ว +3

      Thanks for that feedback. I'll make sure to do that with all videos going forward. 🙇🏽‍♂️

    • @ohwhatworld5851
      @ohwhatworld5851 5 ปีที่แล้ว +1

      @@pixelgeek Thank you :)

  • @yannickcaron609
    @yannickcaron609 4 ปีที่แล้ว

    @pixelgeek I have a problem scaling this modal for my mobile version of my website, any tips? Great tutorial btw.

    • @pixelgeek
      @pixelgeek  4 ปีที่แล้ว

      Thanks for reaching out. I don't have much time to help with direct support requests. But this is why I'm making a community website and chat board. Please consider joining the email list and when it launches, you'll be able to ask questions there.
      Https://pixelgeek.community

  • @romarkablebert
    @romarkablebert 3 ปีที่แล้ว

    I gotta re do mine. I keep following your steps but something messing up with the animation. When I hit the close button to hide the module it's as if it's just invisible but the form is still on the screen and it wonn't let me hit no other links or buttons on the actual home page. Even the navigation bar is unavailable. But when I click around I keep seeing required pop up meaning the modal is still there but invisible. Ugh.

  • @PcHabitat
    @PcHabitat 5 ปีที่แล้ว +1

    Webflow 4 Life

  • @oleww50
    @oleww50 5 ปีที่แล้ว

    Hi, great to have you making videos again! is there a way to only have the modal come up once per user? Not every time a user com3s to the website? Cookies or age verification for example? Thanks!

    • @pixelgeek
      @pixelgeek  5 ปีที่แล้ว +3

      Sure. I'll do a video of that soon 😁👍

    • @oleww50
      @oleww50 5 ปีที่แล้ว

      Sounds great, thanks! ✌️

    • @pixelgeek
      @pixelgeek  5 ปีที่แล้ว

      here you go :) th-cam.com/video/_y0zPEAFvJc/w-d-xo.html

  • @MrBenfirst
    @MrBenfirst 4 ปีที่แล้ว

    I have a modal setup and have a jotform embedded but it appears that when i publish the site, the embedded form shows up on mobile fine, but on desktop its just the empty container. Any idea what the issue might be? Thanks.

  • @ebaqdesign
    @ebaqdesign 5 ปีที่แล้ว

    Thanks a lot - I was able to design my popup, but how to make the 'close intent' as a trigger? I want this popup to show up on exit intent.

    • @pixelgeek
      @pixelgeek  4 ปีที่แล้ว +1

      hmm.... what would be on the popup? I'm generally not a fan of exit intent pop ups. It's just like when you go to the gas station and all you want to do is pump gas, but then the screen asks "do you want to pay with credit or debit?" then "do you want a receipt?" then "do you want a car wash?" then "do you want to buy a soda?"
      it gets annoying 😬

    • @ebaqdesign
      @ebaqdesign 4 ปีที่แล้ว

      @@pixelgeek it might be annoying but exit popups convert best. 90% of visitors will never come back to your website and this is your last opportunity to capture their email in exchange for something valuable. My exit popup is simply "Subscribe to my blog to download my Branding Guide" with just an email field and a button.

    • @shrimpflea
      @shrimpflea 2 ปีที่แล้ว +1

      @@ebaqdesign I'm sure there is a way but Google frowns on that...bad for SEO

  • @kimtryeng
    @kimtryeng 4 ปีที่แล้ว

    What if when click the submit button, the form will disappear?

  • @davidlira94
    @davidlira94 4 ปีที่แล้ว +1

    hello bro! hey, i heard that theres a webflow group! how can i join to that group? that´s awesome!

    • @pixelgeek
      @pixelgeek  4 ปีที่แล้ว

      There are many groups. Which one are you specifically talking about?

    • @davidlira94
      @davidlira94 4 ปีที่แล้ว

      @@pixelgeek idk hahaha, i heard in the video you said that one person asked you some improvements and then you work like a master on it

    • @pixelgeek
      @pixelgeek  4 ปีที่แล้ว

      Are you taking about joining my live streams? If so, I stream every so Saturday at 10am pacific

  • @jobvennekens
    @jobvennekens 4 ปีที่แล้ว

    Hi man, I've got a problem which you can maybe help me with: I have made a modal on my website which works. However, when closing it, all of my buttons on the webpage don't work unless the website refreshes. Do you know how to solve this?

    • @pixelgeek
      @pixelgeek  4 ปีที่แล้ว

      Make sure your modal wrapper is set to display none when you close it.
      Hope this helps 😁

  • @Jezza3110
    @Jezza3110 5 ปีที่แล้ว +2

    Can you please make a cookie notification pop up ?

    • @pixelgeek
      @pixelgeek  5 ปีที่แล้ว +1

      Will do 👍

    • @pixelgeek
      @pixelgeek  5 ปีที่แล้ว +1

      here you go :) th-cam.com/video/_y0zPEAFvJc/w-d-xo.html

  • @walterbaeyens9813
    @walterbaeyens9813 4 ปีที่แล้ว

    @pixelgeek how to set it to pop up when the web-side is loaded ? thank you for your time

    • @pixelgeek
      @pixelgeek  4 ปีที่แล้ว

      To be honest, don't do this. There's already too many pop ups on the web.

    • @walterbaeyens9813
      @walterbaeyens9813 4 ปีที่แล้ว

      @@pixelgeek thank u , how would you solve it , it's for a client I did the web design for , and now need a pop up to announce a Christmas and new year take a way dinner, thank you for your time and feedback

    • @pixelgeek
      @pixelgeek  4 ปีที่แล้ว +1

      I would suggest adding it to the homepage as a new section under the hero row

    • @walterbaeyens9813
      @walterbaeyens9813 4 ปีที่แล้ว

      @@pixelgeek Thank you for the suggestion :-)

  • @egglevin
    @egglevin 5 ปีที่แล้ว

    If the button to open the modal is in the nav, then in other breakpoints, how can I trigger the hamburger menu drawer to close when the modal opens? Any way to do it without code?

    • @pixelgeek
      @pixelgeek  5 ปีที่แล้ว

      can you give me a read-only link to your project so I can further investigate this?

  • @sundeep2275
    @sundeep2275 4 ปีที่แล้ว

    When we have multiple sections and the collection list is in the last section, how can we show modals with fixed position?

  • @dexterdragons
    @dexterdragons 4 ปีที่แล้ว

    Hey, how to widgets automatically product sale tutorial? scroll into view or while scroll?

    • @pixelgeek
      @pixelgeek  4 ปีที่แล้ว

      i'm not sure what you mean. Can you give me an example of what you're talking about?

    • @dexterdragons
      @dexterdragons 4 ปีที่แล้ว

      @@pixelgeek www.creativebloq.com/web-design/parallax-scrolling-1131762

    • @dexterdragons
      @dexterdragons 4 ปีที่แล้ว

      Automatic window (popup modal)

  • @jacevans9705
    @jacevans9705 5 ปีที่แล้ว

    When creating the extra background div I tried just setting the original modal to 999 z index and the content to 9999 thinking that way I wouldn't need the extra div - but it didn't work (your way does though!). Why is that?

    • @pixelgeek
      @pixelgeek  5 ปีที่แล้ว

      can you send me your read only link so I can check it out?

  • @joedoe7506
    @joedoe7506 4 ปีที่แล้ว

    when i click 2nd time on the button to open the modal 2nd time, nothing happens, why is that?

    • @pixelgeek
      @pixelgeek  4 ปีที่แล้ว

      can you post your read only link so I can look into this?

    • @joedoe7506
      @joedoe7506 4 ปีที่แล้ว +1

      @@pixelgeek i made it :D it was something with the flex and none option in the animation. thanks for tutorials, i learned a lot!

    • @pixelgeek
      @pixelgeek  4 ปีที่แล้ว +1

      Glad you figured it out 👍

    • @jakev9355
      @jakev9355 4 ปีที่แล้ว

      Hi Joe - I have this same issue - mind sharing your solution?

    • @joedoe7506
      @joedoe7506 4 ปีที่แล้ว

      @@jakev9355 i followed also these instructions, similar but worked for me
      th-cam.com/video/bNVwW8-BymU/w-d-xo.html