build a fully-responsive CSS grid-based Instagram gallery with zapier integration, a very cool tutorial by the Webflow team.
nice and clean typewriter effect just using CSS inspired by Codepen user Geoff Graham
a simple way of adding Gradient to any text with custom code.
Build a site for your local sports tournament in Webflow. Add schedules, announcements and embed Airtable to display stats and team standings. Below is a template example of what you can do.
Do you need specific filters for your CMS items and want to set it up without code? Use Jetboost's Dynamic Filters Booster. set it up in minutes!
Add the glitch effect to your images or your text by adding some custom code.
Webflow exclusive job-board lets users post jobs for freelancers to search and contact them.
5-custom-text-effects, Clone and Re-use these 5 unique text effects video made by Joseph Berry.
Create a (30-day, 20-day, 10-day) learning program dashboard for users to follow. Inspired by HelloRemote.
Add rotating text to your homepage for some added coolness 😎. just add a little of code and you are done.
Create a site in Webfllow and sell your digital products, it can be ebooks, photography, digital arts, graphics, etc. You can add a small free selected product so users can get a small taste of what you sell and then offer a membership for the complete packaged. You can sell these digital products with Gumroad by adding a direct link to a Gumroad product page or if you don't want to take users away from your site you can use the Gumroad overlay or the Gumroad embed. I've added the link below showing you how to add Gumroad to you Webflow site.
Add particle.js to any Webflow page and enjoy this fun animation.
In just 10 minutes you’ll learn how to create an eCommerce store. The tutorial was created by Chris, go and check out his site for more future content
Want to post a blog and the date displays as time has passed? well here is a custom code provided by user AlexManyeki. e.g. 5 mins ago
Sometimes we have a fixed navigation menu with too many nav-links and not all links are visible in mobile. What we want to do is make the menu scrollable with this tutorial from user Sabanna in the Webflow forums. Remember this is only posible when we have a fixed navigation menu.
Create a cool parallax scroll website with Webflow using interactions. Tutorial created by Punit Chawla.
The New Year is coming and it's time to celebrate! decorate your Webflow site with falling confetti. This is a simple and easy way of adding confetti to your site just using CSS. First, create a div with a class of “container” inside that div create about 10-15 divs depending on how much confetti you’d like and each one with a class of “confetti”. Now add the CSS code below to the page. publish it and your good to go!
Fun animations done with Webflow's interactions, tutorial by Pixel Geek, tutorial inspired by site level.co
Wondering how to build that zoom effect just like amazon product pages have, look no more Pixel Geek has created a tutorial on how to build this with just withWebflow interactions and the best thing about it is that it's super easy. check out the tutorial below.
Build a Website were you display different components for inspiration (footers, hero, navbar, etc.) also let members upload components(images) for inspiration. Membership can be created with Memberstack and add the components to the CMS.
Sometimes we need to reload the page after the user submits a form with this simple code you can accomplish this. code provided by the user mattvaru.
This is a CMS commenting system through Zaps and Google Sheets, a very clever way of using the CMS integrated with Zapier and Google sheets made by user AlexManyeki from the Webflow forums. this right here is legendary!
Do you need your modal to only come up once per user? this is the tutorial you are looking for from Pixel Geek.
Learn how to add custom code from CodePen to Webflow in this tutorial by Joseph Berry.
A Tutorial on how to use Integromat to live import the numbers of followers from Instagram into a Webflow Project by youtube user וובפלואו בעברית Webflow in Hebrew.
A high-level overview of how to implement app-like functionality in Webflow. This tutorial from Timothy Ricks users how to add some app functionality to their website.The app that was created includes itinerary, lodging info, groups, nearby activities, and message notifications.
Here are two ways to develop FAQs in this tutorial made by Jose Ocando.
Build a website that shows how different Webflow sites were built on and what stack was used other than Webflow itself. Great way to see some ideas and examples for future makers.
create a site with a voting system for future functionalities you would like to see Webflow implement and let users vote. The most votes can go on top, I'm sure the Webflow team will be happy to see this. You can add the upvote system created by Ben Parker for this cool side-project.
If you don't want a user to send you a thesis in your input/textarea this is very useful. Add a maximum length to your text area in a form shared by user Nokcturna in the Webflow forums.
genius way of how to create a CMS slider with pagination. Jose Ocando does a tutorial on how to accomplish this.
Schema markup is a shared language that search engines created in order to provide "rich results" to users' searches, especially on mobile. In this tutorial by Jose Ocando, you'll learn how to add Schema to a Webflow project.
Add Disqus for an easy way to add comments for your blog collection or any page on your site.
Are you an avid reader? Some people don’t know what to read next and you probably do. Create a blog where each post is you suggesting them a great book to read and let them comment and discuss it. search for adding comments to your post idea to add this functionality.
Parallax effect using the native 3D transforms feature, this easy trick was posted by user Sabana in the forums.
change the color of your SVG on hover with some custom code, tutorial by Design Pilot in his youtube channel link below:
Falling snowflakes to decorate your site, change the speed of the snowflakes and size. Found by user ElviraNL in the forums.
Do you need to integrate a date input/time input into your Webflow website? Flatpickr.js is your friend and is *incredibly* customizable. Flatpickr is a lightweight and powerful datetime picker. Matt Varughese created a site explaining how to setup.
Learn how to build a basic membership site with MemberStack. Very easy to follow Tutorial with Duncan, this is great for membership and gated content on your webflow site.
A great way of adding some cool styles to your website by creating a progress timer for your slider with interactions. Pixel Geek does an awesome tutorial on this
Sort and Filter content on Webflow with MixitUp3. MixItUp 3 is a dependency-free library for animated filtering and sorting. Great for managing any categorized or ordered content like portfolios, galleries, and blogs. It can be used both with static and dynamic content. I have provided the link below of a very detailed page explaining how to make this work. Tutorial created by Anna Sabatini.
Provide a membership website with lots of free illustrations to choose from. The way to become a member is to fill up basic information with a Webflow form and upload one free illustration (link to where the illustration is)to add to the collection of free ones already available in the site, this way the number of free illustrations will grow in time. Memberships can be added easily with Memberstack. Illustrations will be added to the powerfull CMS.
To build this you need zapier and google sheets, zapier will link Webflow to google sheets. Create a Webflow native form that only receives emails. Once a user inputs his information and submits the form a zap will occur. This zap will take the email and insert it in google sheets.
A tutorial on how to create diagonal sections by Flux
CSS Masonry grid is possible to create without any custom code. All you have to do is use Webflow text columns option for your “grid container” (or div, or section). This trick was found and tested by user Sabana(Webflow staff) in the forums.you can check out the post in the link below.
10 tips for creating a responsive website in Webflow, tutorial by Jose Ocando
A great and fast tutorial on how to create those good looking mega menu dropdown in Webflow, tutorial made by Ben Parker.
If you need your site to generate a random quote or item using Webflow's CMS here is a nice tutorial from Ben Parker on how to accomplish this.
Ever wanted to create a horizontal scrolling section, Pixel Geek does a quick tutorial on how to create this simple effect with interactions.
Updating a specific user in CMS with Memberstack. This will enable the member to update their user data. Duncan from Memberstack does a high-level overview of how this all works.
Counter-Up is a lightweight jQuery plugin that counts up to a targeted number when the number becomes visible.
Build a resource website of a subject you love and are passionate about. E.g. ‘ Top Webflow resources for making landing pages”, “the best films resources to create good videos” “Amazing resources to learn how to fix smartphones”. Once you have a subject start searching all the great resources and add them to your site.
Ever wanted to build a marketplace in Webflow? Connor Finlayson has a full guide on how to get this done. He builds the Unicorn Factory a marketplace that connects freelancers and business owners in New Zealand. The tools he used are Webflow, Zapier, Memberstack, and Airtable. this is a very in-depth guide so have fun reading it!
A great way of implementing a voting system to your site while using Webflos's CMS and Zapier. Ben Parker does a great tutorial explaining how it's done.
Find freelancers in your area, tell them about your future site where you will give them exposure for locals seeking their expertise. Each freelancer will have their image, name, area of expertise and link to their past work. Create a form for them to submit their info.
A forum can add value to your website especially if you have an active community behind it that not only engages with your great content but also gives them the power to interact with each other. You can add forums to your Webflow site with Discourse. Fun fact : Webflow's forum runs on Discourse.
Instant on-page results using JQuery, Webflow has a native site search feature but the results appear on a different page. This solves this issue if you want the results on the same page with a little custom code. Pixel geek shows us how to do this in less than 10 mins shown in the link below.
Create a website were you add weekly build challenges. Screenshots, videos, and interactions of website examples are posted. Anybody can join in on the challenge and try and finish it within a week. This would be a fun little side project and people would love a challenge for the learning experience and the difficulty it can bring. Webflow’s CMS will be very useful when constantly adding the challenges. Add the challenges manually with the CMS, let people submit the link of their websites through a form and announce the winners every week! You can automate the form entries with zapier, after every form submitted zapier can create a new CMS item. Go ahead and have fun with this idea!
Build a website where you can display a preview of your Webflow template and sell them for a good price. There are two ways you can do this, sell each template individually and once you receive the payment you can transfer the site to their site. The other way works well when you have a lot of templates, you can create a membership site and have all the templates available for paying members. Membership functionality can be added easily with Memberstack. (the link below is an affiliate link of Memberstack)
A modal is a dialog box/popup window that is displayed on top of the current page. Create a fullscreen custom modal as well as a right bar slide out modal using Webflow interactions, pixel geek has an awesome video showing us how to accomplish this!
Hello webflowers, this is a very simple idea you can build in less than two weeks. A job board for your area or city where recruiters in your area can post a job when they pay a certain amount of your choice. Once a job has been posted in your site job seekers can search and apply through the link provided in the post. Go ahead and have fun building!
Marquee is an animation effect for web pages, this trick is good for scroll text, testimonials, company logos, etc. It can be achieved with Webflow's animation. The link below is a video of Pixel Geek explaining how it's done.
The line-clamp property truncates text at a specific number of lines. very easy to implement in Webflow. Just add the code provided below and add the class to the text you would like to limit. Jose Ocando a Webflow expert has a youtube video showing how it's done.