Chrome Extension
Last updated
Last updated
Pressing the right arrow key in the class selector field returns the class name of the nearest parent that has a component class (class containing underscores).
Press shift key & up arrow key to select the base class. Press shift key & down arrow key to return to all classes. Below the desktop breakpoint, stacked classes will be removed and added back.
Type a number into any style panel field and press the space bar. The number will be divided by 16 and the rem unit will be attached to the end.
Divide the width of any element by the width of its parent to get a percent width. Example: type 562/1440 into any style panel field and press the space bar. 562 will be divided by 1440. The result will be multiplied by 100, and a % unit will be attached to the end.
Example: type --theme--text%60 in any custom property value field and press the tab key. It will be converted to color-mix(in srgb, var(--theme--text) 60%, transparent)
Example: type --grid-gap / 2 in any custom property value field and press the tab key. It will be converted to calc(var(--grid-gap) / 2)
If the extension detects the words “true” or “false” in the component field, it will automatically add “true” & “false” buttons under that field even if that attribute name isn’t created anywhere inside an embed.
Add any embeds containing data attributes inside one div with the class of “page_code_wrap”
Create the data attributes inside the embed. In this example, padding top will have four buttons: none, small, main, & large. Refresh Webflow after adding this code to your embed.
Add the attribute to an element within a component and link the attribute value to a component field. The component field name must include the words that follow data- in the attribute name.
Close the component and click any button to change the field value.
