Laura Niebel Headshot | Laura Niebel Web Design

Tips & tricks for new Webflow designers & devs

I love Webflow! It gives me the ability to design and develop sites without having to painstakingly code everything by hand - and spend ages looking through the Stack Overflow forum for troubleshooting advice. I also get around updating plugins or worrying about security issues, as is the case with Wordpress. Check out Webflow if you haven’t already! And if you have done so already: even better. So if you’re just starting out with Webflow, I’ve gathered three quick tips for you to make your life just a little bit easier within Webflow. Let’s get started…


Div to Link Block

In Webflow you can easily create a div element by placing one onto your canvas with your mouse. If you want to insert a link (such as linked text or image) you’ll need the link block. At times you might accidentally use the div block before realising you actually need a link block instead. What do you do? Do you have to delete your existing div (with all its content) and start from scratch? Not anymore! Just right-click on your div block on your canvas and choose “convert to link block” in the menu that pops up. That’s it, it’s that easy.


Webflow & maths

Nobody likes math. Well, I guess some people do but I’m not one of them! That’s why I really like that in each field that lets you insert numbers (such as width and height of elements, font size etc.) you can use math operations. This includes plus, minus, division and times. No more calculating numbers in your head (yay, for all the lazy people out there) or pulling up your calculator on your screen.

Font Chrome Extension

Webflow lets you choose Google fonts to include in your project via the font settings in your Webflow project. However, by default there is only a drop-down list of all available Google fonts and there is no font preview, so it might take a while to find what you’re looking for. Don’t fret! That’s how I’m doing it:


  1. If I’m not sure which typeface I want to use I go to https://fonts.google.com/ to search for an appropriate font for the project. Google gives you a preview of each font and lets you play around with the sizing and wording.
  2. As soon as I know which font I’m going to use, I access the font settings for my Webflow project and choose the appropriate font. But wait! I’ve got the free “Google Font Search” Chrome extension installed. Gianfranco Piana has done a great job developing the extension which replaces the standard drop down menu with a search bar. This way you can easily type in the first few letters of your desired typeface and voila, you’re ready to go! No endless scrolling necessary! Thanks Gianfranco! You can access the Chrome extension here: https://chrome.google.com/webstore/detail/google-fonts-search-for-w/odeioiloofmgfefkignkhabjiliagljo?hl=en



Webflow Chrome Extension (Colorpicker)

While I have already mentioned this handy extension in another post, I’m including it here in case you’re super-new to Webflow and haven’t read my previous article (you definitely should!). Oftentimes you want to make your life as easy as possible even when working with Webflow. While you can select new HEX, RGB or HSB colour values for fonts or specific elements in your design, you sometimes want to quickly choose a colour that is already available in your layout. One easy way to do this is by installing the free Webflow Color Picker Chrome extension. This extension was developed by Webflow itself and lets you use the colour picker tool (which looks the same as the one used in Adobe software) to select a specific colour in your Webflow site design. Too easy!

Grab the free Chrome extension here: https://chrome.google.com/webstore/detail/webflow-chrome-extension/poomgojobmjpninodpbopbeedkgcgiap?hl=en


Got any useful tips & tricks you want to share? Chuck them in the form below or send me an email!


This might also interest you...

Tuesday, December 31, 2019

Matterport: What it is and how you can integrate it into your next Webflow project

Ever heard of Matterport? The service allows you to place virtual walkthroughs on your client's website. This could be especially useful for real estate agents and tourism businesses. Let me show you how to easily integrate this feature into your next Webflow project.

Read more...
Thursday, December 26, 2019

How to source a background video from the Webflow CMS

Would you like to use a dynamic background video on your site? Maybe even use it on your CMS collection page? I show you how this is done in just 8-9 steps! Let's get started...

Read more...
Tuesday, December 24, 2019

How to create a cool slide in out hover interaction with Webflow

Want to do a fun hover animation with slide in text for your next project? I've made a short video to show you how it's done and there's also a link to the cloneable example project.

Read more...

Join the newsletter for Webflow & Web Design updates.

Thanks for subscribing! Your first newsletter will arrive in your inbox soon.
Oops! Something went wrong! Try again or get in touch via the form below, so I can add you manually!

Have questions or want to talk about a project idea?

Just send an email to laura.s.niebel@gmail.com or fill out the form below. I'm looking forward to hear from you!

Thanks! I'll get back to you as soon as possible!
Oops! Something went wrong while submitting the form. Please try again or contact me via email.