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! You can check it out and sign up for an account here (yes, that's an affiliate link). 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!