Discover Webflow tricks even seasoned pros often overlook! From hidden design hacks to smart code integrations — Jonas Arleth shares practical tips to take your projects to the next level.

12 Webflow Tricks Hardly Anyone Knows — and That Will Make Your Next Project Noticeably Smarter

From clever script handling and free WebP exports to transparent color variables – these twelve tips will save you clicks, loading time, and nerves. Read through them once, apply them, and your workflow will feel like an upgrade.

1. Load JavaScript immediately, jQuery at the very bottom

You can safely place plain JavaScript code inside an HTML embed anywhere in your page structure — it will execute directly during rendering. jQuery snippets, however, require the $ library, which Webflow only includes right before </body>. So always place any jQuery snippet right before the closing </body> tag, or you'll get the infamous $(…) is not a function error.

2. Animated WebP instead of GIF

Animated WebP files are the better GIF: full 24-bit color, transparency — and typically 50–80% smaller. Just convert your MP4 loops or GIFs using tools like ezgif.com, upload the WebP as an image asset in Webflow, and enjoy faster load times without quality loss.

3. Use “Hidden” in the settings panel instead of display:none

Clicking Settings → Visibility → Hidden adds the native HTML hidden attribute to the element. Advantage: The element is completely removed from the render and layout tree, without leaving inline styles. Cleaner code, better performance.

4. Copy components between accounts — with Copyflow

Normally, copy/paste actions only work within the same account across projects. Copyflow breaks this barrier: select your element, Copy with Copyflow, switch accounts, Paste — done. Classes, interactions, and assets are transferred with it. Perfect for community snippets or quick freelancer handovers.

5. Use Webflow as a free WebP converter

Upload an image, publish the project, open the asset URL, and download — Webflow gives you an optimized WebP version plus several responsive sizes (2000w, 1600w, …). No ads, no limits, no third-party tools.

6. Replace images instead of re-uploading

In the asset panel, select an image → Replace → upload new file. Alt text and all connections remain. No manual copy-pasting of alt text, no re-linking — full content control with two clicks.

7. Theme switching without combo classes: CSS variable modes

Define CSS variables in the design panel and create multiple Variable Modes (e.g., Light, Dark, Accent). Assign a mode to a section and all child elements automatically inherit the new values. Result: A complete design switch without class clutter.

8. Find, rename & clean up components quickly

Right-click on a component → Show instance. Webflow jumps straight to the component, shows all usages, and allows renaming. Fun fact: Unused components still remain in the published code — with this function you can track and delete them to keep your project lightweight.

9. Use emoji as a visual CMS traffic light

🔒 for locked, ✏️ for editable: Simple emoji markers in descriptions or component names instantly indicate what your client is allowed to edit. Short learning curve, no extra documentation needed.

10. Context-aware content with .wf-design-mode

Webflow automatically assigns the .wf-design-mode class to the Designer. A small CSS block lets you separate designer-only notes from live content:

/* Designer‑Only sichtbar, im Browser unsichtbar */

.designer-only { display:none; }
.wf-design-mode .designer-only { display:block; }

/* Browser‑Only im Designer nicht anzeigen */
.wf-design-mode .web-only { display:none; }

‍

Perfect for placeholders, clone links, or internal to-dos your visitors should never see.

11. Collection item → component: Auto overrides in seconds

Have a Collection List with already bound fields (text, image, etc.)? Convert a single item via Right-click → Convert to Component. Webflow automatically creates Override Properties for every bound field — giving you a fully functional building block that still retains its CMS data.

12. Darken or add transparency to color variables on the fly

Thanks to the new CSS Color Level 4 syntax, you can directly adjust the opacity (or even individual color channels) of an existing variable — no need for extra variables:

/* Apply 50% opacity to the white variable */
color: rgb(from var(--white) r g b / 50%);


Ideal when deriving text or icon colors from your main palette and needing a semi-transparent variant. Saves time and keeps your variable list lean.

Wenn du eine stilistisch überarbeitete Version möchtest (mehr Flow, leserfreundlich für native Speaker), sag einfach Bescheid!