Understanding Webflow Basics

Don't have Webflow experience? Here's a quick primer on the essentials:

The Webflow Interface

When you open a template in Webflow, you'll see:

Left Sidebar: Pages & Layers
- Lists all pages in your site
- Shows the layers/elements on each page
- Helps you organize and navigate your project

Top Navigation
- Project name and settings
- Preview, publish, and share options
- Undo/redo controls
- View settings (desktop, tablet, mobile)

Canvas (Center)
- Visual representation of your website
- Where you see and edit your design
- What-you-see-is-what-you-get (WYSIWYG) editor

Right Sidebar: Properties & Settings
- Element properties (styling, effects, interactions)
- Typography options
- Layout and spacing
- Colors and effects

Key Webflow Concepts

Elements
Everything on your page is an element: text, images, buttons, containers, etc. You can select any element and edit its properties.

Styles & Classes
Webflow uses CSS classes to style elements. You can:
- Apply individual styles to one element
- Create reusable classes for consistent styling
- Edit all instances at once by updating the class

Responsive Design
Webflow templates automatically adapt to different screen sizes:
- Desktop - Full-size experience
- Tablet - Optimized for tablets
- Mobile - Optimized for phones

You can edit each breakpoint independently.

Interactions & Animations
Many templates include animations like:
- Hover effects
- Scroll animations
- Page transitions
- Button effects

These are built-in and ready to use. You can customize them if desired.

Publishing
When you're ready to make your site live:
- Click "Publish" in the top right
- Choose "Publish live sites"
- Your site goes live on your domain or Webflow subdomain

Hosting
All TNCFlow Webflow templates include hosting options:
- Webflow Hosting - Included with Webflow plans
- Custom Domain - Connect your own domain
- SSL Certificate - Automatically included