This flow guides users through the process of building a simple, responsive layout in Webflow, from adding and styling elements to making adjustments for different device breakpoints.
Introducing Layout
Adding Container
Placing Container
Organizing Content
Setting Height
Exploring Elements
Adding Heading
Dragging Heading
Inserting Button
Placing Button
Arranging Elements
Selecting Flexbox
Choosing Container
Adjusting Direction
Centering Content
Completing Section
Styling Heading
Justifying Elements
Adjusting Styles
Learning Classes
Selecting Button
Defining Class
Adjusting Padding
Editing Class Styles
Changing Padding
Adjusting Right Padding
Selecting Button Class
Applying Class
Scrolling Up
Reapplying Class
Class Selection
Using Classes
Completing Section 2
Selecting Heading
Color Adjustment
Viewing Tablet Breakpoint
Responsive Styles
Adjusting Tablet Size
Checking Mobile Breakpoint
Cascading Styles Down
Reviewing Desktop Breakpoint
Cascade Principle
Testing Responsiveness
Publishing Website
Previewing Site
Previewing Breakpoints
Celebrating Completion
Over 2,800+ SaaS user flow examples, you can inspire from
The only library you'll need when building a web app. Browse screens, user flows & UI components