Discover the Success Stories Behind Our Work
Explore Case Studies
June 19, 2022

10 Webflow Tools Every Web Designer Should Have in Their Tech Stack [FREE CHECKLIST INCLUDED]

PLAY

In today’s video, I’m breaking down my top 10 favorite Webflow tools. Let’s go.

So, as you all know, I’ve been a web design agency owner for about 7 years, created websites like this, this, and this. And so what I wanna do is show you how we transitioned to Webflow—a website and CMS builder—about 3 years ago, and the tools that we used to add both functionality and “funacity” to our projects.

Now let me dive in, I’m gonna give you the checklist. Keep in mind, you can download that link right below this video—it’s a Google Doc, so there’s no opt-in. I just wanna provide as much value as I can.

Also, please like and subscribe. The more folks that see this content, the better, and the more that we can create amazing, dynamic website entities.

So let me dive into my computer, show you how these tools work, and you’ll be able to download that checklist at any time.

Airtable

So first one is Airtable, and a lot of Webflow users leverage Airtable for their databases and for content management in regards to people filling out forms in the site, and that form data being saved on a platform like Airtable, where you can control that database.

So that’s one thing that I really love about it. We actually have a website called IllustratorHub, and this website uses Airtable to the tee.

We actually collect form inquiries through the Get Hire link, and once they fill up this link, it automatically pushes to Airtable. We then set up an automation via Zapier that pushes to this database here, where you’re able to browse all the newest illustrators after our quick and easy vetting process.

So Airtable is definitely one of my favorite tools. You can leverage it for your forms, for different things you have on your website, to be able to collect that user data, and in your docs. So if you look here, Airtable is a platform for building collaborative applications, integrates with all your favorite apps and services—basically, visualize your progress and content.

Conversion AI

Next up is a new tool that we’ve been using lately, called conversion.ai. Now this tool is really built because it leverages AI to write proven, high converting copies to increase conversion on your website. And the copy is actually on point, and a lot better than I expected.

I really like Conversion AI in relation to competitors just because of its ease of use, and the user interface is just beautiful.

I’ll show you an example of the backend. And the main reason we use this is for projects in low fidelity and high fidelity design. Now, this might not be the end-all, be-all content for your site, but ultimately, it’s gonna be a great way to showcase what your site could potentially look like with real content.

So, you can see here that they have a ton of templates—from email, to website, to blog, to video, to SEO. It can help you write SEO titles and meta descriptions based on data that you provide, and this tool is really, really easy to use. I love it, we’ve been using it for about a month, created some SOPs around it, and we found it to make our lives a bit easier.

And to give you an example of what I mean, if I go to Figma—this is where we have all of our file tiles—and if I go to one of our systems, for example. I’ll just give you an example website that we’re working on here.

So if I go here, for example, and I pull up a doc like this, we’re able to—when we’re creating wireframes—pull information and put the copy in here. So we have real life copies instead of “lorem ipsum” texts.

And that’s the biggest thing that Conversion AI does: you give a little bit of information—for example, if we’re gonna do titles and meta descriptions, let’s say the company name is “Hubspot.” Let’s say the title is, “The Biggest Names in Digital Marketing.” Description is, “Learn the basics of marketing.”

And I then can use the keyword, “digital marketing,” this is just for use as an example. I can generate AI content, and within seconds it’s gotta output data based on an Internet scrape—and data that is fine—and be able to give me example title and meta descriptions that I can use on my website.

So here you go: title is, “The Biggest Names in Marketing | Hubspot.” So, as you can see, it adds that item and it adds a name, which is great for SEO architectures.

Meta description is, “Find out what digital marketing is today, the tactics involved, the types of content you can create, and the purpose digital marketing serves to your overall marketing strategy.” I mean, how awesome is that?

Really great tool—it is a paid tool, I think you're paying about 30 or 40 bucks a month for it. But again: really, really helpful in regards to those tools.

CMS Library for Webflow

So next up, we’ve got CMS Library for Webflow. Now, as you all know, if you’re using Webflow, the team over at F’in Sweet just creates some phenomenal products for it. This is one in particular that we use in websites: it’s a javascript library that makes your Webflow CMS a lot more powerful.

So, as we know, Webflow CMS is already super powerful. But what this can do is it can add tabination, it can add all these additional attributes to your website easily with just a piece of javascript code that you add to the site. You don’t have to learn how to write code, all you do is really take the snippets, add them to your website, and you’re ready to go.

I suggest anyone that’s looking to do some really great stuff with Webflow to definitely check out this CMS Library.

Flowbase

Next up in our list, we have Flowbase. Now, Flowbase, again, is another amazing, amazing resource from the folks over at Flowbase.

And Tom, shout out to you man! Tom Bekkers is an awesome guy, he’s one of the founders there. So they have all these different products that you can use in your Webflow website.

So, if you’re just starting out, they have a ton of really cool templates and resources that you can use. They’re really affordable: some of these are just 20, 40 bucks, a lot of them are free, and they created a cool, organized database here—a just really great website that you can leverage.

So if I pick Portfolio page, I can preview the project. This is a really cool project, really dynamic—especially this video, just awesome stuff, man. I mean, people are creating this phenomenal site and giving away this stuff for free, it’s insane.

But I can preview the project, I can clone it, we have resources like different Navigations, Accordians, that you can add to your site. You can literally piece your site together from all these resources at Flowbase without even touching one line of code. It’s insane, y’all.

