This guide walks you through the basics of using Webflow’s designer, including adding elements, managing pages, styling with CSS, and creating animations with interactions.
Getting Started with Webflow
Somebody said, “Let’s make a website with Webflow,” and you said, “Sure!” So here you are in the Webflow Designer.
At the top left, you’ll find a plus (+) button. If you prefer the old-fashioned way, you can click it with your mouse. But if you’re cool, just hit the letter “A” on your keyboard—this opens a panel with all the elements and HTML components you can add to your canvas. Scroll down, find what you need, and drag it onto the canvas.
Now that you’ve added a div, let’s explore some key features:
• Page Management & Structure: On the left, you can add more pages and easily link them together. You’ll also see a DOM hierarchy, neatly organized with icons for easy navigation.
• Styling & CSS: On the right, you’ll find the Style menu, where you can add classes and customize elements using CSS3 properties, including transitions and filters.
• Animations & Interactions: Finally, all the fancy animations happen in the Interactions menu. This allows you to create page and element animations—scroll effects, pop-ups, zooms, and more.
And that’s Webflow in 60 seconds
Getting Started with Webflow
Somebody said, “Let’s make a website with Webflow,” and you said, “Sure!” So here you are in the Webflow Designer.
At the top left, you’ll find a plus (+) button. If you prefer the old-fashioned way, you can click it with your mouse. But if you’re cool, just hit the letter “A” on your keyboard—this opens a panel with all the elements and HTML components you can add to your canvas. Scroll down, find what you need, and drag it onto the canvas.
Now that you’ve added a div, let’s explore some key features:
• Page Management & Structure: On the left, you can add more pages and easily link them together. You’ll also see a DOM hierarchy, neatly organized with icons for easy navigation.
• Styling & CSS: On the right, you’ll find the Style menu, where you can add classes and customize elements using CSS3 properties, including transitions and filters.
• Animations & Interactions: Finally, all the fancy animations happen in the Interactions menu. This allows you to create page and element animations—scroll effects, pop-ups, zooms, and more.
And that’s Webflow in a nutshell! 🚀