- 117
- 172 559
Derek Siu | Webflow & Web Design
Приєднався 8 січ 2023
Beginner-friendly Webflow tutorials, UI/UX design insights + freelance knowledge.
👋 G'day Mate! - 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 UA-cam 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.
👉 Ready to get started with Webflow:
webflow.partnerlinks.io/4brsncjjm7ge
👉 Want to hire me for your project or for consultation? Contact me here:
www.dereksiu.com.au/contact
👉 Discover more about me and my journey on my website:
www.dereksiu.com.au/about\u2028
👋 G'day Mate! - 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 UA-cam 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.
👉 Ready to get started with Webflow:
webflow.partnerlinks.io/4brsncjjm7ge
👉 Want to hire me for your project or for consultation? Contact me here:
www.dereksiu.com.au/contact
👉 Discover more about me and my journey on my website:
www.dereksiu.com.au/about\u2028
Effortlessly Separate CMS Items with a Comma in Webflow!
Learn how to separate CMS items with a comma in @Webflow easily and efficiently. In this tutorial, we'll show you a simple yet effective way to comma separate your CMS items in Webflow, making it easier to manage and display your content. Whether you're a web developer, designer, or content creator, this tip is a game-changer for anyone working with Webflow's CMS. Watch to find out how to separate CMS items with commas in Webflow and take your website to the next level!
Code found here:
www.dereksiu.com.au/tutorials/separate-cms-items-with-a-comma
--
📢 Connect With Me
Website: www.dereksiu.com.au/
Fiverr: www.fiverr.com/dereksiu
👇 Helpful Links:
Hire a Freelancer on Fiverr:
fiverr.grsm.io/k8bhq1js4hmx
Try Webflow:
webflow.partnerlinks.io/4brsncjjm7ge
Want to record a video like this? Try Tella:
tella.tv/?via=derek
Have questions or suggestions for future tutorials? Leave them in the comments below! Your feedback is greatly appreciated.
📚 Time Stamps:
0:00 Intro & Example
0:40 CMS Setup
1:30 Webflow Build
2:16 Adding classes
2:30 Adding Flex
3:40 Separating with comma
4:20 Applying custom code
5:45 Closing Statements
--
*Disclaimer: Some of the links in this description are affiliate links, which means I may earn a small commission if you make a purchase through them. This comes at no extra cost to you and helps support the channel. Thank you for your support!
Peace!
#WebflowTutorial #Webflow #ContentManagementSystem #CMS #GraphicDesign #ResponsiveWebDesign #JavaScript #WebDesign #WebflowTips #WebDevelopment #CMSItems #WebflowCMS #ResponsiveDesign #WebflowTricks #WebsiteDesign #WebflowTipsAndTricks #HowToUseWebflow #WebflowForBeginners #WebflowGuide #WebDesignTools
Code found here:
www.dereksiu.com.au/tutorials/separate-cms-items-with-a-comma
--
📢 Connect With Me
Website: www.dereksiu.com.au/
Fiverr: www.fiverr.com/dereksiu
👇 Helpful Links:
Hire a Freelancer on Fiverr:
fiverr.grsm.io/k8bhq1js4hmx
Try Webflow:
webflow.partnerlinks.io/4brsncjjm7ge
Want to record a video like this? Try Tella:
tella.tv/?via=derek
Have questions or suggestions for future tutorials? Leave them in the comments below! Your feedback is greatly appreciated.
📚 Time Stamps:
0:00 Intro & Example
0:40 CMS Setup
1:30 Webflow Build
2:16 Adding classes
2:30 Adding Flex
3:40 Separating with comma
4:20 Applying custom code
5:45 Closing Statements
--
*Disclaimer: Some of the links in this description are affiliate links, which means I may earn a small commission if you make a purchase through them. This comes at no extra cost to you and helps support the channel. Thank you for your support!
Peace!
#WebflowTutorial #Webflow #ContentManagementSystem #CMS #GraphicDesign #ResponsiveWebDesign #JavaScript #WebDesign #WebflowTips #WebDevelopment #CMSItems #WebflowCMS #ResponsiveDesign #WebflowTricks #WebsiteDesign #WebflowTipsAndTricks #HowToUseWebflow #WebflowForBeginners #WebflowGuide #WebDesignTools
Переглядів: 58
Відео
Create Stunning Responsive & Animated Bar Graphs in Webflow
Переглядів 12612 годин тому
Learn how to create stunning, responsive, and animated bar graphs in Webflow with this easy tutorial. Perfect for web designers and developers looking to add dynamic data visualization to their websites! Requested by subscriber: Bernado Paulo Jr 📚 Time Stamps: 0:00 Intro 0:12 Example Bar Graph 0:42 Example Responsiveness 2:38 Webflow Build 6:14 Adding Animation 8:50 Mobile Responsiveness (Overf...
How I Built Deck Heads - Webflow Showcase & UX Design Insights
Переглядів 10612 годин тому
Discover how Deck Heads was built using Webflow, with insights into UX design. Watch this video for a showcase of the website and UI/UX tips! Deck Heads provides pocket-sized information cards that broaden your product’s applicability, educate, and bring customers back for more. 🌐 Check out the site yourself here: www.deck-heads.com/ 👇 My Involvement / Key Features: - Website Design (UI) - Webs...
Master Animated Gradient Borders in Webflow in Just 3 Minutes
Переглядів 229День тому
Grab code here: dereksiu.com.au/tutorials/animated-borders Learn how to master animated gradient borders in @Webflow in just 3 minutes! This tutorial covers everything you need to know about creating stunning CSS animations for your website. Perfect for anyone looking to add a touch of flair to their designs. Requested by subscriber: @FlowVeeran 📚 Time Stamps: 0:00 Intro 0:07 Example Website 0:...
Squid Game Fans Will Freak Out When They See This Website
Переглядів 252День тому
If you're a Squid Game fan, you won't want to miss this website review! In this video, I'll explain my process of designing and building in @Webflow a custom website I created in 2021 called Squad Game which is a play on the popular Netflix show Squid Game. It was for an esports club called @utsesports70 apart of @activateuts and @utschannel. Sadly this website or campaign never launched :( 📣 A...
I Discovered The Shocking Truth About Webflow Page Wrappers!
Переглядів 22314 днів тому
Curious about Webflow page wrappers? In this video, I answer my subscribers (@autochehlycomua) question, revealing the shocking truth about them and explain how they work. Get all the details here lol. Some context (Box Model Video): ua-cam.com/video/_aP_zT9qRQA/v-deo.html 📚 Time Stamps: 0:00 Question from subscriber 0:33 Box Model (context) 0:48 Pagewrapper 1:14 Example / Explanation 3:20 Comm...
Webflow Dev Uncovers the Weirdest Websites on the Internet!
Переглядів 6114 днів тому
Join a @Webflow dev as he uncovers the weirdest websites on the internet! From bizarre layouts to strange content, you won't believe what's out there. Websites Reviewed (in order): theuselessweb.com/ memory.toys/classic/easy/ longdogechallenge.com/ puginarug.com/ optical.toys/ alwaysjudgeabookbyitscover.com/ weirdorconfusing.com/ paint.toys/calligram/ 📚 Time Stamps: 0:00 Intro 0:06 theuselesswe...
I Built Paylos.com in Webflow and Learned These UI/UX Secrets!
Переглядів 32414 днів тому
In this video, I'll show you how I built Paylos.com in @Webflow and share some UI/UX secrets I learned along the way. If you're using Webflow or your interested in websites, you won't want to miss this! 🌐 Check out the site yourself here: www.paylos.org.au/bio Their UA-cam channel: @paylosadventures 👇 My Involvement / Key Features: - Website Design (UI/UX) - Webflow Build - CMS Setup - Swiper J...
CSS Classes in @Webflow Explained: Beginner's Guide
Переглядів 10121 день тому
Box Model Video: ua-cam.com/video/_aP_zT9qRQA/v-deo.html Understanding the CSS box model is essential for effective web design, as it defines how elements are structured and displayed on a webpage. In Webflow, mastering the box model enables designers to create responsive and visually appealing layouts. Yes around 10mins into the video I said Margin when I was meant to say Padding. 📚 Time Stamp...
I'm Reviewing YOUR Webflow Site for MAJOR Improvements!
Переглядів 9621 день тому
I'm Reviewing YOUR Webflow Site for MAJOR Improvements!
Revamping ITDEvents.com for an Epic User Experience
Переглядів 7221 день тому
Revamping ITDEvents.com for an Epic User Experience
What Webflow Freelancers Don't Want You to Know About Productivity
Переглядів 13928 днів тому
What Webflow Freelancers Don't Want You to Know About Productivity
Unveiling Alta Invest's New Website - Webflow Showcase & UX Design Magic
Переглядів 260Місяць тому
Unveiling Alta Invest's New Website - Webflow Showcase & UX Design Magic
Unveiling the Box Model: Discover How Websites Truly Operate!
Переглядів 122Місяць тому
Unveiling the Box Model: Discover How Websites Truly Operate!
How I Built QuantumRevenues.com - Webflow Showcase & UX Design Insights
Переглядів 138Місяць тому
How I Built QuantumRevenues.com - Webflow Showcase & UX Design Insights
Custom Cursor in Webflow Made Easy: Beginner's Guide
Переглядів 300Місяць тому
Custom Cursor in Webflow Made Easy: Beginner's Guide
How I Built Kalotravel.com - Webflow Showcase & UX Design Insights
Переглядів 264Місяць тому
How I Built Kalotravel.com - Webflow Showcase & UX Design Insights
How to Create a Smooth Accordion Animation in Webflow
Переглядів 271Місяць тому
How to Create a Smooth Accordion Animation in Webflow
How I Built @Vividize's Website - Webflow Showcase & UX Design Insights
Переглядів 137Місяць тому
How I Built @Vividize's Website - Webflow Showcase & UX Design Insights
How to Create Text Stroke Effects Natively in Webflow Without Custom Code
Переглядів 68Місяць тому
How to Create Text Stroke Effects Natively in Webflow Without Custom Code
How I Built www.shaybenmoussa.com.au - Webflow Showcase & UX Design Insights
Переглядів 942 місяці тому
How I Built www.shaybenmoussa.com.au - Webflow Showcase & UX Design Insights
How to Compress Webflow Videos with Handbrake for Faster Page Load Speeds
Переглядів 1582 місяці тому
How to Compress Webflow Videos with Handbrake for Faster Page Load Speeds
How I Built Santanatudioco.com - Webflow Showcase & UX Design Insights
Переглядів 992 місяці тому
How I Built Santanatudioco.com - Webflow Showcase & UX Design Insights
I Pretended to be a Billionaire Using Inspect Element
Переглядів 602 місяці тому
I Pretended to be a Billionaire Using Inspect Element
How I Built SkinSafe.au | Webflow Showcase & UX Design Tips
Переглядів 2012 місяці тому
How I Built SkinSafe.au | Webflow Showcase & UX Design Tips
Create a FREE multi-step form in Webflow using Formly (tryformly.com)
Переглядів 8644 місяці тому
Create a FREE multi-step form in Webflow using Formly (tryformly.com)
Creating a Custom 404 Page in Webflow
Переглядів 1,1 тис.4 місяці тому
Creating a Custom 404 Page in Webflow
Building a Conference Website in Webflow (Showcase: pmreconference.com)
Переглядів 1004 місяці тому
Building a Conference Website in Webflow (Showcase: pmreconference.com)
How to upload a PDF file to Webflow
Переглядів 1,5 тис.5 місяців тому
How to upload a PDF file to Webflow
So they hid the inner dropdown on mobile? When I build them they work just fine on desktop and mobile!
Thank you for this
Cool! Do you also have a solution for breadcrumbs for Webflow?
Using custom code or natively in Webflow via Symbols / Components. Yes
Good job, legit tutorial
Thanks, I am legit person and not AI.
Did you build that site?
I can neither confirm or deny that statement.
@@dereksiuau I see 😆.
Super useful as always, thanks a lot Derek!
Glad it was helpful!
Interesting, kicking off my webflow learning
Welcome to the world of Webflow - lol wishing you all the best. If you need a tutorial on anything feel free to suggest :)
This is exactly what i needed, as I'm making a website design for myself. I don't need the paid version of webflow, thus I don't need CMS, which I see everyone use in both F&Q and Testimonial sections. I used what I could from your video and made my F&Q with a lottie which turned out exactly as I wanted it to. Thank you!
Nice yeah the CMS is really for certain situations and one benefit is that clients can easily add new items. But yes if you know what you are doing you can just stick to a basic plan or even a free plan and host on .io site. Great comment!
@dereksiuau Indeed, and since I'll be the one editing the website in the future, I don't mind missing out on CMS. Also, now I need the tutorial on how to make an auto-closing accordion. Will that be out any time soon?
I love the site. Well done. You did a great job. Thanks for sharing.
Thanks for watching!
Good one derek
Thank you Derek; You've been the sources of my inspiration and hope of the future ever since I discovered your UA-cam channel. MAY THE LORD RICHLY BLESS YOU 🙏
Thanks for the comment - stoked I was an inspiration for you. May God bless you also!
A very useful tutorial, thanks for it! The topic of infographics is very interesting, maybe you can tell us about radial graphs?
Glad you found this Webflow tutorial useful I have made a note on Radial Graphs. It would be using Chart.js most likely.
Under 40 min?😮Could you upload the full video? that'd be great
I have a semi timelapse of more - I will share since you are interested :)
this was great. but I think increasing the padding to show more of the border would help to make it pop out more.
Yes - Good idea, all up to you!
Great! Is it possible to do the opposite? From webflow to Wordpress? In your opinion, what is the advantage of webflow when compared with Wordpress + Elementor? Webflow Cost is higher, there are no plugins… I can’t see benefits and would appreciate if you can list some… Thanks!
Webflow to Wordpress is very easy to do in Webflow by going into the CMS and exporting as .csv file then upload to Wordpress. The problem I think is that usually the images are hosted on the platform (ie. Webflow or Wordpress) and when you are migrating sites, usually the other site get's terminated, so uploading the image manually is needed. -- From my experience, Elementor is very limiting in what you can do in terms of design and preciseness. Hence that is the main benefit IMO. Also client editing the site in Webflow vs Wordpress is better in terms of UX Wordpress definitely has more plugins as it's been around longer. So I guess IMO Wordpress is great choice for more complex websites such as ecommerce, login, dashboard etc. -- There are many more pros and cons shall I make a video about it :P
Thanks so much for this! I usually add in Google Maps with an API key in Webflow and my credit card info changed and Google Cloud suspends the free account if any payment info is changed and some maps shut down. I need to start doing it this way. Thanks!
Glad this helped, its definitely a better approach than using an API key! - Great point you have raised.
amazing 💪
Thanks 🔥
Is there anyway to change this asset url?
Good question - not that I know of natively. Why do you need it changed? - I guess the most immediate thing is to host the PDF somewhere else.
@dereksiuau wanted to show pdf link in lead magnet but it's showing weird link instead of website link
Yeah it shows like a webflow link with random strings that is normal. So in your case you can use the Webflow generated link (ie Hosted PDF) then maybe put it to bit.ly or something to make it neater.
@@dereksiuau thanks ❤️
Great video! I bet you can link up variables in the custom embed to make this even easier!
Keep IT Up man. I'm still waiting for a course
perfect tutorial as always
Appreciate it!
Thank you sir!
You're welcome!
Great tutorial! Thanks a lot
Glad it was helpful!
great vid keep it up
Thanks man! Glad you liked it :)
Amazing tutorial, love the focus on teaching and making it straight forward. This didn't feel like 17 minutes.
Great to see you found value and how time just went by. Apprecaite your comment and feedback.
Derek, thank you so much! Happy NY! With best wishes from Ukraine.
It was my pleasure - thanks for the vid idea! Happy 2025 :)
Assalam Walekum please help me Webflow tutorial
Can you be more specific on what you would like a tutorial on? Will be happy to help.
Also you left out one major reason that it is mostly used to copy and paste to different pages/projects inside webflow so that we won't have to start from scratch Learnt that from the Client first docs
WOW - can't believe i've missed this SMH ... Thanks!
The last website paint toys is dope
Long doge seems sus
Mega sus - I wonder what is at the end of it LOL
@@dereksiuau 😁
Wow, nice video and beautiful website. It's so much easier to work when you have a lot of assets and when clients like to collaborate :)
It really is!
Hi Derek Nice work Have been a day one fan Do mind reviewing some of my Webflow projects pls 😢😊
Wow - Day 1 that's crazy! - Thanks for being there with me :) OFC please send them over, I think YT doesn't allow links so perhaps you can email me what you want reviewed PLUS what kind of feedback you want. My email can be found on my YT bio! Looking fwd to seeing it sir!
@@dereksiuau thank you very much I really appreciate it do appreciate 😊😊
nws - still waiting for that link you want me to review :)
Nice looks good!
Thanks for checking it out!
Great video! Do you have a tuto or any ressource for make the exact same thing ? I admit I'm struggling with this.
I have added this to my list sir!
which part exactly are you struggling with? Dealing with inner dropdowns on a site atm and got it to work.
This video is so much better than the official step-by-step guide. Thank you so much, Derek! I was completely lost before watching this.
Cheers for the kind words, I appreciate it!
Thank you so much Derek!!
No problem - I'm just happy to share the knowledge!
Дякую за выдео
Без проблем - дякую за перегляд
bro can you give material to practice this
Please elaborate what you mean, I will try my best to help out how I can!
great!!! thank you, very well explained!
Glad it was helpful!
abo!
thats exact what i search thank you
Thanks for commenting - glad you found it helpful sir.
that's a big lead from the their previous website. But there are still some things you could change... like the Value section and the services could been something else, also the mountain images consistancy... Overall Nice one
Thanks for the info! - I agree there can always be improvements to any site. In this specific case the client brief was very specific on just a simple website. The budget also reflected this.
Thanks for your video! Could you explain to a beginner what the Page Wapper is? Why do you additionally use this div?
Yes - I will make a video about this.
@@dereksiuau Thank you so much
I had discovered this by accident, but I wonder what would this even be used for?
I also discovered by accident haha - maybe it's better to have it then not have it? Or maybe Google is slowly soft launching to become the next Chat GPT lol.
This is great. But how do you make these buttons more simple and basically disable the '2nd click' because if not then the user is stuck having to click things 2 times which isn't a good experience...a tutorial on this would be amazing I see lots of people wondering the same thing online :)
If I remember correctly, this tutorial is using native Webflow interactions (on click) and BOTH are using first click interaction (no second click interaction). [Interaction 1 eg. Open model button] 1st click to open the popup [Interaction 2 - eg. Cross button] 1st click to close the popup Not sure if I answered this correctly, if not please elaborate :)
Baby got backups
wow, i didnt knew this before
Now you do :)
So simple , thanks !
Glad it helped!
Nice!!! 🎉
Cheers! 🎉
You really put in the effort to ensure everyone understands, even though you were frustrated. Still, you went the extra mile to explain-kudos to you!