Technische Geschichten
3 min

5 Webflow-Tipps und Tricks, die Sie sicher noch nicht kannten

November 23, 2021
5 Webflow-Tipps und Tricks, die Sie sicher noch nicht kannten
Main clouds hero section image

Wenn Sie ein erfahrener Profi sind, wissen Sie wahrscheinlich alles, aber wir dachten, es wäre eine gute Idee, einen Blick auf einige unserer bevorzugten, weniger bekannten Webflow-Tricks zu werfen.

Top 5 CSS Tricks You Must Know for Webflow - YouTube

Webflow Trick 01

Benutzerdefiniertes CSS im Designer anzeigen, ohne es zu veröffentlichen Sie haben dies vielleicht schon einmal getan: Sie haben benutzerdefiniertes CSS zu den Seiteneinstellungen hinzugefügt und müssen nun warten, bis die Website veröffentlicht wird, um die Änderungen zu sehen.

Sie verlieren wertvolle Sekunden! Sie können einfach die eingebettete Codekomponente verwenden, so dass Sie die CSS-Änderungen schnell sehen können, ohne darauf warten zu müssen, dass die Seite veröffentlicht wird, um die Änderungen zu sehen.

Sie können eine benutzerdefinierte HTML-Einbettung an beliebiger Stelle auf der Seite einfügen.

Webflow Trick 02

Mathematische Berechnungen direkt in der Webflow-Box. Haben Sie schon einmal an einer Website gearbeitet und mussten Sie für schnelle Summen unseren Taschenrechner heranziehen.... Nun, zu schade, dass Sie sich dabei ein wenig albern vorkommen werden. Sie können die Zahlen einfach direkt in das Feld eingeben und Webflow rechnet sie für Sie aus.

Sie geben Felder wie dieses ein:

  • 100/4
  • 33 * 33
  • 140 - 22

Die nächsten gewünschten Einheiten sind %, px, EM, usw.

Wenn Sie Säulen bauen, geben Sie sich nicht mit 33 % zufrieden. Sie sind besser als das..... Ganz ehrlich... was werden die Leute von Ihnen denken, wenn sie wissen, dass Sie auf diese Weise sparen... Geben Sie einfach 100/3% ein und JETZT interessiert es Sie. Das ist Anstand, Mann.

Webflow Trick 03

Ändern der Scrollgeschwindigkeit eines Abschnitts/Ankers

Haben Sie schon einmal Webflow-Ankerlinks verwendet und dabei gedacht. Verdammter Webflow, der ist ein bisschen hakelig... Vielleicht haben Sie sich gefragt, ob Sie das ändern können... Das können Sie, und es ist verflixt einfach.

Dazu müssen Sie ein benutzerdefiniertes data-scroll-time-Attribut hinzufügen und dann den folgenden Wert festlegen:

  • data scroll time = 0 blättert sofort und ohne Verzögerung zu dem Eintrag.
  • data-scroll-time = 0.75 scrollt etwas schneller als der Standardwert.
  • data scroll time = 1 blättert so schnell wie üblich.
  • data scroll time = 1.25 blättert etwas langsamer als der Standardwert.
  • Mit Datenlaufzeit = 2 wird doppelt so langsam wie üblich geblättert.
  • data-scroll-time = 20 aktiviert den TurtleModus

Hilfreicher Tipp - Sie können dieses benutzerdefinierte Attribut im Body-Tag verwenden, das dann auf alle Ankerlinks angewendet wird.

Webflow Trick 04

Ändern Sie die Größe des Standard-Webflow-Containers. Wenn Sie Webflow schon eine Weile nutzen, verwenden Sie wahrscheinlich div-Blöcke, um Container zu verwalten. Aber vielleicht müssen Sie eine alte Website mit ihnen zu aktualisieren, oder vielleicht mögen Sie nur sein Sie. Wie auch immer, Sie können einfach dieses Stück Code hinzufügen und den Standard-Container von 960px ändern

Webflow Trick 05

Ändern der Standard Webflow Slider Dots

Haben Sie genug von diesen langweiligen weißen Punkten zur Navigation Ihrer Folien? Mit benutzerdefiniertem Code ist es sehr einfach, Stiländerungen vorzunehmen. Wie in Tipp 01 gezeigt, können Sie den Code in eine HTML-Einfügung kopieren, um die Änderungen direkt im Vorschaumodus zu sehen, oder Sie können den benutzerdefinierten Code in den Code der Seiten- oder Projekteinstellungen einfügen.  

Und das Ergebnis sollte sein:

Wir haben das traditionelle Agenturmodell auf den Kopf gestellt. Keine Account Manager, keine schicken Büros und keine Empfangsdame. Transformative, ergebnisorientierte Marken, ein Teil unserer Dienstleistungen besteht aus Websites und Marketing ohne den üblichen Quatsch. Wir stehen zu unseren Prozessen und unserem globalen Team aus strategischen und kreativen Spezialisten, um erstklassige Marken, Websites und Marketingkampagnen zu liefern, die Unternehmen helfen, Probleme zu lösen und Chancen zu nutzen.

Lassen Sie uns gemeinsam etwas Großartiges aufbauen!

In unserem Blog vorgestellt

Fallstudien

Unser Angebot

Technologie-Know-how

vuejs logoreact logo
laravel logodjango logosymfony logo
aws partners logo docker logo kafka logo
kubernetes logoatlassian logo