Toggle Switch With Text in Webflow
HTML-код
- Опубликовано: 15 май 2023
- In this video tutorial, I’ll teach you how to create a working toggle switch (with text) using Webflow. After this tutorial, you will be able to add an interaction to the toggle to do whatever you would like.
Intro:
00:00
Example sites:
00:07
Webflow Walkthrough:
01:11
Closing Remarks
16:02
📢 Connect With Me
- Website: www.dereksiu.com.au/
- Fiverr: www.fiverr.com/dereksiu
👇 Affiliate Links:
Hire a Freelancer: fiverr.grsm.io/k8bhq1js4hmx
Try Webflow: webflow.grsm.io/4brsncjjm7ge
![Jordan Adetunji - KEHLANI REMIX (feat. Kehlani) [Official Video]](http://i.ytimg.com/vi/EeJ8n5PxFGE/mqdefault.jpg)
Thank you very much. It was very helpful !
Glad it helped!
great tutorial, thank you very much!
You are welcome!
super helpful, thank you!!
Glad it was helpful :) Thanks for watching!
Really helped! thankyou 🙌
Glad it helped 🙌
thanks man that was helpful
Glad you found it helpful :)
thanks man
Happy to help man :)
Hi, thank you for the content. Was just wondering if a toggle switch animation can be used in tandem with a page transition. Say if I wanted to style my nav menu like an on/off switch with one side being the home page and upon clicking the toggle, it animates to the other side and brings the user to another page?
Great question - if this wasn't a page transition then that would be quite simple and can be done natively in Webflow.
As for the page transition that is quite hard to do natively - probably can be achieved through custom code.
The easiest way (not the best) is to have 2 duplicated page:
1/ Navbar #1
2/ Navbar #2
So when user clicks toggle it takes them to the appropriate page.
Hope this helped
- Derek
@@dereksiuau thank you I think that pointed me in the right direction. Going to try it out tomorrow 🙏🏽
Great tutorial, it was exactly what I was looking for! I do have one question, when I hit the toggle off button the ON text goes white to black, but the OFF text just stays black. I double checked my animations, and the toggle off interaction has the current text-toggle going from black to white. Any ideas on what other issues could be causing this? Appreciate it.
Hey, thanks for watching and commenting. I suspect you may have not targeted the unique combo class for the OFF text. Otherwise I can investigate further if you provide a read only link :)
@@dereksiuau Thank you for replying! I'll take a look and check my unique combo class and make sure I have it targeted! I know it's something simple that I'm over looking!
@@daarongonzalez1650 Yeah - give it a double check, I'm sure it's something simple :)
Hi! I have successfully built the toggle! Thank you. I just have a one question. When I duplicated the page which has the same toggles, the texts color in the toggle would change and wouldnt work all the same. Even if I make changes again, the other page toggle changes the color and wouldnt work the way I created. Do you know why?:0
Hey! Thanks for the comment - did you make sure the toggle affects the class (Blue Paint Brush Icon) and not interaction (green lightning bolt Icon)?
@@dereksiuau Thank you for the reply! Yes! I made the toggle switch affect > class and texts effect > Selected element
@@dereksiuau Thanks!!! I also changed the texts affect > class. Now it works!!! Thank you so much:)
@@suebinmoon8173 Awesome stuff! - Glad it worked, great job on making everything work, it's a great satisfying feeling 😁
great tutorial, thank you very much!
Thanks for watching and glad you found it helpful :D