Designbase
Designbase
  • 63
  • 190 448
Protect Your Email from SPAMBOTS in Webflow with this TRICK!
Hi fellow Webflowers,
in this video, I am showing you a simple way how to prevent probably 95% of spambots crawling your websites for email addresses.
This trick is simple, doesn't require any coding knowledge, and it works on all websites (doesn't even matter whether you are using Webflow or something else.)
Here is the link to the tool that I use in the video
www.3fx-media.de/web-tools/e-mail-adresse-verschluesseln.html
#webflow #spamprotection #spammails #spam #uidesign #freelancing
มุมมอง: 274

วีดีโอ

Homepage breakdown of a B2B SaaS website [FIGMA WALKTHROUGH]
มุมมอง 258หลายเดือนก่อน
Hi fellow Webflowers and Figmatics, in this video I will walk you through a homepage UI design I did for Weflow (getweflow.com) a B2B SaaS company. I will explain to you the strategy behind each section and element and what makes it great. This is a great opportunity for you to learn when you are on your journey to become a professional UI designer. Let me know in the comments what you think ab...
How To Easily Create A Multistep Form In Webflow with ChatGPT
มุมมอง 1.9K3 หลายเดือนก่อน
Hi fellow Webflowers! Are you looking to create a multistep form for your Webflow website without relying on external scripts and tools? You're in the right place! In this video, I'll show you how to create your own multi-step form using ChatGPT. You can find the link to the cloneable, including the script, in the comments. If you want my prompts, leave a comment below the video with the word "...
Complete Webflow Forms Tutorial for 2024
มุมมอง 4.1K4 หลายเดือนก่อน
Hi fellow Webflowers 👋 Webflow forms are super easy to set. No matter whether it is a contact or request form. In this Webflow forms tutorial, you will learn all the basics about Webflow forms. As an example, we will build a contact form and go through the following form fields: - Input fields - Text areas - Selects (dropdowns) - Radio buttons - Checkboxes - Submit buttons I will guide you thro...
How to LAZY LOAD VIDEOS in Webflow [Tutorial + Cloneable]
มุมมอง 1.2K5 หลายเดือนก่อน
Why is lazy load essential for autoplay videos to boost your page speed? Every extra second of load time can cost potential customers. Imagine your videos no longer burden your website's load time. Lazy Load means that content is only loaded when it's actually needed. This is especially crucial for autoplay videos. Instead of loading all videos right away, your page initially loads only lightwe...
Webflow Dropdowns: How to fix closing animations on mobile
มุมมอง 1.7K6 หลายเดือนก่อน
Hi fellow Webflowers, I see again and again that people make a small but crucial mistake with #dropdowns in #Webflow, which is why the #animations do not work properly. The dropdown opens nicely, but when you close it, it disappears immediately... your closing animation is not working. And no matter what I do to the close animation, it doesn't change anything. But in this video #tutorial I will...
Export High-Resolution Images from Figma for Webflow (WEBP)
มุมมอง 2.3K8 หลายเดือนก่อน
Hi fellow Webflowers, In this tutorial, I'll show you how to easily export high-resolution images from Figma for use in Webflow. We'll also cover how to convert images to the WEBP format for faster loading on the web. This is a must-watch for any designer using both Figma and Webflow! Why is this important? WEBP is a modern file format that combines the advantages of JPG and PNG. Unlike PNG it ...
Webflow Scroll Animation Tutorial (Fundamentals, Reveal on Scroll & Parallax)
มุมมอง 15K10 หลายเดือนก่อน
Hi fellow Webflowers, So you're quite new to Webflow and want to enhance your website with some fancy scroll animations? In this video, I show you all the basics you need to know and how to apply different animation types to it. After understanding the basic concepts scroll animations, we will dive into the following examples: # A text reveal on scroll animation and # a image parallax animation...
How to activate WEBFLOW LOCALIZATION SETTINGS (multilingual)
มุมมอง 2.2K10 หลายเดือนก่อน
Hi fellow Webflowers, this is just a quick tutorial on how to activate Webflow localization on your website after you have booked the addon. You can book the addon in your site settings in the plans tab. Subscribe to my channel for an entire localization review and tutorial in the following days! #webflow #multilingual #localization #uidesign #uxdesign #webflowtutorial
Steal these 5 WEBFLOW BUTTONS [cloneable]
มุมมอง 2.8K11 หลายเดือนก่อน
In this Webflow tutorial, I will demonstrate how to build these 5 Webflow buttons and animate them with Webflow interactions and custom CSS transisitions. Feel free to use these Webflow buttons for your next project or draw inspiration from it. Additionally, I will provide a cloneable so you can save them for future use. The buttons are advanced but work without any additional libraries like GS...
Send AUTOMATED MAILS after form submissions in Webflow
มุมมอง 7K11 หลายเดือนก่อน
Hi Fellow Webflowers, recently I had to build a form for a customer and he asked me if I can set up a confirmation mail that automatically gets sent to the user. I followed me first impulse and said, “yes, sure”…. But after that, I asked myself, how should I set this up? And don’t get me wrong: I am not talking about the email you get as the admin of the website. I mean an email the person rece...
LEVEL UP your WEBFLOW GAME with CUSTOM CSS TRANSITIONS
มุมมอง 836ปีที่แล้ว
LEVEL UP your WEBFLOW GAME with CUSTOM CSS TRANSITIONS
Duplicated Animations in WEBFLOW and how to SOLVE IT
มุมมอง 496ปีที่แล้ว
Duplicated Animations in WEBFLOW and how to SOLVE IT
Mastering WEBFLOW STYLE GUIDES [Figma to Webflow Step by Step]
มุมมอง 6Kปีที่แล้ว
Mastering WEBFLOW STYLE GUIDES [Figma to Webflow Step by Step]
Webflow update: Word breaking, line breaking and text wrapping
มุมมอง 3.2Kปีที่แล้ว
Webflow update: Word breaking, line breaking and text wrapping
How to Transfer a Webflow Project to a Client Account
มุมมอง 13Kปีที่แล้ว
How to Transfer a Webflow Project to a Client Account
Webflow CMS Tutorial for Beginners
มุมมอง 21Kปีที่แล้ว
Webflow CMS Tutorial for Beginners
9 simple rules to boost your UI design skills [Webflow + Figma]
มุมมอง 910ปีที่แล้ว
9 simple rules to boost your UI design skills [Webflow Figma]
Did you know this typescale trick? [Webflow + Figma]
มุมมอง 701ปีที่แล้ว
Did you know this typescale trick? [Webflow Figma]
Webflow Bento Grid like a PRO with flex box
มุมมอง 1.4Kปีที่แล้ว
Webflow Bento Grid like a PRO with flex box
Webflow CLASS NAMING strategy (Webflow workflow series 003)
มุมมอง 3.9Kปีที่แล้ว
Webflow CLASS NAMING strategy (Webflow workflow series 003)
Build this awesome ANIMATED hero in WEBFLOW
มุมมอง 2.6Kปีที่แล้ว
Build this awesome ANIMATED hero in WEBFLOW
Webflow SECTION STRUCTURE like a pro (Webflow workflow series 002)
มุมมอง 2.7Kปีที่แล้ว
Webflow SECTION STRUCTURE like a pro (Webflow workflow series 002)
Webflow PAGE STRUCTURE like a pro (Webflow workflow series 001)
มุมมอง 4Kปีที่แล้ว
Webflow PAGE STRUCTURE like a pro (Webflow workflow series 001)
13. Advanced Webflow development tutorial: TEXT ANIMATIONS
มุมมอง 9Kปีที่แล้ว
13. Advanced Webflow development tutorial: TEXT ANIMATIONS
12. Advanced Webflow development tutorial: the FOOTER
มุมมอง 2.4Kปีที่แล้ว
12. Advanced Webflow development tutorial: the FOOTER
11. Advanced Webflow development tutorial: the FAQ section
มุมมอง 7Kปีที่แล้ว
11. Advanced Webflow development tutorial: the FAQ section
10. Advanced Webflow development tutorial: the TRUST section
มุมมอง 645ปีที่แล้ว
10. Advanced Webflow development tutorial: the TRUST section
09. Advanced Webflow development tutorial: the PROCESS section
มุมมอง 1.2Kปีที่แล้ว
09. Advanced Webflow development tutorial: the PROCESS section
08. Advanced Webflow tutorial: Build the Testimonial section with me
มุมมอง 4.4Kปีที่แล้ว
08. Advanced Webflow tutorial: Build the Testimonial section with me

