CL Creative
CL Creative
  • Видео 57
  • Просмотров 52 459
How to add a Map in Webflow: Add A Mapbox Map To A Webflow Project With CMS Integration!
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:
• Setting up your Webflow project for Mapbox integration
• Adding necessary custom attributes
• Detailed walkthrough of the Mapbox codebase
• Customizing markers and popups
• Troubleshooting common issues
Enhance your Webflow projects with interactive and dynamic Mapbox maps! Don’t forget to like, subscribe, ...
Просмотров: 422

Видео

Fade in Animation in Webflow Using GSAP
Просмотров 4943 месяца назад
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
Просмотров 4034 месяца назад
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
Просмотров 6134 месяца назад
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
Просмотров 1,7 тыс.5 месяцев назад
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
Просмотров 1485 месяцев назад
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
Просмотров 3215 месяцев назад
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
Просмотров 1365 месяцев назад
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!
Просмотров 2745 месяцев назад
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!
Просмотров 5277 месяцев назад
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!
Просмотров 3317 месяцев назад
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
Просмотров 1227 месяцев назад
Are you using HTML heading elements in Webflow just to style your text? If so, you might be unknowingly compromising your site's SEO and adopting poor development practices. In this essential tutorial, we dive deep into the art of correctly using and styling headings within your Webflow projects. Discover why relying on HTML heading elements for styling is a mistake and how it negatively impact...
How to Build a CMS Driven Video Lightbox Playlist in Webflow
Просмотров 1,7 тыс.8 месяцев назад
A detailed tutorial on creating a CMS-driven video lightbox playlist using Webflow! In this video, we walk through a step-by-step process of creating an interactive video lightbox playlist with Webflow's CMS. Whether you're a web design enthusiast, a budding developer, or a seasoned professional looking to enhance your skills, this video is tailored for you. By the end of this guide, you'll hav...
How do you Build an Image Lightbox in Webflow?
Просмотров 1,5 тыс.8 месяцев назад
Discover how to create a custom image lightbox in Webflow with this comprehensive tutorial. This video walks you through the straightforward steps to configure an image lightbox, empowering you to design a captivating visual that aligns flawlessly with your website's theme. Incorporating an image lightbox not only elevates the aesthetic charm of your site but also boosts its performance by opti...
How to Create a Video Lightbox in Webflow
Просмотров 1,2 тыс.8 месяцев назад
Learn how to create a custom video lightbox in Webflow with our step-by-step tutorial. This video guides you through the simple process of setting up a video lightbox, giving you the freedom to style your front-facing image to match your website's aesthetic perfectly. Not only does this feature enhance the visual appeal of your site, but it also significantly improves page load times. A faster ...
How to Use GSAP and Webflow - Let's Make a FAQ Accordion
Просмотров 4578 месяцев назад
How to Use GSAP and Webflow - Let's Make a FAQ Accordion
Want to be a Better Designer? Use Visual Hierarchy
Просмотров 848 месяцев назад
Want to be a Better Designer? Use Visual Hierarchy
How To Use Webflow Vscode, and GitHub Together For A Seamless Workflow
Просмотров 1,8 тыс.9 месяцев назад
How To Use Webflow Vscode, and GitHub Together For A Seamless Workflow
Mastering Figma: Create Dynamic Dropdown Menus in Figma Using Variables
Просмотров 1,3 тыс.10 месяцев назад
Mastering Figma: Create Dynamic Dropdown Menus in Figma Using Variables
Get The Perfect Box Shadows In Webflow With This Figma To Webflow Guide!
Просмотров 34710 месяцев назад
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
Просмотров 37810 месяцев назад
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!
Просмотров 221Год назад
Easily Export Images From Figma To Webflow In 3 Simple Steps!
Webflow Popups that Close Multiple Ways, but Smoothly Reopen with Initial Trigger
Просмотров 397Год назад
Webflow Popups that Close Multiple Ways, but Smoothly Reopen with Initial Trigger
How to Create a Popup in Webflow Using Native Interactions
Просмотров 2,4 тыс.Год назад
How to Create a Popup in Webflow Using Native Interactions
How to style current and hover states in Webflow
Просмотров 1,6 тыс.Год назад
How to style current and hover states in Webflow
Boost Your Website Load Times: 5 Image Optimization Secrets to Turbocharge Your Website
Просмотров 82Год назад
Boost Your Website Load Times: 5 Image Optimization Secrets to Turbocharge Your Website
Embed a Responsive Google Map in Webflow: A Complete Tutorial for Static and Dynamic Pages
Просмотров 1,5 тыс.Год назад
Embed a Responsive Google Map in Webflow: A Complete Tutorial for Static and Dynamic Pages
Create Color Palettes Fast in Figma!
Просмотров 352Год назад
Create Color Palettes Fast in Figma!
How to create components in Webflow
Просмотров 808Год назад
How to create components in Webflow
How Components Can Make Your Cms Collection More Powerful
Просмотров 94Год назад
How Components Can Make Your Cms Collection More Powerful