They even have premium components that you can buy. I’ve purchased a few of these—I have Quillow, I have a few of these forms as well, there’s a multilevel form—I mean, guys, there are tons of resources on this platform.

Please take a few to check it out if you’re just getting into Webflow, or if you’ve built a Webflow business and you wanna be able to add additional attributes and tools to that platform.

Horizontal Scroll

Next up, we’ve got Horizontal Scroll. This, I thought, was awesome.

This is from the homie, T. Ricks, you probably if you’re in the Webflow ecosystem. He has just a ton of really awesome resources. This, in particular, I thought was gold because it allowed a horizontal scroll on the site, which you can easily duplicate using this tool.

Also, you should check out his other content. If you click on his profile at Webflow, I mean, he’s got tons of clonables here that you can be able to use and leverage in your projects. He just did an awesome job.

Thank you, Timothy, man, for all that you do for our community. It’s just some built stuff, man.

Jetboost

Next up, we’ve got Jetboost. Now, Jetboost is really great, because you can add real-time search and dynamic filtering to your Webflow website, without any code. We leveraged this on a few of our sites—one of those including Illustrator Hub, as well—and it just adds real-time search with paginated lists, as well.

So this is great for job sites, different sites that need applications, recipes, product organization—I mean, it’s a really, really great tool. And get this: it’s got like, insane affordability. Like 29 bucks a month, or 19 bucks a month if you need a little bit less options.

Again, the folks that are creating these software, are just doing a phenomenal job of making this product tight, concise, and not bloating and adding baggage to your website.

So again, Jetboost is another tool. Definitely check it out.

Memberstack

Next up: Memberstack. I can’t say enough great things about this platform. You can essentially add paywalls, you can add private content on your Webflow site by easily integrating this into the system. When I say “easy,” you can literally implement this within 5 minutes.

You basically set up your website, you set up pages that only specific users can use, you combine it with Memberstack, and now you have a login and admin panel that’s really dope. What you can also do is you can customize the dashboard however you want in Webflow, and you can get folks access to Memberstack.

Again, this is a paid service as well, but super affordable for clients looking to add a membership portal to your website.

Again: check out Memberstack. Really, really great tool. I can actually show you guys real-time. Let’s just jump in, why not?

So, I’ll go into a project that we’re working on, that we’re in process of, it’s In Development. Let’s just pop that open for you right quick, and show you how we leveraged Memberstack for this.

So, if you go to this site—and this is still a work-in-progress, so bear with me. If we go here, I can hit Sign Up, I can hit Login, and it’ll give me my login, it can add that on as well. So, Memberstack actually does all this for you.

Of course, you can add in your logo, add in your color palettes to make sure it’s consistent with your site design. But, again, they add all these different attributes for you.

And so, when you’re logged into the site, you’ll actually have access to this dashboard we built in Webflow. If I go here, and I go into Dashboard, and I go into Student Dashboard, here’s the dashboard that users have access to once they're logged in.

As you can see, all these contents are here. They can click Courses, they can scroll down and they can go through the curriculum, and all of this is in the portal. So you can only access this side of the site if you have a login, and that’s implemented through Memberstack.

Again, another great tool that adds superpowers to Webflow.

Optily

Here’s the next tool I’m gonna talk about: Optily, which I think is really awesome. With Optily, you can take your Webflow images, and compress them automatically.

Now in most cases, what we’ll do is we’ll have an image file, we take that image file and run it through a platform like TinyPNG to compress it, make it smaller so that the website loads faster.

Now what this will do is it will take all your images, provide an 80% jpeg and png data reduction, and upload those images back onto your website. This improves your SEO, your time on site, as well as the low time on your website.

This tool is phenomenal. It’s still kind of like a best kept secret, but if you’re building out websites on a normal basis, definitely check out Optily, and run your website through this platform and make sure that you’re compressing your images and make sure that the site loads perfectly.

Typeform

Next up, we’ve got Typeform. I can’t say enough great things about it. It just makes it really easy to create beautiful forms on your site.

So, if you go to our agency site, for example, you click Get Started, this is an actual Typeform. As you can see, the process is simple, it really looks great on mobile as well, and it just runs you through this process.

Now what we’ve done is we’ve combined this with Zapier to make sure that all these are gonna start through your end and Slack and all that good stuff. But Typeform just makes it easy to have beautiful forms to your site that you can impress your clients with, and just makes it a really clean and concise look and layout.

Weglot

Lastly—and I can’t say enough great things about the team at Weglot—if you wanna add multi-language power to your website, then definitely check out Weglot. We use them 3 or 4 times on a few websites—and man, they make the process so simple.

Also, their support is phenomenal. I literally sent an email and got a response back with a code snippet to add to my site to make this custom, really cool layout for an English translation website.

They’ve just done a really phenomenal job, great support, and a tool you can set up in about 10 minutes based on how many languages you need embedded on your website.

Conclusion

So with that said, y’all, you can access this super duper, awesome tech set doc down below in the description. No opt-in, just go grab it, and have some fun with it. But this is my favorite stack of Webflow apps that both increase the scope of your projects and just help you flow better.

A web designer on laptop waving at computer

Ready to work together?

Let’s link up. Complete our quick form below to schedule a 30 minute consult with our team. We invite companies looking to collaborate to build their website with 5Four.  
Schedule a Chat