CL Creative
CL Creative
  • 61
  • 73 903
Aligning Buttons On Blog Cards: Use The Auto Align Trick!
Struggling to align card buttons perfectly in Webflow? In this tutorial, I’ll show you the margin auto trick to ensure your buttons stay aligned at the bottom of your cards-regardless of the content length. 🎯
Relying on the content length to align buttons is frustrating and bad practice. It forces you to create summaries of the same size every time, limiting creativity and flexibility. This approach is especially impractical when building client websites, where design flexibility is key.
By following this tutorial, you’ll learn how to create flexible, responsive cards that consistently align your buttons, no matter how much content you have. Say goodbye to uneven card layouts and hello to clean, professional designs! 💻✨
👉 Watch now and take your Webflow skills to the next level! Don't forget to like, comment, and subscribe for more tips and tricks. 🚀
มุมมอง: 95

วีดีโอ

How to Create a Dynamic Parallax Hover Effect in Webflow
มุมมอง 3822 หลายเดือนก่อน
💻 Learn how to create a stunning parallax hover effect for your website! In this step-by-step tutorial, we’ll show you how to build an interactive and visually engaging parallax effect that responds to mouse movements in Webflow. 🎯 What You’ll Learn: - Structuring your HTML for parallax animation. - Styling elements with CSS for smooth transitions and precise positioning. - Writing JavaScript t...
How to integrate Swiper JS into your Webflow project in 4 Easy Steps
มุมมอง 3233 หลายเดือนก่อน
In this video, I'll show you how to integrate Swiper JS into your Webflow project in just 4 easy steps! Swiper JS is a powerful and flexible solution for creating custom sliders that offer more control and customization compared to Webflow's native slider. If you've been looking for a better way to add beautiful, responsive sliders to your Webflow website, you're in the right place. I've also c...
SEO Audit: 5 Easy Steps to Boost Your Plumbing Business
มุมมอง 713 หลายเดือนก่อน
Want to boost your plumbing website's performance? 🚀 Here's how to perform an SEO audit on your Plumbing Business Website in 5 easy steps: (1) Check Your Site Speed - A fast website is key to keeping visitors happy. (2) Review Title Tags & Meta Descriptions - Make sure they're optimized with the right keywords. (3) Audit Your Content - Quality content drives traffic and engagement. - Ensure you...
How to add a Map in Webflow: Add A Mapbox Map To A Webflow Project With CMS Integration!
มุมมอง 1.3K6 หลายเดือนก่อน
Here is a complete guide on how to add a Mapbox map to your Webflow project utilizing Webflow's CMS! In this video, we’ll walk you through every step of setting up your Webflow project to integrate seamlessly with Mapbox. We’ll cover all the custom attributes you need to add, as well as provide an in-depth walkthrough of the codebase to ensure your map functions perfectly. We’ll cover: • Settin...
Fade in Animation in Webflow Using GSAP
มุมมอง 8537 หลายเดือนก่อน
Learn how to use GSAP in your Webflow projects to create a fade-in and stagger animations. It takes a couple lines of code, provided in the linked blog post, and minimal setup in your project. You will be able to create fade-in and stagger animations on any element you want inside your Webflow project. Speed up your build time and up your animation game.
Advanced Hover Effects in Webflow with CSS Only
มุมมอง 6788 หลายเดือนก่อน
In this tutorial, I'll show you how to bypass Webflow's limitations and use CSS to achieve sophisticated hover effects on your web projects. Forget about settling for basic Webflow interactions; let's dive into some real CSS magic! 🔗 Why CSS Over Webflow Interactions? Webflow restricts nesting collection lists within a link block, like categories on blog cards. This limitation can stifle your d...
How to Create a Stunning Fade-In Text Effect in Webflow Using GSAP Scroll Trigger
มุมมอง 9138 หลายเดือนก่อน
Welcome to our latest tutorial where we dive into the world of animations in Webflow! In this video, I'll guide you through the process of creating an eye-catching fade-in text effect, where each letter of a word gradually appears as you scroll. This effect is perfect for adding a touch of sophistication and interactivity to your web projects. What You Will Learn: - How to utilize GSAP and the ...
How to Make an API Call In Webflow and Display the Results on the Page
มุมมอง 3.7K9 หลายเดือนก่อน
Join us in this practical tutorial where we demonstrate how to seamlessly integrate API calls into your Webflow projects and display the data directly on your web pages. Whether you're looking to fetch real-time data or enhance your site with dynamic content, this video covers all the steps necessary to make it happen. We'll walk you through the entire process, from setting up the API call to m...
Dynamic Quotes Powered by Webflow CMS and GSAP
มุมมอง 2329 หลายเดือนก่อน
Welcome to our latest tutorial video, "Dynamic Quotes Powered by Webflow CMS and GSAP." This video is a practical guide on how to use Webflow's CMS and GSAP’s animation capabilities to dynamically display quotes on your website. We’ll cover everything you need to know to set up a CMS Quote Generator, demonstrating two methods: displaying a random quote each time a page loads and creating a scro...
Sort Any CMS Collection with this Simple Tip
มุมมอง 8219 หลายเดือนก่อน
Webflow CMS collections are powerful. But the sorting provided right out of the box may not be what you need. Ever wanted to sort a portfolio list in a specific order, or blog post list sorted in a way other than by date? How about a custom CMS of products that you need to display in the perfect order? I'll show you how to sort your CMS collection so that just the right collection items show up...
Your Digital Partner
มุมมอง 1679 หลายเดือนก่อน
At CL Creative, we understand that a website is not just another web address. It’s your first impression, your digital sales pitch, and a key tool for building relationships and winning clients. For those in the eCommerce space, it’s as critical as your best sales associate. That’s why we take on only three to five projects each month. Creating a website that truly reflects your brand and conve...
Mastering Webflow: Unlock Advanced CMS Techniques and CSV Imports!
มุมมอง 3709 หลายเดือนก่อน
Unlock the full potential of Webflow's CMS in this detailed tutorial! 🚀 Whether you're a beginner looking to level up or an experienced designer eager to streamline your workflows, this video is for you. I'll guide you through the advanced process of creating CMS collections using components and demonstrate how to efficiently import data using Webflow's CSV import feature. What you'll learn: Un...
Effortlessly Connect Your Webflow Form To Airtable - No Zapier Or Make Required!
มุมมอง 79011 หลายเดือนก่อน
In this tutorial, we dive deep into the seamless integration between Webflow and Airtable, showcasing how to send form submissions directly to Airtable without relying on third-party connectors like Zapier or Make. We leverage the power of webhooks to create a streamlined process, ensuring your data flows smoothly and efficiently from one platform to the other. Whether you're a marketer, a web ...
Master Mobile Responsive Card Layouts With Flexbox In Webflow!
มุมมอง 47111 หลายเดือนก่อน
In this detailed tutorial, we explore the power of Flexbox for creating mobile-responsive cards within Webflow, offering a practical guide for web designers and developers at all skill levels. Flexbox is a cornerstone of modern web design, allowing for flexible and efficient layouts that adapt seamlessly across devices. This video provides a comprehensive walkthrough from the initial setup in W...
Avoid This Major Seo Mistake: Why You Shouldn't Style Headings Like This In Webflow
มุมมอง 13711 หลายเดือนก่อน
Avoid This Major Seo Mistake: Why You Shouldn't Style Headings Like This In Webflow
How to Build a CMS Driven Video Lightbox Playlist in Webflow
มุมมอง 2.5Kปีที่แล้ว
How to Build a CMS Driven Video Lightbox Playlist in Webflow
How do you Build an Image Lightbox in Webflow?
มุมมอง 2.7Kปีที่แล้ว
How do you Build an Image Lightbox in Webflow?
How to Create a Video Lightbox in Webflow
มุมมอง 1.8Kปีที่แล้ว
How to Create a Video Lightbox in Webflow
How to Use GSAP and Webflow - Let's Make a FAQ Accordion
มุมมอง 608ปีที่แล้ว
How to Use GSAP and Webflow - Let's Make a FAQ Accordion
Want to be a Better Designer? Use Visual Hierarchy
มุมมอง 94ปีที่แล้ว
Want to be a Better Designer? Use Visual Hierarchy
How To Use Webflow Vscode, and GitHub Together For A Seamless Workflow
มุมมอง 2.4Kปีที่แล้ว
How To Use Webflow Vscode, and GitHub Together For A Seamless Workflow
Mastering Figma: Create Dynamic Dropdown Menus in Figma Using Variables
มุมมอง 1.9Kปีที่แล้ว
Mastering Figma: Create Dynamic Dropdown Menus in Figma Using Variables
Get The Perfect Box Shadows In Webflow With This Figma To Webflow Guide!
มุมมอง 437ปีที่แล้ว
Get The Perfect Box Shadows In Webflow With This Figma To Webflow Guide!
Mastering SEO with Webflow: Bind CMS Collections to Text Spans for Optimized Landing Pages
มุมมอง 563ปีที่แล้ว
Mastering SEO with Webflow: Bind CMS Collections to Text Spans for Optimized Landing Pages
Easily Export Images From Figma To Webflow In 3 Simple Steps!
มุมมอง 257ปีที่แล้ว
Easily Export Images From Figma To Webflow In 3 Simple Steps!
Webflow Popups that Close Multiple Ways, but Smoothly Reopen with Initial Trigger
มุมมอง 598ปีที่แล้ว
Webflow Popups that Close Multiple Ways, but Smoothly Reopen with Initial Trigger
How to Create a Popup in Webflow Using Native Interactions
มุมมอง 3.6Kปีที่แล้ว
How to Create a Popup in Webflow Using Native Interactions
How to style current and hover states in Webflow
มุมมอง 2.6Kปีที่แล้ว
How to style current and hover states in Webflow
Boost Your Website Load Times: 5 Image Optimization Secrets to Turbocharge Your Website
มุมมอง 96ปีที่แล้ว
Boost Your Website Load Times: 5 Image Optimization Secrets to Turbocharge Your Website

