How to Use Webflow: Every Topic, Organized [2026 Edition]

Webflow — what it means: Webflow is a no-code web production tool for building websites without writing code. It covers everything from design through publishing in one place, and it can also export HTML, CSS and JavaScript.

In this article we clear that up.

✓ In this article

The basics of using Webflow
How I learned Webflow from scratch (first-hand)
Techniques that speed up template editing

I work with Webflow for a living — production for clients and coaching on how to use it. This site is built in Webflow too.

Here I have pulled together every Webflow how-to published so far into one set of links, and added some finer techniques on top.

Webflow how-tos by topic [index]

Header image for the article organizing Webflow how-tos by topic

We have split Webflow usage into topic-by-topic articles, so browse whichever page you need. Questions about usage, or requests to explain a part of an article you could not follow, are welcome through our contact form.

Webflow basics

Webflow CMS

Webflow SEO

Webflow pricing

Webflow pricing plans explained [2026] — covering the new May lineup (Basic and Premium)

Webflow × Figma

How to copy and paste designs from Figma into Webflow

Weglot — the multilingual app for Webflow

Webflow × Instagram

How to embed Instagram in a no-code Webflow site, free

Updated as we go. If you read only three, start with the complete guide to SEO in Webflow, the complete Webflow CMS guide, and the Webflow University walkthrough.

How I learned Webflow from scratch (I had no experience at the time)

How I self-taught Webflow starting with no experience

The way I learned Webflow started with the official portfolio course, which took me three months. The course covers how to use Webflow across the board while you build a portfolio site.

The course is entirely in English. Getting comfortable with Webflow through auto-translation and by watching the on-screen work in the videos was my first step. The assets are downloadable from Webflow’s official site. The video is below.

This blog covers that official course in Japanese

This blog carries a Japanese walkthrough of the course. It was written early in the blog’s life so it reads a little roughly, but pairing the official site with the Webharu walkthrough makes the build go smoothly.
See: the walkthrough

It currently runs through Day 14. (2026 update: the individual lesson articles have been retired, and the Webflow University material is now consolidated into a single walkthrough.)

Techniques for editing Webflow templates efficiently

Webflowの作業効率がUPする方法を紹介します。これは基礎的なテクニックです。

①
まずは画面右の表示の意味を知るところから始めます。
オレンジ：他から効果を受けている
青：その要素にCSSが記入されている

②
オレンジをクリックして要素の大元を確認しましょう。

↓続く pic.twitter.com/d98aRD1PjZ
— ノーコードで1000万チャレンジ中＠Webflowデザイナー (@METANA_flow) January 27, 2023

The tweet above (in Japanese) covers the same ground: start by learning what the colors in the right-hand panel mean — orange means the element is picking up an effect from somewhere else, blue means CSS is written on that element itself — then click the orange value to trace where it comes from. With that, you can edit a Webflow template efficiently.

You rarely run into this with paid templates, but anyone can publish a free template, so free ones often carry junk values. By junk values I mean things like a 0 set on a responsive view for no reason, or a value that simply duplicates the breakpoint size (the ★ marker) for no reason.

Beginners in Webflow do this constantly, so watch for it. When junk values are left in, changing the breakpoint (the ★ marker size) stops Webflow from generating the responsive layout automatically. Avoid setting values you do not need, so you never end up asking later, “where is the value that broke my responsive design?”

The Webflow shortcuts I use most

Here are the shortcuts I reach for most in Webflow. Copy, paste, undo and redo, incidentally, work the same as in any other app.

Copy: command+C
Paste: command+V
Undo / redo: command+Z / command+shift+Z ---------------------------------------
Delete a value: Alt+click
Enter a class: command+enter
Search for and insert an element: command+K — margin and padding values
Set left and right together: Alt+drag
Set all four sides together: shift+drag
Move between CMS pages (in the Designer): Alt+←→
Move into child elements: ↓
Walk down the tree in order: Alt+↓

Those are the shortcuts I use most. Tell me if you have a favorite. Incidentally, the full list of shortcuts is under Help at the bottom left of the Webflow Designer.
See: the official shortcut reference

‍

FAQ

How can I teach myself to use Webflow?

One route is to take Webflow’s official portfolio course. The course is entirely in English, and on this blog the Japanese walkthrough of it is consolidated into the Webflow University article. The assets are downloadable from Webflow’s official site.

What should I watch out for when editing a free Webflow template?

Free templates often have junk values entered in them. Junk values stop the responsive layout from being generated automatically when you change a breakpoint, so click the orange indicators in the right-hand panel to trace where each value comes from.

Where can I check Webflow’s keyboard shortcuts?

You can see every shortcut under the Help item at the bottom left of the Webflow Designer. The ones I use most are delete a value (Alt+click), enter a class (command+enter) and search for and insert an element (command+K).

Where can I ask about things I do not understand in Webflow?

Questions about usage, and requests to explain a part of an article you could not follow, are taken through the contact form on this site.

How much does Webflow cost?

After the May 2026 revision, Starter is free, Basic is $15 per month and Premium is $25 per month (both the monthly rate when billed annually). Adding a language with Localization costs $9 per month per language. The pricing article covers the details.