Leitfaden / Artikel

5 Webflow Tipps & Tricks, die Sie sicher nicht wussten

Flowbase
Januar 28, 2021
5 Webflow Tipps & Tricks, die Sie sicher nicht wussten

// Webflow-Trick 01

Benutzerdefiniertes CSS im Designer ohne Veröffentlichung anzeigen

Vielleicht haben Sie es schon einmal getan, Sie haben einige benutzerdefinierte CSS in den Seiteneinstellungen hinzugefügt und jetzt müssen Sie warten, bis die Seite veröffentlicht wird, um die Änderungen zu sehen.

Sie verlieren wertvolle Sekunden! Sie hätten einfach die Einbettungscode-Komponente verwenden können. Auf diese Weise können Sie diese CSS-Änderungen schnell sehen, ohne auf die Veröffentlichung der Seite zu warten, um Änderungen anzuzeigen.

// Webflow-Trick 02

Mathematische Berechnungen direkt im Webflow-Feld.

Haben Sie schon einmal an einer Website gearbeitet und mussten für ein paar schnelle Summen Ihren Taschenrechner zücken? Tut mir leid, aber Sie werden sich jetzt ein bisschen dumm vorkommen.
Sie hätten das auch direkt in das Feld eingeben können und Webflow hätte die Zahlen für Sie berechnet.

Sie geben die Felder so ein:
100/4
33 * 33
140 - 22

Gefolgt von der gewünschten Einheit, z. B. %, px, EM usw
.

Wenn Sie Säulen bauen, geben Sie sich nicht mit 33 % zufrieden. Sie sind BESSER als das.... Ehrlich gesagt... was würden die Leute von Ihnen denken, wenn Sie diese Ecken so abschneiden würden...
Geben Sie einfach 100/3% in das Feld ein und JETZT kümmert es Sie. Das ist Finesse, mein Sohn.

// Webflow-Trick 03

Ändern Sie den Bildlauf auf Abschnitts-/Anchor-Geschwindigkeit

Haben Sie schon einmal Webflow-Ankerlinks verwendet und dabei gedacht Verdammtes Webflow, das ist ein bisschen flott...
Vielleicht haben Sie sich gefragt, ob Sie das ändern können... Nun, das können Sie, und es ist verdammt einfach...

Okay, um dies zu tun, werden Sie ein benutzerdefiniertes Attribut data-scroll-time hinzufügen und dann den Wert mit etwas unten setzen:

  • Data-Scroll-Time = 0 blättert sofort und ohne Verzögerung zum Element.
  • Data-Scroll-Time = 0.75 scrollt ein wenig schneller als die Standardeinstellung
  • Daten-Scroll-Zeit = 1 scrollt genauso schnell wie üblich
  • Data-Scroll-Time = 1.25 wird etwas langsamer als die Standardeinstellung gescrollt.
  • Daten-Scroll-Zeit = 2 scrollt doppelt so langsam wie üblich
  • Daten-Scroll-Zeit = 20 aktiviert den TurtleMode


GOOD TO KNOW - Sie können dieses benutzerdefinierte Attribut auf das Body-Tag anwenden, das dies auf alle Ankerlinks anwenden wird.

// Webflow Trick 04

Webflow-Standardcontainergröße ändern

Wenn Sie Webflow für eine Weile verwendet haben, verwenden Sie wahrscheinlich div-Blöcke, um Ihre Container zu verwalten. Aber vielleicht müssen Sie eine ältere Website mit ihnen zu aktualisieren, oder vielleicht mögen Sie nur sein Sie.

So oder so, können Sie einfach dieses Bit von Code hinzufügen und ändern Sie die Standard 960px Container


.w-container {
max-width: 1140px; }
}

// Webflow Trick 05

Webflow-Standard-Schieberegler-Punkte ändern


.w-slider-dot {

background: teal;font-size: 20px;}

.w-slider-dot.w-active {
background: aqua;
font-size: 20px;}
Flowbase
Januar 28, 2021

Empfangen Sie Webflow-Ressourcen direkt in Ihre Mailbox.

Melden Sie sich an, um wöchentliche Einblicke und Inspirationen in Ihrem Posteingang zu erhalten.

ANDERE ANLEITUNGEN & LEKTIONEN

Steigern Sie Ihre Webflow-Site weiter.