Guide / Article

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

Flowbase
28 janvier 2021
5 trucs et astuces pour le Webflow que nous parions que vous ne connaissez pas

// Astuce du Webflow 01

Afficher le CSS personnalisé dans le concepteur sans publier

Vous l'avez peut-être déjà fait auparavant, vous avez ajouté des feuilles de style CSS personnalisées dans les paramètres de la page et vous devez maintenant attendre que le site soit publié 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 modifications CSS sans attendre la publication de la page pour voir les changements.

// Astuce Webflow 02

Calculs mathématiques directement dans le champ du webflow.

Avez-vous déjà travaillé sur un site web où vous deviez sortir votre calculatrice pour quelques sommes rapides... Désolé, vous allez vous sentir 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é que vous souhaitez, par exemple %, px, EM etc

Si vous construisez des colonnes, ne vous contentez pas de 33%. Vous êtes MIEUX que ça.... Honnêtement... que penseraient les gens de vous en sachant que vous prenez des raccourcis comme ça...
Tapez simplement dans le champ 100/3% et MAINTENANT vous vous en souciez. C'est de la finesse, fiston.

// Astuce Webflow 03

Changer le défilement en section/vitesse de l'ancre

Avez-vous déjà utilisé les liens d'ancrage du webflow et juste pensé Un flux web un peu trop rapide...
Vous vous êtes peut-être demandé si vous pouviez changer cela... Eh bien vous pouvez, et c'est très 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.

// Astuce du Webflow 04

Modifier la taille du conteneur par défaut du Webflow

Si vous utilisez le webflow depuis un certain temps, vous utilisez probablement les div-blocks pour gérer vos conteneurs. Mais peut-être avez-vous besoin de mettre à jour un site plus ancien en les utilisant, ou peut-être aimez-vous simplement ê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

Modifier les points du curseur par défaut du Webflow


.w-slider-dot {

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

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

Recevez les ressources du webflow directement dans votre boîte aux lettres.

Inscrivez-vous pour recevoir chaque semaine dans votre boîte de réception des informations et de l'inspiration.

AUTRES GUIDES ET LEÇONS

Boostez votre site webflow davantage.