A developer's guide to Webflow: tips, tricks, and traps

I recently had the chance to rebuild a Aidi’s website from scratch in Webflow. Aidi, a construction owner platform for end-to-end project management, needed a site that could clearly showcase their solutions for public and private construction owners. Since their original site was already hosted on Webflow, we chose to stay on the platform for a seamless transition. Plus, Webflow’s flexibility would allow their team to independently manage content updates after launch.

Coming from a development background with experience in marketing websites, I approached the project like any other coding challenge—with structure, logic, and efficiency in mind. Since Webflow was new to me, I learned a lot throughout the process. Below is a breakdown of my integration workflow, key takeaways, and practical tips to help you get started with Webflow.

What is Webflow?

Webflow is a visual website builder and hosting platform that enables users to design, build, and launch websites without writing code. It uses a drag-and-drop interface but generates HTML, CSS, and JavaScript in the background, making it a powerful tool for both designers and developers.

Getting comfortable with the editor

Before diving in, I highly recommend checking out Webflow University. Their video tutorials provide a solid foundation, making the editor much more intuitive when you start working on your site.

Once inside the editor, take time to experiment. Understanding style inheritance and overrides is key:

• Orange = inherited style
• Blue = overriding style
• Grey = default style

Use the style selector to navigate the inheritance tree and modify parent properties. You can also apply states (e.g. hover effects) via the dropdown arrow. Even after one month working with Webflow, I keep uncovering hidden features—so click around and explore!

Speeding up workflow with shortcuts

Keyboard shortcuts can seriously boost efficiency. Here are a few I found indispensable:

• Command + E (Mac) / Ctrl + E (Windows): Quick find to add elements, search UI libraries, or find components.
• 1-4+: Switch between breakpoints.
• Option (Mac) / Alt (Windows) + Click: Remove an overriding style to revert to the inherited/default style.
• Standard undo/redo, copy/paste: Works just like in any other app.

For a full list of shortcuts, check out Webflow’s documentation.

Why frontend knowledge is a plus

Webflow markets itself as a low-code/no-code platform, but a strong grasp of CSS, HTML, and even JavaScript makes a world of difference. The editor operates on CSS and HTML principles—understanding selectors, style inheritance, and structure will help you work more efficiently. If you're new to web development, I’d suggest learning the basics of HTML and CSS to get the most out of Webflow. 

Getting started

Cloning an existing website (optional)

If your project involves revamping an existing Webflow site, cloning can be a great way to transfer CMS items, images, pages, and scripts. Just be mindful—it may also bring over unused assets, pages, animations, and variables that clutter your workspace.

For those starting from scratch, Webflow offers a variety of cloneable websites and templates to use as inspiration or a foundation.

Setting up a design system with Webflow variables

If you have a design in place, start by integrating the design system with Webflow variables. Define global styles for:

• Colours
• Typography
• Spacing & padding
• Buttons & states

This approach ensures consistency and makes site-wide changes a breeze—modify a variable once, and it updates everywhere it’s used.

Webflow variables also allow you to create modes, such as:

• Automatic mode: Adjust font sizes dynamically based on breakpoints.
• Manual mode: Change button colours on hover.

Styling base HTML tags

To ensure consistency across your site, style base elements early. A quick hack: drop a rich text element onto a blank page, then select the content and use the pink selectors (e.g. “Body (All Pages),” “All H1 Headings,” “All paragraphs,” etc.) to style core HTML elements. Your previously defined variable values and modes should be applied to these elements’ properties.

Breakpoints and responsive design

Webflow handles responsiveness with predefined breakpoints to ensure your site looks great on all screen sizes: 

• Desktop (default, style this first)
• Tablet
• Mobile (landscape)
• Mobile (portrait) 

After adapting your styles for different breakpoints, you will see the styles change accordingly when resizing your website.You can also add larger breakpoints beyond the default desktop view by selecting “Add large breakpoint” in the breakpoint selector at the top of the editor.

Building with components

Why components matter

Webpages are made up of reusable elements—buttons, headers, footers, banners, etc. Webflow’s site components let you create these building blocks once and reuse them throughout your site.

Creating components for reusability

Once you’ve finished styling an element or a section that could be reused (e.g. buttons, site headers, banners, footers, text and image sections), you can convert it into a component. Click on “Create component” (the cube with a plus icon), name it, and optionally add a group and description. Once created, it will be available in the Site components section of the editor (cube icon) in the left sidebar. Using these components ensures consistency across your site and allows for easy updates.

Instance vs base component

When you add a component to a page, it creates an instance of the base component. Any updates to the base component will automatically apply to all instances unless they are unlinked. This is particularly useful for making site-wide changes or updating static content efficiently.