ความคิดเห็น

  • @visuaaal2711
    @visuaaal2711 18 ชั่วโมงที่ผ่านมา

    greate value! thanks alot!

  • @RocknRollCEO
    @RocknRollCEO 2 วันที่ผ่านมา

    Thanks for this! Brilliant.

    • @designbasestudio
      @designbasestudio วันที่ผ่านมา

      You are welcome! Rock on 🤘🏻

  • @DylanVu-i4r
    @DylanVu-i4r 3 วันที่ผ่านมา

    My email doesn't wrap. I don't know why, pls help me

  • @RashedKhanMenon-u4w
    @RashedKhanMenon-u4w 3 วันที่ผ่านมา

    Hi, I'm a big fan of your Webflow tutorials, and they have been incredibly helpful for my projects. I was wondering if you could create a video on how to add a "popular post" feature to a blog website in Webflow. Specifically, I'd love to learn how to track post views and automatically display the most popular posts based on view count or other metrics. This would be really useful for anyone building dynamic blogs and wanting to highlight trending content. Your step-by-step approach is always super easy to follow, and I'm sure many others would benefit from this as well.

    • @designbasestudio
      @designbasestudio วันที่ผ่านมา

      Good idea! For this you would need to connect Webflow to the API of a tracking tool like fathom or plausible.

  • @shotbykejp6674
    @shotbykejp6674 4 วันที่ผ่านมา

    I just wanna thank you tor the amazing tutorials, you deserve more followers for sure :)

    • @designbasestudio
      @designbasestudio 3 วันที่ผ่านมา

      @@shotbykejp6674 thanks 🙏 but I can see the channel is growing 😉

  • @akilorosky
    @akilorosky 5 วันที่ผ่านมา

    This is great! Can it be used for phone numbers as well?

    • @designbasestudio
      @designbasestudio 4 วันที่ผ่านมา

      I think it should work. Just give it a try

    • @akilorosky
      @akilorosky 3 วันที่ผ่านมา

      @@designbasestudio Will do, thanks

  • @boggan6846
    @boggan6846 6 วันที่ผ่านมา

    fire!!!

  • @SO-fb4ef
    @SO-fb4ef 7 วันที่ผ่านมา

    what is the fix for having done work in the wrong breakpoint? surely there is a quick fix!? why would you make a useless video like this instead of an actually useful video telling us how to fix that issue you mentioned?

    • @designbasestudio
      @designbasestudio 6 วันที่ผ่านมา

      Use the finsweet chrome extension to fix it. There is a tool to merge the breakpoints.

  • @MayurPokle
    @MayurPokle 8 วันที่ผ่านมา

    Thanks, Very helpful! Quick Question: Can we also add logic with this method to skip few steps?

    • @designbasestudio
      @designbasestudio 4 วันที่ผ่านมา

      You certainly can!

    • @mayurpokle1009
      @mayurpokle1009 4 วันที่ผ่านมา

      I tried adding logic and it worked! Thanks Man! You are awesome!✨

  • @phannhieng3649
    @phannhieng3649 10 วันที่ผ่านมา

    I didn't see any interactions as you did...

  • @manuelmatsinhe06
    @manuelmatsinhe06 12 วันที่ผ่านมา

    You provide very cool Staff! I'm your new Susbcriber, keep up! 👌

  • @FavourMokwenyeMokwenye
    @FavourMokwenyeMokwenye 13 วันที่ผ่านมา

    Thanks for this

  • @Bewerslab
    @Bewerslab 13 วันที่ผ่านมา

    The exact thing we were looking for!

  • @nnnnnnastya
    @nnnnnnastya 24 วันที่ผ่านมา

    i dont understand what is Scenarios......

    • @designbasestudio
      @designbasestudio 18 วันที่ผ่านมา

      You probably need to check the documentation of Make for this

  • @pablorivera6989
    @pablorivera6989 25 วันที่ผ่านมา

    can you make a video of how you make the card slider fo the solution section

  • @_melnik__
    @_melnik__ 26 วันที่ผ่านมา

    Man, I just almost got a job at a Design Agency, but they told me that we can make it work only if I learn Webflow to an expert level in 2 months. I was losing hope until I stumbled upon your videos and I just wanted to let you know, that even if you don’t get as many views and likes, you’re still helping little people like me, that are struggling to improve themselves. Keep on with your amazing work, Danke vielmals 😊❤️

    • @designbasestudio
      @designbasestudio 24 วันที่ผ่านมา

      Thanks! I will keep pushing it man!

  • @Kaintxiv
    @Kaintxiv 27 วันที่ผ่านมา

    😭 Thank you, this has just been a pesky issue for me for like over a year that I just moved on from, then saw this. Now it's nice and smooth, hopefully they make this consistent with the interaction in the future.

    • @designbasestudio
      @designbasestudio 26 วันที่ผ่านมา

      Nice to hear that the video helped you 🙌

  • @eunice_oq
    @eunice_oq 28 วันที่ผ่านมา

    This is great <3

  • @SeshRogen
    @SeshRogen หลายเดือนก่อน

    08:50 so simple yet so smart to not just show the latest posts there. That's my key take away from the video, thanks a lot!

    • @designbasestudio
      @designbasestudio หลายเดือนก่อน

      You‘re welcome. I am happy that it helped

  • @dariostefanutto5780
    @dariostefanutto5780 หลายเดือนก่อน

    Thank you! this helped me a lot :)

  • @ArtEntity
    @ArtEntity หลายเดือนก่อน

    SO HELPFUL U ARE AMAZING

  • @MarceloIsasmendi
    @MarceloIsasmendi หลายเดือนก่อน

    Hey there, the "Get the free Figma template" link leads to a 404

    • @MarceloIsasmendi
      @MarceloIsasmendi หลายเดือนก่อน

      The one in your website and in the Webflow marketplace.. the one in the video description actually works

  • @LordBoltagon
    @LordBoltagon หลายเดือนก่อน

    font-size: clamp();

    • @designbasestudio
      @designbasestudio หลายเดือนก่อน

      Using it all the time nowadays

  • @malikyasirsattar1483
    @malikyasirsattar1483 หลายเดือนก่อน

    I love it

  • @WebdevPath
    @WebdevPath หลายเดือนก่อน

    Kannst du Deutsch?

    • @designbasestudio
      @designbasestudio หลายเดือนก่อน

      Ist meine Muttersprache 😉

    • @WebdevPath
      @WebdevPath หลายเดือนก่อน

      @@designbasestudio Schön! Dein English ist aber echt gut!

  • @VoyagesJapan
    @VoyagesJapan หลายเดือนก่อน

    FANTASTIC trick! Thank you so much!!

  • @andyhering
    @andyhering หลายเดือนก่อน

    Hi, thanks, exactly what I have been looking for. One question I have though: when I make the component, unbind it and rename the classes like Section -> About, Section_wrap -> About_wrap it also renames the classes of the component. What am I doing wrong? Thanks in advance

    • @designbasestudio
      @designbasestudio หลายเดือนก่อน

      You need to copy the classes first and then rename them

  • @tupomitole1083
    @tupomitole1083 หลายเดือนก่อน

    Can you have a video about doing an actual web design process in figma and utilizing your style guide in designing the website

  • @thedukeofwales
    @thedukeofwales หลายเดือนก่อน

    Absolutely spectacular tutorial. I was about ready to rip my hair out watching all of the other reviews before I came across yours. Quick question though, is it possible to add scrolling through the testimonials while keeping the animation or do they have to be separate? Total Webflow newbie here. Thanks!

  • @pablorivera6989
    @pablorivera6989 หลายเดือนก่อน

    Million dolar video thank you 💯💯

  • @arsen_management
    @arsen_management หลายเดือนก่อน

    thanks, very helpful

  • @muhammadusmanyousaf3884
    @muhammadusmanyousaf3884 หลายเดือนก่อน

    just saw the best tutor of webflow

  • @TheJirino
    @TheJirino หลายเดือนก่อน

    considering the amount of ads, it's unwatchable

  • @bhukyadayakar8782
    @bhukyadayakar8782 หลายเดือนก่อน

    That slack notification sound made me tense bro😬...

  • @DanBrowntbh
    @DanBrowntbh หลายเดือนก่อน

    From video 1-13, all videos are packed with value.Appreciate the tutorials Felix.

    • @designbasestudio
      @designbasestudio หลายเดือนก่อน

      Thanks Dan! You are welcome!

  • @thasneema8836
    @thasneema8836 หลายเดือนก่อน

    Hi, I was sent an ongoing workspace, but when I login, I cannot seem to see it. please let me know how to access the tranferred account..

    • @designbasestudio
      @designbasestudio หลายเดือนก่อน

      You can be invited to a workspace but can’t send one. You can only send a project.

  • @rajani_soni
    @rajani_soni หลายเดือนก่อน

    please make a video on how to reduce spams in webflow, i have a webflow form and spammers are bypassing the required phone number field, i have tried recaptcha and honeypot, but they are bypassing it, what possible issue could be?

  • @JonBanquer
    @JonBanquer หลายเดือนก่อน

    I got stuck on the official Webflow tutorial that introduced Forms. Your video got me back on track. Thank you! You are an excellent teacher and very good with Webflow!

  • @ChrysB-i1r
    @ChrysB-i1r หลายเดือนก่อน

    mobile version doesnt work... we have 2 colomn also i need 1

  • @private_krapfen950
    @private_krapfen950 2 หลายเดือนก่อน

    can i transfer a website with an site plan already attached, from one workspace to another workspace and take the site plan with me?

    • @designbasestudio
      @designbasestudio 2 หลายเดือนก่อน

      No but you will get credits for the plan but I am not 100% sure about this. You can get more info from the Webflow support

  • @marinastativko6252
    @marinastativko6252 2 หลายเดือนก่อน

    Thank you for sharing, very useful information! But how do you solve the issue of autoplaying videos on iOS and Android?

    • @designbasestudio
      @designbasestudio 2 หลายเดือนก่อน

      You have to put „playsinline“ into the video tag. I actually forgot this in the video.

  • @WinolaLobo
    @WinolaLobo 2 หลายเดือนก่อน

    Hello thank you so much for this!! Much appreciated :) Is there anyway we can validate only phone numbers on the numbers field? Perhaps a code we can input to make sure users are entering only 10-digits for example? Have a lovely day xx

    • @designbasestudio
      @designbasestudio 2 หลายเดือนก่อน

      You could give this field an ID and than let ChatGPT write a script for it.

  • @actualiized
    @actualiized 2 หลายเดือนก่อน

    you missed the most important step

  • @etere5752
    @etere5752 2 หลายเดือนก่อน

    I have used custom code and more that two pages for a proect and I want to give it to my client, so they'll host on their own in webflow. Does my client need to buy a workspace plan (that is not a free plan) in order to edit the content?

    • @designbasestudio
      @designbasestudio 2 หลายเดือนก่อน

      In the free workspace plan you can have to projects with staging domains. The free hosting plan has a lot of limitations. For example you can't edit custom code in embed fields. Further more the amount of CMS collections and items is limited... For details you would need to check the pricing page of Webflow.

  • @mustufazaki3438
    @mustufazaki3438 2 หลายเดือนก่อน

    Dude your 16 min video saved my couple of days of RND great video I followed all your steps and integrate it in my site

    • @designbasestudio
      @designbasestudio 2 หลายเดือนก่อน

      🙌 that is the feedback i love!!!

  • @Zmoorgekaffii158
    @Zmoorgekaffii158 2 หลายเดือนก่อน

    What i do not understand is: Imagine we have a utility class d-flex, it only contains display:flex; justify-content:center align-items:center; Now you add a doviv block and give the div block d-flex All okay but now i have a .button and i want to apply the d-flex class so .button .d-flex It wont work because i need to set up a second class d-flex wich is only used by .button This confuses me because i cant make real global utility classes only utility classes wich is used by a specific element... Or is there a way to make a utility class wich can be used to all elements like in my example .div .d-flex and .button d-flex or even .link-block .d-flex? Im not sure if its clear what i mean but if you programming without webflow you can make this freely. In html it would look like this: Css: .d-flex{ Display:flex; Justify-content:center; Align-items:center; } .div { Width:100px; Height:100px; } .button { Width:100px; Height:100px; } .link { Width:100px; Height:100px; } <div class="div d-flex"></div> <button class="button d-flex></button> <a class="link d-flex"></a> And in webflow i saw only the possibility to make it like this: .div.d-flex { Display:flex; Justify-content:center; Align-items:center; } .button.d-flex { Display:flex; Justify-content:center; Align-items:center; } .link.d-flex { Display:flex; Justify-content:center; Align-items:center; } In this case i need to set d-flex for evry element individual. I think now its clear what i mean^^

    • @designbasestudio
      @designbasestudio 2 หลายเดือนก่อน

      This sounds like there is a problem with the order of your classes within Webflows CSS file. This can happen from time to time. Install Finsweets Browser Extension. There is a tool to reorder your styles. Move the d-flex class to the bottom and than it should work... PS. Make a backup before you do this ;)

  • @RashedKhanMenon-u4w
    @RashedKhanMenon-u4w 2 หลายเดือนก่อน

    You are awesome. Please upload more videos on Webflow.

  • @JohannesBruns
    @JohannesBruns 2 หลายเดือนก่อน

    I have a question concerning the auto-hyphens technique: In general I think the auto-hyphens is a big help. It just results in the issue that a lot of words break not very nicely on small breakpoints (maybe even more on pages featuring german language). E.g: "Was wir mit Ihnen teilen wollen" is supposed to break like: "Was wir mit Ihnen teilen wollen" But it breaks like: "Was wir mit Ih- nen teilen wol- len" Dear Felix and other Community members, please let us know your approches towards such issues. here you can find also a screen shot of this passage: drive.google.com/file/d/1o0ZqijSanyOw_UcYPkTs8PyWG4frWkC3/view?usp=sharing

    • @designbasestudio
      @designbasestudio 2 หลายเดือนก่อน

      Instead of applying autp hyphens to the body you could just apply it to h1, h2 and so on... or even create an utility class and apply it to single headlines or even words when putting them in a span. How ever this approach is not very efficient. If there is a line beak after "Was wir mit..." than the screan is rather very small or you could consider to use smaller font sizes. I checked the website and on desktop the large headlines looks great but on mobile I would go with a softer typescale... Hope this helps!

    • @JohannesBruns
      @JohannesBruns 2 หลายเดือนก่อน

      @@designbasestudio thank you so much for your time and help! You have already helped a lot :) ...sometimes it's just a little bit of input what is missing...

  • @JohannesBruns
    @JohannesBruns 2 หลายเดือนก่อน

    Besten Dank für den genialen Tipp mit Auto Hyphens!

    • @designbasestudio
      @designbasestudio 2 หลายเดือนก่อน

      Gerne! Freut mich das es hilft

  • @coppersulphate002
    @coppersulphate002 2 หลายเดือนก่อน

    What to do if we don't have a website yet?

    • @designbasestudio
      @designbasestudio 2 หลายเดือนก่อน

      Well, if you need one you could learn how to build one or hire someone to do it

    • @coppersulphate002
      @coppersulphate002 2 หลายเดือนก่อน

      @@designbasestudio you didnt answer my question! what do I in the event that I dont have a website yet? Could I use other alternatives to websites such landing page, linkedIn, Instagram? Because Im not ready to create a website for time and financial restraints so it's not a priority for