Webflow Designer is a revolutionary tool for web developers, web designers, and beginners alike. This tool allows you to visually craft the core building blocks of the web—HTML and CSS—without writing code. In this guide, we'll cover the basics of using Webflow Designer, walking you through every panel, feature, and real-life use case.
This guide will walk you through the basics of Webflow, from setting up your account to building your first webpage.
This guide will walk you through the basics of Webflow, from setting up your account to building your first webpage.
To get started, head over to Webflow and sign up for a free account. The free plan allows you to build up to two static projects, perfect for learning the platform. Once signed in, you’ll be greeted by the Webflow dashboard. This is where all your projects live, and where you can create new ones, manage existing sites, and explore templates.
Once you’re comfortable with the interface, let’s create a new project. Click the “+ New Project” button on your dashboard. Webflow offers a range of templates to get you started, or you can start from scratch with a blank canvas.
For beginners, starting with a template can be helpful, as it gives you a base design to work from. However, for this guide, we’ll use a blank canvas so you can learn the core tools from the ground up.
Don’t worry about how to use them for now we’ll be exploring that next we we build our landing page on webflow.
In Webflow, every site is built using boxes, or divs. These divs are like containers that hold various elements, and they can be styled to create your website’s layout. The fundamental elements you’ll use include:
Div Blocks: Basic building blocks that can contain other elements like text, images, or buttons.
Text Blocks: To add headings or paragraphs.
Images: For adding visual content to your page.
Buttons: To create interactive elements like calls-to-action (CTAs).
Webflow gives you full control over the styling of every element on your page, just like writing CSS. When you select any element, the Style Panel on the right side allows you to modify its appearance. Here are the core styling properties you’ll often use:
Typography: Change the font, size, color, line height, and alignment of your text elements.
Spacing (Margin & Padding): Adjust the spacing around and within elements to position them exactly how you want.
Sizing: Control the width and height of elements for a responsive layout.
Positioning: You can choose to make elements static, relative, or absolute, depending on your design needs.
Backgrounds and Borders: Add background colors, images, or borders to your elements.
One of Webflow’s key strengths is its ability to create responsive designs. Responsive design ensures that your site looks good on all devices, from desktops to mobile phones.
At the top of the canvas, you’ll see device icons for Desktop, Tablet, Mobile Landscape, and Mobile Portrait. These allow you to switch between different views to see how your site will look on various screen sizes.
When making your site responsive, consider adjusting:
Text sizes: Reduce font sizes for smaller screens.
Spacing: Adjust margins and paddings so elements don’t appear cramped.
Visibility: Some elements may be hidden on smaller screens if they don’t enhance the mobile experience.
Start by clicking the Tablet icon and adjust the design for that screen size. Repeat the process for mobile views.
Webflow makes it easy to add smooth, professional interactions and animations to your site without writing code. Whether it’s a hover effect, scroll-triggered animation, or a dynamic transition, Webflow’s interaction tools can help bring your site to life.
To add a simple hover effect:
You can preview these interactions in real-time to ensure they look and feel natural.
Once you’ve finished designing and are happy with your site, it’s time to publish. Click the Publish button in the top-right corner. If you’re on the free plan, Webflow will host your site on a Webflow subdomain (e.g., yourproject.webflow.io). If you want a custom domain, you can upgrade to a paid plan and connect your own.