Guide / Article

5 trucs et astuces pour le Webflow que nous parions que vous ne connaissez pas

Flowbase
October 30, 2020
5 trucs et astuces pour le Webflow que nous parions que vous ne connaissez pas

// Webflow Trick 01

View Custom CSS in the designer without publishing

Vous l'avez peut-être fait avant, vous avez ajouté des CSS personnalisés dans les paramètres de la page et maintenant vous devez attendre que le site publie pour voir les changements.

Vous perdez de précieuses secondes ! Vous auriez pu simplement utiliser le composant embed-code, de cette façon vous pouvez rapidement voir ces changements CSS sans attendre la publication de la page pour voir les changements.

// Webflow Trick 02

Math calculations directly in the webflow field.

Avez-vous déjà travaillé sur un site Web où vous deviez sortir votre calculatrice pour quelques sommes rapides... Eh bien, désolé que tu te sentes un peu bête.
Vous auriez pu simplement entrer cela directement dans le champ et faire en sorte que le webflow écrase ces chiffres pour vous.

Vous entrez les champs comme ceci :
100/4
33 * 33
140 - 22

Suivi de l'unité souhaitée, par exemple %, px, EM etc

Si vous construisez des colonnes, ne vous contentez pas de 33%. Tu es MIEUX que ça... Honnêtement... que penseraient les gens de toi sachant que tu as pris des raccourcis comme ça...
Il suffit de taper dans le champ 100/3% et MAINTENANT vous vous en souciez. C'est la finesse, fils.

// Webflow Trick 03

Change the Scroll to Section/Anchor Speed

Avez-vous déjà utilisé des liens d'ancrage de webflow et juste pensé Ce satané Webflow est un peu trop rapide...
Tu te demandais peut-être si tu pouvais changer ça... Eh bien vous pouvez, et c'est sacrément facile..

Ok, donc pour faire cela, vous allez ajouter un attribut personnalisé data-scroll-time et ensuite définir la valeur avec quelque chose en dessous :

  • data-scroll-time = 0 fera défiler immédiatement l'élément sans délai.
  • data-scroll-time = 0.75 défilera un peu plus vite que la valeur par défaut
  • data-scroll-time = 1 défilera aussi vite que d'habitude
  • data-scroll-time = 1.25 défilera un peu plus lentement que la valeur par défaut
  • data-scroll-time = 2 fera défiler les données deux fois plus lentement que d'habitude
  • le temps de défilement des données = 20 activera le TurtleMode


BON A SAVOIR - vous pouvez utiliser cet attribut personnalisé sur la balise body qui l'appliquera à tous les liens d'ancrage.

// Webflow Trick 04

Change Webflow Default Container Size

Si vous utilisez le webflow depuis un certain temps, vous utilisez probablement les div-blocks pour gérer vos conteneurs. Mais peut-être que vous avez besoin de mettre à jour un site plus ancien en les utilisant, ou peut-être que vous aimez juste être vous.

Dans tous les cas, vous pouvez simplement ajouter ce bout de code et changer le conteneur standard 960px


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

// Webflow Trick 05

Change Webflow Default Slider Dots


.w-slider-dot {

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

.w-slider-dot.w-active {
background: aqua;
font-size: 20px;}
Flowbase
October 30, 2020

Recieve webflow resources directly to your mailbox.

Sign up to get weekly insights & inspiration in your inbox.

OTHER GUIDES & LESSONS

Boost your webflow site further.