The Blog

Webflow news, tutorials and tricks

Tips & tricks for new Webflow designers & devs

In this article I share four quick tips & tricks for anyone just starting out with Webflow! From Webflow Chrome extensions to the lesser known features, I highlight some of the things that make your life easier as a brand-new Webflow designer and developer! Happy designing!

Estimated reading time:
2 minutes

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...

My journey of becoming a Webflow website designer

Want to know how I got started and became a Webflow designer? Then, listen up! You'll find a brief rundown of how I got to where I am now, as I haven't only switched continents but also moved from print to web/digital design...

Read more...

New Webflow Meetup Group in Perth, Australia

Are you based in Perth, Australia? Great - I've just established the city's first Webflow Meetup Group. Check out this post for all the details and for some more info on how to start a meetup group in your own hometown.

Read more...

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...