Welcome to my RU-vid channel: Your destination for high-quality content on Webflow tutorials, UI/UX design insights + freelance knowledge. I'm Derek Siu a freelance Website designer and Webflow Developer based in Sydney Australia with over 4+ years of experience. My goal for this RU-vid channel is to provide free valuable resources to help you master Webflow and elevate your design skills.
Sit back, follow along, and unlock valuable insights in each video. Don't forget to show your support by liking, commenting, and subscribing for regular updates.
Discover more about me and my journey on my website: www.dereksiu.com.au/about\u2028
Ready to get started with Webflow? Use my affiliate link here: webflow.partnerlinks.io/4brsncjjm7ge
Want to hire me for your project or for consultation? Contact me here: www.dereksiu.com.au/contact
Hi! In my case, on smaller devices when the animation comes to the looping moment, I experience some kind of "refresh" that lasts just for a fraction of a second, but it's really noticeable. I have a longer wrapper with 11 logos, repeated a couple of times. Do you know if it's just webflow's way of dealing with this? Or maybe I am missing something?
brother thank you so mych this is what I was looking for so long time, very useful and very to the point, thank you, it is amazing explanation, keep uploading tutorials like this man, this is super useful to the point thanks brother
Woah,, thats way lot simple that i could found anywhere on youtube🤩🤩, Thank you!!! please make a vdo on how to stop spams in webflow, i have tried recaptcha and honypot but nothing works so far🥲, i dont know how spammers are bypassing the required mobile number field in my webflow form, any help?🥲
Hi, i loved the video. I'm trying to do something like the second example you showed, changing the content of the modal depending on the button that i pressed. How can i do that?
Based on my method (in the tutorial) you will have to make a seperate interaction for opening each unique popup (so make sure to also apply a unique class for each of the open items). As long as you understand the premise of this video and how to make one popup, hopefully you can figure out the rest. Let me know how it goes and if you still get stuck :)
Hahahaha - Thanks for being transparent, glad I could save your ass! Keep up the work as an intern it does not last forever, keep learning keep growing :)
how does this work if you add a white background on a hero image so the logo and nav links change colour? your two examples show it where they stay the same
Many ways, but same premise make sure the nav links have a set class then use the text color change, as for the logo you can either: 1/ Use the filter functionality 2/ Upload two logos positioned the same (through absolute position) then change opacity or hide / show. But again many ways of doing things.
Cool stuff, Thanks for sharing, definitely gonna try .. please make a vdo on how to stop spams in webflow, i have tried recaptcha and honypot but nothing works so far, i dont know how spammers are bypassing the required mobile number field in my webflow form, any help?
Thanks a lot for the tips! I have an issue regarding the slider in modals. The slider doesn’t work correctly in a modal and it seems it’s because the modal display has been set to non. There is code in Webflow community Webflow.require('slider').redraw(); just after to $('.modal-background').fadeIn(); But I have no idea what should I do with it. It doesn’t work in the custom code section. I would appreciate if you could help me with it.
Hey! There are many ways and solutions to do things. In order to trouble shoot correctly can you please provide a screen recording or share me the read only link and I can take a look when I get the time. - Derek
Thanks for actually making this video Derek, really appreciate you, and this is exactly what I was looking for and had no idea it could be done this way!
Bro, could you by any chance make a video on embedding an inline form (Webflow native and/or ie. HS) to blog, and how to create I suppose an embed code that could be pasted anywhere on the blog to display the form exactly where you want it, while also having the option to change the contents of the form - heading, description, CTA, and image, via the editor? I know it's very specific but can't find anything online about this lol. PS; Really appreciate you latest tutorial to about bg scroll prevention :)
Ok - this is noted. But fyi embedding a form means that you can not style it natively through the Webflow editor. It can only be edited by the embed company eg. Hubspot. But if you want to style the form you can use a native Webflow form. I will add this to my list for you Adam!
@@dereksiuau thanks Derek, but how about if you set the form ie. in HS to 'raw html' ? I think that should allow you to style it, as HS doesn't have many styling options natively.
Hey I actually recently did this, you can check it out here: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-ddKAJdk9CP0.html&lc=Ugx0XxR8SbTWAZqj6dh4AaABAg
Thanks for sharing! I've been searching for a solution for days! I think the code in your website turned into a text so I gave it to ChatGPT to turn it back to the code but it's definitely working. Thanks a lot!
I will be releasing a follow up tutorial addressing this. But essentially instead of "hide / show" you can set the height of the answer div to be something like 0px then going to auto once expanded.
Tnak you. Very usefull, but I think you should explain final step, interaction when click on navbar link - nav panel to go left -100% it is not problem, but lotte icon behavior in that situation needs some explanation. I have problem with that.
Sure thing! With the lottie it's just using keyframes (percentages). If you need more direction, please clarify perhaps with timestamp reference to the video.
@@dereksiuau I mean, I am not sure how to make everything to vork fine when click on some link when menu is opened ( FAQ, services...). You explained perfect everything in your video ( no problem with that), but that final step what after that,, what heppens when click the link.. How to do that interaction ? To hide menu on link click with proper behavior of lottie icon. I tried something but it's not working as it should.
For custom code see: www.dereksiu.com.au/tutorials/stop-page-scroll-on-modal Just skip to 7:08 - if you just want the solution without an in-depth explanation. For the previous tutorial on building the popup modal see: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-sJ8lH9sMnxA.html
I'm struggling after minute 5. Instead of rotating to the end when I move the margin it adds to the spacing between the items or makes it smaller. Help!
The main goal of this tutorial (and all my tutorials) is to explain the "premise". In code there are many ways to do things. I would suggest to follow exactly step by step and understand what is happening, then explore other solutions. But what you have described seems like the "items" don't have a set size, I would recommend using a GRID as it auto calculates the size. But again many ways to do things. If you are still stuck you can share with me your read only link and I can take a look when I get the chance :D
I don’t know if it’s happening with someone more, but in my case, it’s not working on mobile. In the safari and the chrome, actually. What can I do to fix it?
Really interesting, I have not verified this. But I suspect it could be the limitations of the mobile / web browser operating system. LMK if you do come up with a solution.
