Webflow Updates: Automatically Create CMS Items
Get More Done: 5 Ways to Master Your To-Do List
Build Responsive Websites With Webflow and Send Data to Any Zapier Connected App
Want to build a customized site that looks and works exactly like you want? Perhaps you want just a website without a blog—but still want a simple way for your team to edit content without breaking the design. Or maybe you want a blog that includes more info than the average blog posts, but you don't want to hand-code a database.
Webflow is an online website design tool for that and more. In a few minutes, you can drag and click your way to the website design you've always wanted—and in a few more minutes, you can add a customized database with just the fields your content needs, without writing a line of code.
You'll start out with an online Webflow account, where you can immediately start building a new site from the blue + New Website button. There, you can pick from a variety of free and paid site templates to start from—or could start with a blank canvas. That'll send you to the Photoshop-style editor, with tools along the right side and view options on the left. Click the + icon in the top left to add new sections to your site, and drag it to the spot you want. You can drag most elements around, though they'll snap to the grid and keep you from making your page look too messy by default. And you can double-click on any text to quickly edit it—or use keyboard shortcuts to quickly change settings.
Many of the more advanced tweaks in Webflow will require some web design knowledge, though, if not direct coding. You'll customize the layout with percentage and pixel width, use weight numbers to specify your typeface style, can add colors with their hex code, and layer styles to—say—set your site's core typeface while specifying another font for a specific section. There's even advanced tools like CSS animations, shadows, and other transformations, which you can add in Webflows menus but work just like you'd expect if you hand-coded them in CSS. And you can add extra header and footer code, if you'd like, as a handy way to integrate with analytics tools and more.
The CMS database is similarly simple to edit, using database concepts without having to actually hand-code a database. Just click the database icon on the left side of your editor, and you can add new collections—or database tables—with the fields you want and an editor preview that your team will use to add content. You can include plain or rich text fields, along with images, videos, links, numbers, date/time, colors, options, switches, and database reference fields to tie elements together. It's everything you need to make a dynamic site that works the way you want.
There's also a form tool, with a simple way to add forms and gather data from your site. You can then get notified about every form entry, or can connect them to your other apps with Webflow integrations. You can also have Webflow use your own custom fonts or import them from Typeform, and you can either host your site in Webflow or download the HTML and CSS and run it from your own server.
Building a customized website doesn't have to be so daunting. With Webflow, you can tweak every single part of your site, learn how CSS and HTML elements work together, and start collecting data from your visitors with an online website design tool all without having to write a line of code.
Learn how to get the most out of the forms on your Webflow site with Zapier's Ultimate Guide to Forms & Surveys eBook.