Properties

Elements within a component—such as text, links, and images—can be converted into component properties. These can be accessed while editing the base component, under the “Settings” tab on the right and are marked with a purple dot. Once a property is created, each instance of the component can have unique values while maintaining a consistent structure. This is especially useful for elements like buttons, where text or links might differ across instances.

Nesting components

Components can also be used inside other components, like placing a button component within a banner component. Child component properties can be exposed as properties of the parent component by connecting them within the parent’s settings. If you’re familiar with React, this concept is similar to prop drilling.

Component variants

You can create variants by editing the base component, navigating to the Style tab, and clicking on the cube icon in the “Style selector” section. This allows for easy customization of styles per variant. Common use cases include primary vs. secondary buttons or switching the order of an image and text in a layout.

Using UI libraries for a head start

Webflow has a variety of UI Libraries available for installation. Some great free ones include: Untitled UI, FlowUI and Radiant UI. Their components can be used as a starting point for your own custom site components by adapting the styles to your needs.

Heads up: these libraries may add placeholder assets and override your global styles (e.g. fonts, colours, etc.), so double-check and remove any problematic overrides.

Using Webflow CMS

Webflow’s Content Management System (CMS) collections make it easy to manage structured content like blog posts, team member profiles, categories, product listings, projects, and more—without needing a separate database. This content can then be looped on and rendered dynamically on your website with the Collection List element. Each collection also has its own Template page which is optionally used to display detailed views of individual items (e.g. blog articles, team profiles). This makes it easy to add and update content dynamically without manually editing individual pages—an especially useful feature for clients.

Editor limitations and workarounds

While Webflow is powerful, certain features can be limiting. This can feel particularly frustrating for developers who understand these things can easily be done with code. For example:

• You can style a portion of text differently by making it a span, but if that text is inside a component and linked to a component property, the styled span will be lost when the text is changed. There’s no way to create a property specifically for the span.
• CMS Collection Lists can be used inside components, but you can’t dynamically change the collection source per instance.
• The Collection List element supports pagination, but only with arrow buttons—there’s no built-in option for numbered pagination.
• Webflow doesn’t allow you to loop through Collection List items to generate slides for a Slider element. Instead, you have to nest a Collection List inside each slide and manually adjust limit and offset values—an unintuitive workaround.
• Only one level of Collection List nesting is allowed once per page, limiting complex data relationships.
• A nested Collection List can display a maximum of five items, which can be restrictive if you have a lot of data

Workarounds often involve unlinking components for independent edits (e.g. span color changes, collection source) without affecting other instances. Alternatively, you can use CSS or JavaScript in a paid-tier Code Embed element. The Finsweet Attributes library is a great tool for overcoming some of these constraints.

Deployment and other key features

Free features

• Staging Deployment: Deploying to staging is quick and easy, even on the free tier—perfect for testing and sharing with clients and the team.
• CSS Preview: The CSS preview window displays all styles applied to a given element, regardless of breakpoint or state. This is especially useful for debugging and identifying conditions where a style is applied, as it may sometimes be obscured by the editor UI.
• Interactions and Animations: Any element on a page can be set as an interaction trigger (e.g. click, hover, scroll), which can then trigger an animation on itself or another element. Webflow provides some basic animations by default, but you can create your own—though be prepared for a learning curve with the UI.

Paid-tier features:

• Site Indexing and Search: Webflow indexes your webpages content, enabling a site-wide search feature when you add the Search element to a page. You can control which pages or content are indexed by excluding them from search results, allowing for more targeted searches (e.g. searching only blog posts).
• Translation: Webflow includes built-in localization features, or you can use an external platform. Localization is available on all tiers by default, but publishing translations and using subdirectories require a paid plan.
• Automatic Backups: Webflow automatically creates backups while you edit your site. These backups can be used to restore a previous version if needed. While all pricing tiers include automatic backups, restoration is only available on paid plans.

Takeaways

After a month of working with Webflow, I found it to be a compelling all-in-one solution for website development. You can quickly get a  translated site up and running—no database or deployment pipeline setup required.

That said, I often felt that writing CSS directly would be faster than selecting and updating properties in the editor. However, the ability to use UI libraries speeds up UI integration and offsets the time lost navigating the platform’s limitations. Depending on your website’s design and purpose, you may not even encounter these limitations. The ability to quickly style for each breakpoint and use variables directly in the editor makes Webflow a robust and highly efficient tool when leveraged to its full potential.

Thinking about using Webflow for your next project? Whether you need expert guidance or a fully custom-built solution, our team is here to help. Let’s build something amazing together—reach out to us today.