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!


Back to all blog posts

This might also interest you...

Tuesday, September 17, 2019

How to connect MailChimp to your Webflow website

It's easy to integrate a MailChimp newsletter subscription form into your Webflow site. I've outlined how to do this in this blog post!

Read more...
Thursday, September 12, 2019

Digital agencies from Perth, Australia – Part 1: Humaan

Know any great agencies from Perth, Western Australia? No? That's about to change! In this three part series I introduce you to some of my favourite digital agencies in the Western Australian capital. Enjoy!

Read more...
Tuesday, September 10, 2019

Must-see conference talks for creatives and freelancers

Can't make it to your favorite design or tech conference? No worries! I've gathered several YouTube channels that provide recordings of interesting and useful tech/design talks from Australia and elsewhere. Sit back on your couch, your office chair or wherever you watch YouTube and learn something new!

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.