Webflow Tips & Tricks - 43 tips under 25 minutes
Webflow Tips 🎉 Celebrating Webflow course launch on here are some Tips & Tricks that you can use in Webflow to work faster than ever!
Webflow course: https://learnux.io/course/webflow
Framework I use: https://systemflow.co
00:33 - Cmd + Return for adding a class
00:54 - Referring to viewport with VH and WH
01:36 - Option + Arrows for navigation
02:33 - Referring to viewport with VMIN and VMAX
03:14 - Cmd + Return and Delete to fix a class
03:34 - iddqd for God Mode
04:35 - HTML Embed for CSS preview in Designer
05:51 - Control contrast ratio
06:31 - Use classes nested in Rich Text
07:58 - Show all elements with class
08:20 - Use Rich Text for quick embeds
09:26 - Option + drag to duplicate
09:54 - Cmd + E for searching in Webflow
10:18 - D for Settings (and S for styles)
10:31 - Cmd + Shitf + P for Preview
10:56 - Change scroll to anchor speed
11:46 - Scroll to middle of the screen
12:06 - Search Google Fonts Extension
13:43 - Color Picker Extension
13:53 - Click and move to change values
14:02 - Hold Option to change two sides
14:09 - Hold Shift to change all four sides
14:21 - Option Click to reset property
14:33 - Preview margins with x-ray
15:08 - Select child with Cmd click
15:25 - Use columns for text
15:42 - Truncate text with line-clamp
16:31 - Change div block to link block
16:55 - Generate dummy images from CMS
17:59 - Apply alt text from Assets Panel
18:35 - Shift + P for Publishing Panel
18:40 - Shift + Return to Publish
18:57 - Cmd Shift + S for backup
19:09 - Clean assets - delete and republish
19:46 - Cmd + Shift + O - turn off responsive image
20:09 - Lazy image loading
20:36 - Prefetch links
21:19 - systemflow.co
21:45 - SystemFlow.co - Components
22:06 - SystemFlow - use framework for Figma
22:47 - SystemFlow - design tokens
22:59 - SystemFlow - readymade classes
24:17 - Check out Webflow courses at learnux.io
Links:
https://systemflow.co - Designer-First Framework for Webflow
https://learnux.io - 15 hours of Webflow courses (some coming soon!)
Extensions:
https://chrome.google.com/webstore/de...
https://chrome.google.com/webstore/de...
#webflow #webdesign #tips #tricks