Комментарии

  • @wayneergle
    @wayneergle 8 часов назад

    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 23 часа назад

    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 7 часов назад

      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 День назад

    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 6 часов назад

      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 5 дней назад

    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 6 часов назад

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

  • @miracledike8005
    @miracledike8005 12 дней назад

    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 12 дней назад

      Let me know what you need to understand better

  • @lennyhe2762
    @lennyhe2762 14 дней назад

    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 🙂

  • @ovictormazzei
    @ovictormazzei 16 дней назад

    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 12 дней назад

      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 29 дней назад

    This video is a life-saver, thank you!

  • @reymundoalvarez380
    @reymundoalvarez380 29 дней назад

    You are a SEO saver, Nice!

  • @liqudvx23
    @liqudvx23 Месяц назад

    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 Месяц назад

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

  • @lachie7153
    @lachie7153 Месяц назад

    What app do you use on the right side?

    • @simoncoton602
      @simoncoton602 Месяц назад

      vs code - that's just his development environment

  • @gman1976
    @gman1976 Месяц назад

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

  • @MarkGallagher-n4f
    @MarkGallagher-n4f Месяц назад

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

    • @clcreativedallas
      @clcreativedallas 12 дней назад

      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 Месяц назад

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

    • @clcreativedallas
      @clcreativedallas Месяц назад

      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 Месяц назад

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

  • @jisoostanpapi9789
    @jisoostanpapi9789 2 месяца назад

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

  • @rayqza
    @rayqza 2 месяца назад

    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 2 месяца назад

      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 2 месяца назад

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

  • @cookiemonsterrawrxd
    @cookiemonsterrawrxd 2 месяца назад

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

  • @RashedKhanMenon-u4w
    @RashedKhanMenon-u4w 2 месяца назад

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

    • @clcreativedallas
      @clcreativedallas 2 месяца назад

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

  • @bpodkowa
    @bpodkowa 2 месяца назад

    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 2 месяца назад

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

  • @clcreativedallas
    @clcreativedallas 2 месяца назад

    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 2 месяца назад

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

    • @tddizon
      @tddizon 2 месяца назад

      will definitely watch all your content bro for my portfolio!

    • @clcreativedallas
      @clcreativedallas 2 месяца назад

      Glad it helped!

  • @clcreativedallas
    @clcreativedallas 3 месяца назад

    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

  • @GHL-University
    @GHL-University 3 месяца назад

    God tier content man, been a problem i faced for quite some time. Cheers man! keep up the amazing work

  • @iliutacristian8322
    @iliutacristian8322 3 месяца назад

    I have a pop-up with a video inside, when I close the pop-up the video still runs in the background, any ideas?

    • @clcreativedallas
      @clcreativedallas 3 месяца назад

      Depending how the video is setup, you would need to add some code (Javascript) that pauses the video when the popup is dismissed.

    • @iliutacristian8322
      @iliutacristian8322 3 месяца назад

      @@clcreativedallas already found it

  • @katiasantos1569
    @katiasantos1569 3 месяца назад

    Thank you so much for this amazing video!

  • @alialkofee1
    @alialkofee1 3 месяца назад

    Great video! Thanks for sharing.

  • @Alx-Design
    @Alx-Design 3 месяца назад

    This is really helpful thank you! But I am missing the final part of the interaction: click one of the dropdown options, the title of the dropdown changes to recent clicked one and the navigation to the new screen appears. How do you do all of that with one click? help pls! I am on a deadline and can't finish my prototype thanks to the d@mn dropdown interaction :(

    • @clcreativedallas
      @clcreativedallas 3 месяца назад

      If I’m following, what you need to do is set the title on the dropdown that you are clicking to the page you want to navigate to. If you want the dropdown to look different on that page - be highlighted to show that is the page you are on, then make that change on that specific page to the navigation. .

    • @Alx-Design
      @Alx-Design 3 месяца назад

      @@clcreativedallas thanks a lot!!! you have a new subscriber btw :) keep up with the awesome tutorials

  • @AnnaMorgan-eg4qj
    @AnnaMorgan-eg4qj 3 месяца назад

    How do you add another action to close the drop down afterwards?

    • @clcreativedallas
      @clcreativedallas 3 месяца назад

      On click of one of the navigation items in the list, add an action that closes the drop down either before or after navigation. Can’t remember without looking which one you do first - close menu or navigate. But if I remember correctly the order matters.

  • @KD_ux
    @KD_ux 4 месяца назад

    How are you able to add the effect of the Carrot changing with opening and closing the menu?

    • @clcreativedallas
      @clcreativedallas 3 месяца назад

      You can use the variables to rotate the carrot. Add it as a secondary action.

    • @KD_ux
      @KD_ux 3 месяца назад

      @@clcreativedallas I don’t seem to see a way to add a variable string to the rotation

  • @shampaofficial88
    @shampaofficial88 4 месяца назад

    Hi, I have seen your RUclips channel. And described that you are not getting more and more views. So if you are interested in working with me. Or interested to get a free consultation then you can share your details. So that l can reach you.

  • @showboatblastoff
    @showboatblastoff 4 месяца назад

    Thank you for taking the time to show every step in detail. All the dots connected and now I can now see into the future!

  • @LoiseMwangi-bu5sq
    @LoiseMwangi-bu5sq 4 месяца назад

    Thanks! This was really helpful.

  • @prabhat-saini
    @prabhat-saini 4 месяца назад

    Very low sound

  • @waroakawa
    @waroakawa 4 месяца назад

    Thank you for Tips ... Very helpful

  • @HD-fe6oi
    @HD-fe6oi 4 месяца назад

    This is great. I have only one question, my arrow hides under the hero when it scrolls all the way to the top, is there a solutions to this?

    • @clcreativedallas
      @clcreativedallas 4 месяца назад

      Hey glad you found it helpful. Yes, you need to increase the z-index of the arrow until it goes over the hero section.

  • @clcreativedallas
    @clcreativedallas 4 месяца назад

    Here is the blog post: www.clcreative.co/blog/enhancing-web-design-with-css-advanced-hover-effects-using-sibling-selectors

  • @HD-fe6oi
    @HD-fe6oi 4 месяца назад

    This was great! thank you. I just did in today. I looked for the section Hero at the top, on settings named the id "Top ( You can name it whatever you want)." Then, on the "Link Block Settings under settings" I changed the section to "top." It scrolls all the way to the top now...amazing. :D

  • @clcreativedallas
    @clcreativedallas 4 месяца назад

    Here is a link to the blog post with the code: www.clcreative.co/blog/how-to-create-a-stunning-fade-in-text-effect-in-webflow-using-gsap-scroll-trigger

  • @thesirclipsalot
    @thesirclipsalot 4 месяца назад

    Thanks for the tutorial. Where would you store the api keys?

    • @clcreativedallas
      @clcreativedallas 4 месяца назад

      You are welcome. For the API part, you would need some sort of middle man to hide the API key like a server. A bit more complex than what is here. This is more for a public api that doesn't have a key. I'll have to work on a video for that.

    • @thesirclipsalot
      @thesirclipsalot 4 месяца назад

      @@clcreativedallas Sweet, I think you can do it with Webflow logic, but need to look into it.

    • @clcreativedallas
      @clcreativedallas 4 месяца назад

      @thesirclipsalot yes you can. But it is buggy. I wish they would put some effort into it. I’ve used it in the past but then had to switch everything to Make. Make is what I use now for all my automations.

    • @thesirclipsalot
      @thesirclipsalot 4 месяца назад

      @@clcreativedallas I see, seems odd they can't sort that out. Thanks for the heads up and suggestion!

    • @clcreativedallas
      @clcreativedallas 4 месяца назад

      @thesirclipsalot it’s not that they can’t. It is just that their focus has been on other things. They released all these products - Logic, e-Commerce, and Memberships and then they abandoned the projects half baked after they already released them. When asked, particularly about e-commerce, their CTO always points to other headless e-Commerce solutions that connect to Shopify using apps in the marketplace. All that to say, it doesn’t appear they have plans to revisit the functionality of these additional features. Their focus has been on the core product and making it better. Which they have definitely done and all the changes have been welcomed. However, it would be good if they could at least make these other products a bit more useable.

  • @clcreativedallas
    @clcreativedallas 5 месяцев назад

    Here is a link to the code for this video. www.clcreative.co/blog/how-to-make-an-api-call-in-webflow-and-display-the-results-on-the-page

  • @clcreativedallas
    @clcreativedallas 5 месяцев назад

    Here is the post where you can get the code and step by step instructions: www.clcreative.co/blog/dynamically-generated-quotes-in-webflow-with-cms-and-gsap

  • @НеверДай-х9с
    @НеверДай-х9с 5 месяцев назад

    Thanks man, you help me with your video, I really appreciate it ❤

  • @Abbey-qb6p
    @Abbey-qb6p 5 месяцев назад

    Every helpful. Thank you

  • @marshatudor9490
    @marshatudor9490 5 месяцев назад

    Thank you for your clear explanation! I think this approach may solve a need I have for including more than one category.

  • @roving-camera_72
    @roving-camera_72 5 месяцев назад

    Thanks for putting this video together and sharing it.

  • @nycdude12
    @nycdude12 5 месяцев назад

    Thank you soo much! This helped a lot

  • @templa946
    @templa946 5 месяцев назад

    How about with CSS, is there a way?

    • @clcreativedallas
      @clcreativedallas 3 месяца назад

      I’m not sure there is a way. You might look into another online editor to help with that

  • @Leo-zj9pv
    @Leo-zj9pv 5 месяцев назад

    Hi, there. When i public my website, the line clamping doesn't work. I make sure i followed exactly your instructions. Anything else i need to do to archive the same result like you.

    • @clcreativedallas
      @clcreativedallas 5 месяцев назад

      Sorry it is not working. Can you share the site with me and the page on which you are trying to do this. Also, you need to make sure this code is on the same page on which you are attempting to do this. And the class needs to be in the style panel with the style you are trying to do 2 lines 3 lines. Here is the link to a post: www.clcreative.co/blog/line-clamping-in-webflow-view-without-publishing

  • @AhmadAteek
    @AhmadAteek 6 месяцев назад

    thank you so much !