ความคิดเห็น

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

    Really Useful tutorial, Thank you! 🔥

  • @OnlineShoppingMustHaves1
    @OnlineShoppingMustHaves1 7 วันที่ผ่านมา

    This was an awesome video. Thank you.

  • @YouTube-Developer-BD
    @YouTube-Developer-BD 12 วันที่ผ่านมา

    Hi Sir, Suggestions for Growing Your TH-cam Channel I have reviewed your TH-cam channel and noticed that it has great potential to grow further. If you're interested, I can share some effective tips to increase subscribers and video views on your channel. Thank you.

  • @wetals.
    @wetals. 20 วันที่ผ่านมา

    I asked perplexity how to create custom slider in webflow and it recommended your video. Thank you.

    • @clcreativedallas
      @clcreativedallas 20 วันที่ผ่านมา

      That is awesome. Thank you for sharing.

  • @WildlifeWhispers-m7g
    @WildlifeWhispers-m7g 24 วันที่ผ่านมา

    You just won a subscriber

  • @marcusfrancis24
    @marcusfrancis24 29 วันที่ผ่านมา

    Amazing work, thank you!! Would you be opposed sharing this a a webflow cloneable?

    • @clcreativedallas
      @clcreativedallas 20 วันที่ผ่านมา

      I will look into creating one. However, this was from a client project, so I can't recreate this exactly. But here is the live site: www.liquordepotusa.com/store-locator

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

    Thanks for making these tutorials! They're so helpful.

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

    Cloneable webflow project please!

    • @clcreativedallas
      @clcreativedallas 20 วันที่ผ่านมา

      I will look into creating one. However, this was from a client project, so I can't recreate this exactly. But here is the live site: www.liquordepotusa.com/store-locator

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

    Great video! Question - how do did you get around the 2nd click for interactions? I watched this video slowly a couple times but on a website i'm working on, with a similiar pop up, I have to click the trigger 2 times after the first time. If only I could change the trigger for the 2nd click within the same interaction. Frustrating haha...

    • @clcreativedallas
      @clcreativedallas 20 วันที่ผ่านมา

      You set two animations, one to open the popup and another to close the popup. Both are set to first click. You wouldn't use second click on this animation.

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

    thank you so much ❤ helps a lot

  • @Rubred-gr2cw
    @Rubred-gr2cw หลายเดือนก่อน

    For some reason I still got my popup appears although initial state should be hidden :(

    • @clcreativedallas
      @clcreativedallas 20 วันที่ผ่านมา

      I would have to know more about your setup. But you may make sure the initial state is set to hidden. The popup button is used to set the state to show when the button is clicked.

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

    Here's the code to save some time: <div class ="google-map"> < src=(replace with your google map) height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></> </div> <style> .google-map { overflow: hidden; padding-bottom: 56.25%; position:relative; height:0; } .google-map { left: 0; top: 0; height:100%; width:100%; position:absolute; }

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

    can you share the webflow link so we can click around and see how your named and structured your page?

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

    Thanks!

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

    thank you!

  • @dominic-stein
    @dominic-stein 2 หลายเดือนก่อน

    THANK YOUUUUUU

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

    So easy and helpful. Thank you!

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

    Thank you for the tutorial, hope there will be more of these

    • @clcreativedallas
      @clcreativedallas 20 วันที่ผ่านมา

      For sure. I am ramping back up for 2025

  • @NikolayAlekseev-zc6zz
    @NikolayAlekseev-zc6zz 2 หลายเดือนก่อน

    how to make so smooth screencast?)))

    • @clcreativedallas
      @clcreativedallas 20 วันที่ผ่านมา

      I use screen studio. It is amazing!

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

    that is insane. cost me about 1/2 hour how to change the "current" color of link. 2:00

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

    Here is the blog post: www.clcreative.co/blog/how-to-integrate-swiper-js-in-your-webflow-project-in-4-easy-steps

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

    Thank you!

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

    What about I want to set for a specific section? I can't see current state

    • @clcreativedallas
      @clcreativedallas 20 วันที่ผ่านมา

      I would suggest reloading the page. Current state can be frustrating as it doesn't show some times

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

    Do you have a cloneable of this? It would really help.

    • @clcreativedallas
      @clcreativedallas 20 วันที่ผ่านมา

      I don't but here is the link to the client project: www.liquordepotusa.com/store-locator

  • @savvase.9809
    @savvase.9809 3 หลายเดือนก่อน

    How can we make Cookie, Term & Policy pop-up notifications?

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

    Thank you SO much! This saved me so much time and hassle

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

    Amzing Job! Thank You!!!!

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

      My pleasure! Glad it helped you.

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

    Nice! I found other videos that said to set the navbar to fixed, but they were sort of clunky. This is simple and works well.

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

    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.

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

      Thank you for the compliment. And thank you for the suggestion. I will have to look into how to do that. One thing comes to mind - you can do this manually or automated. Manually would be a little easier to implement but more work to keep up with. Automated with require hitting some API's - particularly Google and then comparing the results before modifying the CMS collection. Would be more involved on the front end but would be automated at that.

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

    The part where "oh hey guys! I already labeled my animation... so do that too!" Confused the sht out of me. You didn't tell us to label our actions.

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

      Just name the animation Modal 1 Popup Open and Modal 1 Popup Close. This will help later instead of have it named New Timed Animation. I was just showing you how to create it with the New Timed Animation. But after you create them, give them a name that makes sense for its action, like what I put above.

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

    at 4:10 you're showing how to build the webhook setup in airtable "automation 1" , you say oups and you're now showing "contact form submission", which is already fully setup....... So we miss the actually value of the video. But still great explanations

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

      Sorry for the skip, but go to timestamp 4:19 and you will see what should be put there.

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

    Nice resource! But because the process is a bit complex and the tutorial isn't a step-by-step approach, it is really confusing.

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

      Let me know what you need to understand better

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

    Hi Dalls, great job! I love that!!! One question: Can you make the project available for download so that the projects can be synchronised more easily? That would be amazing! Thank you 🙂

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

      What do you mean by for download?

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

      That I can clone the map for using

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

    Hey mate, thanks for the video. Are you able to make one with CMS links? So, a user click on one of the collection items, and the pop up that opens is related to the content on that particular collection item automatically, without the need to set one by one? Thanks!

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

      Are you envisioning that there would be multiple popups on the page? Also, how are they connected to the CMS? In other words, what are you trying to pull from the CMS for the popup?

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

    This video is a life-saver, thank you!

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

    You are a SEO saver, Nice!

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

    Hi this is extremely helpful. I'm trying to follow your steps but for some reason I don't get the options to connect my lightbox to a video. I know my collection has videos with links, but the field doesnt show up. Any advice would be helpful. Thank you! Great content by the way!

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

      What video field do you have in your CMS? I believe it needs to be a video field you can add a TH-cam or Vimeo video to.

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

    What app do you use on the right side?

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

      vs code - that's just his development environment

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

      Correct. I am using VS Code

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

    Earl's? lol. my bad, that was funny.

  • @MarkGallagher-n4f
    @MarkGallagher-n4f 5 หลายเดือนก่อน

    Good stuff! Would there be a way to filter the collection list?

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

      How are you needing to filter the collection list? Do you mean the one on the left side bar? If so, you may be able to use Finsweet's CMS filter

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

    Hey! its not really working for me:( would be lovely to know the reason!

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

      Thanks for your question. But this doesn't provide me any context. I'd work back through the video to make sure you have implemented everything correctly. Or provide me some context as to what is not working.

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

      @@clcreativedallas may I send you the share read only link via email?

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

    WOW, thank you so much. Great explanation and really easy to follow!

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

    Thank you so much for this!! I do have a question: How hard would it be to host the database outside of Webflow (I was thinking Airtable) and fetch the data through an API? I’m building a business directory for a client but the number of businesses would go over the CMS item limit in Webflow. Also, any idea how I could add filtering dropdowns (e.g If I want to filter by business-type & sub-type)
Any info that can lead me in the right direction would be greatly appreciated!!

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

      I think for what you are talking about, you would want to look into Wized. You can integrate it with Airtable as the Database. Wized would allow you to call Airtable based on certain parameters. You can also setup filtering with Finsweet's Filtering Attributes. However, I am not sure how it will work with an external api call. I am assuming the same as it just filters the list available on the page.

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

    Thank you so much for this. You went at the perfect pace.

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

    Amazing. Thank you so much. You're a great teacher!

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

      You're very welcome! And thank you.

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

    Thanks a lot. You are awesome. Please make a video how to create newspaper website with webflow.

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

      thank you. And thank you for the suggestions. Will add that to the list.

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

    Hi Casey, thanks for such a great in-depth integration topic with the support of blog-post. The best extensive map integration clip for Webflow. Keep posting such a great integrations - Thank you.

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

      You are welcome. I am glad you found the video helpful.

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

    Here is the link to the blog post with all the code and detailed instructions: www.clcreative.co/blog/how-to-add-a-mapbox-map-to-a-webflow-project-complete-guide

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

    Thanks! Just followed all your instructions and it worked well!

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

      will definitely watch all your content bro for my portfolio!

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

      Glad it helped!

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

    Here is the blog post that provides you with all the code for the animation. www.clcreative.co/blog/how-to-use-gsap-in-webflow-a-guide-to-fade-in-and-stagger-animations