Webflow Variables Deep Dive
HTML-код
- Опубликовано: 7 июн 2024
- Learn Webflow the FAST way with our full Webflow Masterclass course - bit.ly/3FZej2s
Last month, Webflow announced the new variable features for everyone to use immediately, and I couldn't be more excited. Because now I can update hundreds of pages in Webflow in seconds using variables, and in this video I'm going to show you how you can too.
Follow Devin on Twitter: / devinsfountain
📽️ CHAPTERS
---------------------------
00:00 - Intro
00:11 - Variables Explained
00:58 - Creating new variables
02:54 - Applying variables to a design
03:50 - Size Variable
06:20 - Mobile responsive (constraints with sizing)
13:03 - Unlinking variables for one-offs
13:29 - Color Variables
18:01 - Updating all variables at the same time
Let us know your thoughts in the comments!
Continue learning from us on other social channels
---------------------------
Instagram: / flux.academy
Tiktok: / fluxacademy
X: / fluxacademyhq
Linkedin: / flux-academy
#webflow #webdesign #freelancewebdesigner
![PIECE BY PIECE - Official Trailer [HD] - Only In Theaters October 11](http://i.ytimg.com/vi/7Bc6trBc1kc/mqdefault.jpg)
Devin, your videos always crush. Thank you!!
Best explanation even better than Webflow! Thanks a million.
Glad it was helpful!
Another great video 🚀. Would love to see more on variables, for example how to have a button to switch between light and dark mode 🤞
That was a great primer. Thanks man. A bit late to the Variables party, so that was good way to splash in
Glad it helped!
Really useful, simple walkthrough, thanks. I can definitely tell (or at least I assume) this version of Variables is very "beta" because there are so many obvious improvements Webflow should add (ex: rearranging variables, the entire interface in general could use a bump etc.) Also, what if you could simply select your variables in the HTML Embed from a searchable dropdown, rather than having to type out "--folder--variable" for example. I'm sure that could be done, almost in the way you can add fields in Template Page Settings.
that was great
instead of the css device-color-scheme, how can i make this a button and let my user (who might be on a light device setting) switch to dark-mode, or vice versa?
hey, i was just thinking: what if the custom code for the responsive h-sizes doesnt matter? what if you simply change the body-root-font-size from 16px to lets say 14px, and all your rems will respect this change
This is what I was thinking ... REM is supposed to do it right
Wow no min/max values for variables that would make it auto responsive...
本以为figma的变量功能已经很难用了, 但是web flow 的变量功能更糟糕, 需要手动写代码切换变量值