Webflow Designer: Every Panel Explained
Create a blank site and learn every main panel: Add, Navigator, Style, Settings, Pages, breakpoints, Preview and Assets, while building the first section of Chai Corner.
💡Key ideas
Create a blank site and learn every main panel: Add, Navigator, Style, Settings, Pages, breakpoints, Preview and Assets, while building the first section of Chai Corner.
4 main areas
Top bar (pages, preview, Publish), left toolbar (all panels), canvas in the middle (your page), Style panel on the right (how things look).
Style vs Settings
Style controls how an element looks: colour, size, spacing, layout. Settings controls what it does: where a button links, which tag a heading uses.
Classes
A class is a saved set of styles. Every element with the same class looks the same, so one change updates all of them.
One H1 per page
The H1 is the main title. Google uses it to understand the page, so use it once.
⏱️Chapters
Click a chapter to jump to that moment in the video.
📋Step-by-step
Tick each step as you build it in your own site. Your ticks are saved.
Create the site
Build the first section
Check pages, screens and assets
⚙️Panel reference
| Panel | Where | What it does |
|---|---|---|
| Add (+) | Left toolbar | Elements: Structure, Typography, Links, Media… |
| Navigator | Left toolbar | Tree of every element on the page |
| Pages | Left toolbar | All pages, page settings, SEO |
| Assets | Left toolbar | Upload images and files |
| Style | Right | Classes, layout, spacing, size, typography, backgrounds |
| Settings | Right | Tags, links, IDs, attributes |
| Breakpoints | Top bar | Desktop, tablet, mobile landscape, mobile portrait |
⚠️Common mistakes
🧠Recap & quiz
First the recap question from the video, then the quiz. Your best score is saved.
Recap: Which panel changes how an element looks, and which changes what it does?
Q1 of 4 · The café owner asks: how does my website look on a phone? What do you click?
Q2 of 4 · Where do you set which page a button links to?
Q3 of 4 · What does a class do?
Q4 of 4 · How many H1 headings should a page have?
🏠Homework
Do this on your own site before the next lesson.
❓FAQ & key terms
What is the difference between the Style and Settings panels?
Style: how it looks (colour, size, spacing, layout). Settings: what it does (link, tag, ID).
Does Webflow save automatically?
Yes. Undo with Ctrl+Z, or Cmd+Z on a Mac.
How do I preview my site?
Click the eye icon at the top. Click it again to return to editing.
Lesson 03 of 11 · All cheat sheets · Watch on YouTube
Save your progress
Enter your name and email once. We'll remember your ticked steps, quiz scores and completed lessons, so you can continue on any device.
No spam. Only course updates, and you can unsubscribe any time.
