Derek Siu | Webflow & Web Design
Derek Siu | Webflow & Web Design
  • 117
  • 172 559
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
Переглядів: 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)
Webflow Showcase: Myac.co
Переглядів 1064 місяці тому
Webflow Showcase: Myac.co
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

КОМЕНТАРІ

  • @filetmignon9978
    @filetmignon9978 14 годин тому

    So they hid the inner dropdown on mobile? When I build them they work just fine on desktop and mobile!

  • @ariyibitomiwa408
    @ariyibitomiwa408 19 годин тому

    Thank you for this

  • @rmo4762
    @rmo4762 День тому

    Cool! Do you also have a solution for breadcrumbs for Webflow?

    • @dereksiuau
      @dereksiuau День тому

      Using custom code or natively in Webflow via Symbols / Components. Yes

  • @jamesamoros6196
    @jamesamoros6196 День тому

    Good job, legit tutorial

    • @dereksiuau
      @dereksiuau День тому

      Thanks, I am legit person and not AI.

  • @filetmignon9978
    @filetmignon9978 День тому

    Did you build that site?

    • @dereksiuau
      @dereksiuau День тому

      I can neither confirm or deny that statement.

    • @filetmignon9978
      @filetmignon9978 14 годин тому

      @@dereksiuau I see 😆.

  • @kbob6980
    @kbob6980 День тому

    Super useful as always, thanks a lot Derek!

  • @Kaycee-Szn
    @Kaycee-Szn 2 дні тому

    Interesting, kicking off my webflow learning

    • @dereksiuau
      @dereksiuau 2 дні тому

      Welcome to the world of Webflow - lol wishing you all the best. If you need a tutorial on anything feel free to suggest :)

  • @nemanjalackovic2288
    @nemanjalackovic2288 2 дні тому

    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!

    • @dereksiuau
      @dereksiuau 2 дні тому

      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!

    • @nemanjalackovic2288
      @nemanjalackovic2288 20 годин тому

      @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?

  • @phase4485
    @phase4485 2 дні тому

    I love the site. Well done. You did a great job. Thanks for sharing.

  • @FlowVeeran
    @FlowVeeran 4 дні тому

    Good one derek

  • @assaawin
    @assaawin 4 дні тому

    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 🙏

    • @dereksiuau
      @dereksiuau 4 дні тому

      Thanks for the comment - stoked I was an inspiration for you. May God bless you also!

  • @super_hooch
    @super_hooch 5 днів тому

    A very useful tutorial, thanks for it! The topic of infographics is very interesting, maybe you can tell us about radial graphs?

    • @dereksiuau
      @dereksiuau 5 днів тому

      Glad you found this Webflow tutorial useful I have made a note on Radial Graphs. It would be using Chart.js most likely.

  • @adams.george
    @adams.george 7 днів тому

    Under 40 min?😮Could you upload the full video? that'd be great

    • @dereksiuau
      @dereksiuau 6 днів тому

      I have a semi timelapse of more - I will share since you are interested :)

  • @zafre-media
    @zafre-media 7 днів тому

    this was great. but I think increasing the padding to show more of the border would help to make it pop out more.

    • @dereksiuau
      @dereksiuau 6 днів тому

      Yes - Good idea, all up to you!

  • @adler.araujo
    @adler.araujo 8 днів тому

    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!

    • @dereksiuau
      @dereksiuau 6 днів тому

      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

  • @b.b.9646
    @b.b.9646 9 днів тому

    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!

    • @dereksiuau
      @dereksiuau 6 днів тому

      Glad this helped, its definitely a better approach than using an API key! - Great point you have raised.

  • @CodingWithJan
    @CodingWithJan 10 днів тому

    amazing 💪

  • @Scared_of_reality
    @Scared_of_reality 10 днів тому

    Is there anyway to change this asset url?

    • @dereksiuau
      @dereksiuau 10 днів тому

      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.

    • @Scared_of_reality
      @Scared_of_reality 10 днів тому

      @dereksiuau wanted to show pdf link in lead magnet but it's showing weird link instead of website link

    • @dereksiuau
      @dereksiuau 9 днів тому

      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.

    • @Scared_of_reality
      @Scared_of_reality 9 днів тому

      @@dereksiuau thanks ❤️

  • @kevynlevine
    @kevynlevine 11 днів тому

    Great video! I bet you can link up variables in the custom embed to make this even easier!

  • @memehubbb8
    @memehubbb8 12 днів тому

    Keep IT Up man. I'm still waiting for a course

  • @FlowVeeran
    @FlowVeeran 12 днів тому

    perfect tutorial as always

  • @Kayode-y2y
    @Kayode-y2y 12 днів тому

    Thank you sir!

  • @6th_spectre
    @6th_spectre 13 днів тому

    Great tutorial! Thanks a lot

  • @BaslielAmare
    @BaslielAmare 14 днів тому

    great vid keep it up

    • @dereksiuau
      @dereksiuau 13 днів тому

      Thanks man! Glad you liked it :)

  • @BaslielAmare
    @BaslielAmare 14 днів тому

    Amazing tutorial, love the focus on teaching and making it straight forward. This didn't feel like 17 minutes.

    • @dereksiuau
      @dereksiuau 13 днів тому

      Great to see you found value and how time just went by. Apprecaite your comment and feedback.

  • @autochehlycomua
    @autochehlycomua 14 днів тому

    Derek, thank you so much! Happy NY! With best wishes from Ukraine.

    • @dereksiuau
      @dereksiuau 13 днів тому

      It was my pleasure - thanks for the vid idea! Happy 2025 :)

  • @MAsif-hg3em
    @MAsif-hg3em 14 днів тому

    Assalam Walekum please help me Webflow tutorial

    • @dereksiuau
      @dereksiuau 13 днів тому

      Can you be more specific on what you would like a tutorial on? Will be happy to help.

  • @FlowVeeran
    @FlowVeeran 15 днів тому

    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

    • @dereksiuau
      @dereksiuau 15 днів тому

      WOW - can't believe i've missed this SMH ... Thanks!

  • @FlowVeeran
    @FlowVeeran 16 днів тому

    The last website paint toys is dope

  • @FlowVeeran
    @FlowVeeran 16 днів тому

    Long doge seems sus

    • @dereksiuau
      @dereksiuau 15 днів тому

      Mega sus - I wonder what is at the end of it LOL

    • @FlowVeeran
      @FlowVeeran 15 днів тому

      @@dereksiuau 😁

  • @ivqn
    @ivqn 18 днів тому

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

  • @Oluuwajuwonlo
    @Oluuwajuwonlo 18 днів тому

    Hi Derek Nice work Have been a day one fan Do mind reviewing some of my Webflow projects pls 😢😊

    • @dereksiuau
      @dereksiuau 15 днів тому

      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!

    • @Oluuwajuwonlo
      @Oluuwajuwonlo 15 днів тому

      @@dereksiuau thank you very much I really appreciate it do appreciate 😊😊

    • @dereksiuau
      @dereksiuau 9 днів тому

      nws - still waiting for that link you want me to review :)

  • @pelangos
    @pelangos 18 днів тому

    Nice looks good!

    • @dereksiuau
      @dereksiuau 15 днів тому

      Thanks for checking it out!

  • @JonathanCarron-yl6tf
    @JonathanCarron-yl6tf 18 днів тому

    Great video! Do you have a tuto or any ressource for make the exact same thing ? I admit I'm struggling with this.

    • @dereksiuau
      @dereksiuau 15 днів тому

      I have added this to my list sir!

    • @filetmignon9978
      @filetmignon9978 14 годин тому

      which part exactly are you struggling with? Dealing with inner dropdowns on a site atm and got it to work.

  • @JUJU-bc6wm
    @JUJU-bc6wm 18 днів тому

    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.

    • @dereksiuau
      @dereksiuau 15 днів тому

      Cheers for the kind words, I appreciate it!

  • @JUJU-bc6wm
    @JUJU-bc6wm 18 днів тому

    Thank you so much Derek!!

    • @dereksiuau
      @dereksiuau 15 днів тому

      No problem - I'm just happy to share the knowledge!

  • @Skhool-j6t
    @Skhool-j6t 19 днів тому

    Дякую за выдео

    • @dereksiuau
      @dereksiuau 15 днів тому

      Без проблем - дякую за перегляд

  • @MrSanchez-km4gk
    @MrSanchez-km4gk 19 днів тому

    bro can you give material to practice this

    • @dereksiuau
      @dereksiuau 19 днів тому

      Please elaborate what you mean, I will try my best to help out how I can!

  • @jorgoskatsimitsoulias8918
    @jorgoskatsimitsoulias8918 21 день тому

    great!!! thank you, very well explained!

  • @GermanLazarev
    @GermanLazarev 22 дні тому

    abo!

  • @GermanLazarev
    @GermanLazarev 22 дні тому

    thats exact what i search thank you

    • @dereksiuau
      @dereksiuau 21 день тому

      Thanks for commenting - glad you found it helpful sir.

  • @IamYunusAli
    @IamYunusAli 22 дні тому

    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

    • @dereksiuau
      @dereksiuau 21 день тому

      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.

  • @autochehlycomua
    @autochehlycomua 22 дні тому

    Thanks for your video! Could you explain to a beginner what the Page Wapper is? Why do you additionally use this div?

    • @dereksiuau
      @dereksiuau 21 день тому

      Yes - I will make a video about this.

    • @autochehlycomua
      @autochehlycomua 20 днів тому

      @@dereksiuau Thank you so much

  • @DRSDavidSoft
    @DRSDavidSoft 22 дні тому

    I had discovered this by accident, but I wonder what would this even be used for?

    • @dereksiuau
      @dereksiuau 21 день тому

      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.

  • @oneofafyew
    @oneofafyew 22 дні тому

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

    • @dereksiuau
      @dereksiuau 21 день тому

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

  • @disciple786
    @disciple786 22 дні тому

    Baby got backups

  • @Aliencancode
    @Aliencancode 23 дні тому

    wow, i didnt knew this before

  • @AlexisCreative
    @AlexisCreative 23 дні тому

    So simple , thanks !

  • @Rishaaaaaaa_a
    @Rishaaaaaaa_a 23 дні тому

    Nice!!! 🎉

  • @Aliencancode
    @Aliencancode 24 дні тому

    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!