- Видео 61
- Просмотров 70 799
CL Creative
США
Добавлен 11 июл 2022
Teaching you Webflow and Web Design one video at a time.
Be empowered to create a website that not only looks good and functions well, but also, and more importantly, helps your business succeed.
Be empowered to create a website that not only looks good and functions well, but also, and more importantly, helps your business succeed.
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 c...
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 c...
Просмотров: 41
Видео
How to Create a Dynamic Parallax Hover Effect in Webflow
Просмотров 3452 месяца назад
💻 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
Просмотров 2962 месяца назад
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
Просмотров 702 месяца назад
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,2 тыс.6 месяцев назад
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
Просмотров 8006 месяцев назад
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
Просмотров 6348 месяцев назад
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
Просмотров 8738 месяцев назад
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,4 тыс.8 месяцев назад
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
Просмотров 2198 месяцев назад
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
Просмотров 7288 месяцев назад
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
Просмотров 1648 месяцев назад
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!
Просмотров 3579 месяцев назад
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!
Просмотров 76610 месяцев назад
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!
Просмотров 44311 месяцев назад
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
Просмотров 13611 месяцев назад
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,4 тыс.11 месяцев назад
How to Build a CMS Driven Video Lightbox Playlist in Webflow
How do you Build an Image Lightbox in Webflow?
Просмотров 2,5 тыс.11 месяцев назад
How do you Build an Image Lightbox in Webflow?
How to Create a Video Lightbox in Webflow
Просмотров 1,7 тыс.11 месяцев назад
How to Create a Video Lightbox in Webflow
How to Use GSAP and Webflow - Let's Make a FAQ Accordion
Просмотров 58611 месяцев назад
How to Use GSAP and Webflow - Let's Make a FAQ Accordion
Want to be a Better Designer? Use Visual Hierarchy
Просмотров 92Год назад
Want to be a Better Designer? Use Visual Hierarchy
How To Use Webflow Vscode, and GitHub Together For A Seamless Workflow
Просмотров 2,4 тыс.Год назад
How To Use Webflow Vscode, and GitHub Together For A Seamless Workflow
Mastering Figma: Create Dynamic Dropdown Menus in Figma Using Variables
Просмотров 1,8 тыс.Год назад
Mastering Figma: Create Dynamic Dropdown Menus in Figma Using Variables
Get The Perfect Box Shadows In Webflow With This Figma To Webflow Guide!
Просмотров 418Год назад
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
Просмотров 537Год назад
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!
Просмотров 256Год назад
Easily Export Images From Figma To Webflow In 3 Simple Steps!
Webflow Popups that Close Multiple Ways, but Smoothly Reopen with Initial Trigger
Просмотров 568Год назад
Webflow Popups that Close Multiple Ways, but Smoothly Reopen with Initial Trigger
How to Create a Popup in Webflow Using Native Interactions
Просмотров 3,5 тыс.Год назад
How to Create a Popup in Webflow Using Native Interactions
How to style current and hover states in Webflow
Просмотров 2,5 тыс.Год назад
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
I asked perplexity how to create custom slider in webflow and it recommended your video. Thank you.
That is awesome. Thank you for sharing.
You just won a subscriber
Awesome!
Amazing work, thank you!! Would you be opposed sharing this a a webflow cloneable?
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
Thanks for making these tutorials! They're so helpful.
You're very welcome!
Cloneable webflow project please!
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
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...
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.
thank you so much ❤ helps a lot
You're welcome 😊
For some reason I still got my popup appears although initial state should be hidden :(
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.
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; }
can you share the webflow link so we can click around and see how your named and structured your page?
Thanks!
Welcome!
thank you!
You're welcome!
THANK YOUUUUUU
You are welcome
So easy and helpful. Thank you!
Glad it was easy.
Thank you for the tutorial, hope there will be more of these
For sure. I am ramping back up for 2025
how to make so smooth screencast?)))
I use screen studio. It is amazing!
that is insane. cost me about 1/2 hour how to change the "current" color of link. 2:00
Here is the blog post: www.clcreative.co/blog/how-to-integrate-swiper-js-in-your-webflow-project-in-4-easy-steps
Thank you!
You are welcome
What about I want to set for a specific section? I can't see current state
I would suggest reloading the page. Current state can be frustrating as it doesn't show some times
Do you have a cloneable of this? It would really help.
I don't but here is the link to the client project: www.liquordepotusa.com/store-locator
How can we make Cookie, Term & Policy pop-up notifications?
Thank you SO much! This saved me so much time and hassle
Glad it helped!
Amzing Job! Thank You!!!!
My pleasure! Glad it helped you.
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.
Glad it helped!
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.
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.
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.
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.
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
Sorry for the skip, but go to timestamp 4:19 and you will see what should be put there.
Nice resource! But because the process is a bit complex and the tutorial isn't a step-by-step approach, it is really confusing.
Let me know what you need to understand better
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 🙂
What do you mean by for download?
That I can clone the map for using
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!
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?
This video is a life-saver, thank you!
You are welcome.
You are a SEO saver, Nice!
My pleasure
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!
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.
What app do you use on the right side?
vs code - that's just his development environment
Correct. I am using VS Code
Earl's? lol. my bad, that was funny.
Good stuff! Would there be a way to filter the collection list?
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
Hey! its not really working for me:( would be lovely to know the reason!
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.
@@clcreativedallas may I send you the share read only link via email?
WOW, thank you so much. Great explanation and really easy to follow!
Glad it was helpful!
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!!
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.
Thank you so much for this. You went at the perfect pace.
Glad it was helpful!
Amazing. Thank you so much. You're a great teacher!
You're very welcome! And thank you.
Thanks a lot. You are awesome. Please make a video how to create newspaper website with webflow.
thank you. And thank you for the suggestions. Will add that to the list.
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.
You are welcome. I am glad you found the video helpful.
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
Thanks! Just followed all your instructions and it worked well!
will definitely watch all your content bro for my portfolio!
Glad it helped!
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
God tier content man, been a problem i faced for quite some time. Cheers man! keep up the amazing work
Thank you for the kind words.
I have a pop-up with a video inside, when I close the pop-up the video still runs in the background, any ideas?
Depending how the video is setup, you would need to add some code (Javascript) that pauses the video when the popup is dismissed.
@@clcreativedallas already found it
Thank you so much for this amazing video!
You are welcome.