Webflow
Webflow is a visual website builder and CMS that combines a no-code editor with a structure close to traditional front-end development. It allows teams to design, build, and publish responsive websites visually, while still working with familiar concepts like HTML structure, CSS classes, and JavaScript interactions.
At Terra, we mainly use Webflow for the JFR Paradise Club website, where layout precision, animations, and responsive behavior are especially important.
This guide explains how we actually work inside Webflow, where to find things in the UI, and what to be careful with when making changes.
Overview
Section titled “Overview”The Webflow editor is divided into a few key areas that you’ll use constantly:
- Canvas: the central area where you visually build and edit the page.
- Left sidebar: where you manage elements, components, pages, CMS collections, assets, and interactions.
- Right sidebar (Style panel): where you control layout, spacing, typography, and responsive behavior.
- Top bar: page settings, preview mode, and publishing controls.
Before editing anything, make sure you understand:
- which page you are on
- whether it’s a static page (a unique page) or a CMS template (works with CMS collection)
- whether the element belongs to a Component
Styling and classes
Section titled “Styling and classes”Webflow styling is class-based and closely mirrors CSS.
All styling is done from the Style panel (right sidebar), using classes that can be reused across the project.
Elements vs Components
Section titled “Elements vs Components”In Webflow, not everything that looks reusable actually is.
Elements
Section titled “Elements”Elements are basic building blocks:
- Divs, text blocks, images, links, forms, etc.
- Changes affect only the current instance.
- Used for page-specific layouts and content.
Elements are added from the Elements panel (left sidebar, + icon).
Components
Section titled “Components”Components are globally reusable elements:
- Used for navigation, footers, shared UI blocks, repeated sections.
- Editing a Component updates it everywhere it’s used.
- Components are managed from the Components panel in the left sidebar.
Interactions
Section titled “Interactions”Interactions control animations and dynamic behavior such as:
- hover effects
- scroll-based animations
- entrance transitions
- click-triggered actions
They are managed from the Interactions panel (lightning icon).
How we work with interactions
Section titled “How we work with interactions”- Keep interactions simple and predictable.
- Prefer using class-based interactions instead of element-specific ones.
- Name interactions clearly so they’re easy to identify later.
Responsive behavior (Breakpoints)
Section titled “Responsive behavior (Breakpoints)”Webflow supports multiple breakpoints:
- Desktop
- Tablet
- Mobile landscape
- Mobile portrait
Breakpoints are controlled from the top bar.
How to work with breakpoints
Section titled “How to work with breakpoints”- Start designing and adjusting from desktop downwards.
- Avoid fixed widths; prefer flex and grid.
- Use spacing (padding/margins) instead of absolute positioning where possible.
- Always review all breakpoints before publishing.
Custom code
Section titled “Custom code”Webflow allows custom HTML, CSS, and JavaScript, both globally and per page.
Where custom code lives
Section titled “Where custom code lives”- Page settings → Custom Code (head / body)
- Project settings → Custom Code (global)
- Inside Embed elements on the page
When to use it
Section titled “When to use it”- Advanced interactions not achievable with Webflow tools
- Third-party integrations
- Small enhancements that would be overkill to rebuild visually
Keep custom code minimal and well-commented.
Form inputs
Section titled “Form inputs”Forms in Webflow are built using the Form Block element.
How we work with forms
Section titled “How we work with forms”- Inputs are styled using classes, like any other element.
- Success and error states are part of the form component and must be styled as well.
- Form submissions are managed from the Forms tab in the Webflow dashboard.
Publishing and environments
Section titled “Publishing and environments”Webflow provides two main environments:
- Staging:
*.webflow.io - Production: custom domain
Publishing workflow
Section titled “Publishing workflow”- Use Preview mode (eye icon) before publishing.
- Publish changes when you’re confident they’re correct.
- You can’t select what to publish and what no. Once you publish, everything in the site will go live.
- CMS content updates can be published independently from design changes.
General best practices
Section titled “General best practices”- Understand the structure before editing anything.
- Be especially careful with CMS templates and Components.
- Reuse classes instead of creating new ones.
- Keep interactions and custom code under control.
- When in doubt, ask before making global changes.
Knowledge Check
Test your understanding of this section
Loading questions...