Webflow Hacks #01
Webflow Hacks #01

Webflow Hacks #01

Sommaire

Qu'est-ce qu'un Webflow Hack ?

Mais dis moi Théo, qu'est-ce qu'un Webflow Hack ? C'est très simple. C'est un moyen rapide & efficace de gagner du temps sur Webflow, d'éviter les erreurs et d'optimiser la conception d'un site vitrine ou eCommerce avec Webflow. C'est une Astuce en gros, mais "Webflow Hacks" sonne bien mieux que "Webflow Astuces". Bref, ces 10 Hacks vous sont proposés par INIT Program, la formation Webflow francophone. À découvrir en bas de page ✌️

Liste des Webflow Hacks

01 → Ajouter les nouveaux Breakpoints en dernier

Par défaut, Webflow nous propose 4 breakpoints différents pour gérer le responsive. Il nous propose en option d'en ajouter 3 nouveaux qui permettront de styliser pour les grands écrans. Mais attention, ils sont inenlevables et leurs icônes ressemblent à s'y méprendre à celle de Desktop. On va voir comment optimiser le workflow de responsive pour ne pas faire d'erreur.

Optimiser les BreakPoints plus grand
Optimiser les BreakPoints plus grand

02 → Repasser en Vitrine avec des pages eCommerce

Une fois que l'on a passé notre site en mode eCommerce (ajout des pages Products & Categories), il sera impossible d'enlever ces deux dernières pages. Mais… on pourra quand même repasser notre site en hébergement Vitrine classique. Je te montre comment.

Repasser de eCommerce à Vitrine
Repasser de eCommerce à Vitrine

03 → Supprimer les Assets inutiles en 2 clics

Supprimer les .Class inutilisées pour alléger le CSS du site. Facile. Supprimer les Animations inutilisées pour alléger le JS du site. Facile. Mais as-tu déjà vu comment supprimer les Assets (images, lottie) inutilisés ? Je te montre ça en moins de 3min.

Supprimer les Assets inutiles en 2 clics
Supprimer les Assets inutiles en 2 clics

04 → Optimiser les Polices d'écritures

Lorsqu'il s'agit d'optimiser le poids d'un site, on pense souvent aux images, mais les polices d'écritures ne sont pas en reste. Il ne sert à rien d'uploader sur Webflow toutes les variantes de graisses (Light→Bold).

Optimiser les Polices d'écritures
Optimiser les Polices d'écritures

05 → Tester son code dans le Designer

Durant la phase de développement, il est parfois nécessaire d'utiliser du custom CSS. Mais si celui-ci empêche la bonne création du site, on va devoir le tester directement dans le Designer. Je te comprends, c'est un peu flou. Du coup, j'ai fais une vidéo.

Tester son code CSS dans le Designer
Tester son code CSS dans le Designer

06 → Agrandir le panneau Custom Code d'une page

On ne va pas se mentir, la zone de Custom Code dans les paramètres des pages est bien trop petite. Comment peut-on y lire, écrire ou corriger du Custom Code ? Arrgh… Impossible. Mais une extension Chrome peut corriger ça.

Agrandir la zone de Custom Code d'une page
Agrandir la zone de Custom Code d'une page

07 → Modifier la couleur d'un SVG

Comment changer la couleur d'un élément SVG lors d'un hover/pressed/focused/current ou au responsive sans avoir à changer d'image. Rien de plus simple !

Changer dynamiquement la couleur d'un SVG
Changer dynamiquement la couleur d'un SVG

08 → Les Raccourcis CMD(ctrl) + E & CMD(ctrl) + K

Déplacer sa souris jusqu'au [+] pour ajouter un élément. Cliquer. Scroller. Choisir un élément. Le faire glisser jusqu'à l'endroit où tu veux le mettre. Trop d'actions. Je te donne un raccourci pour gagner du temps dans l'ajout d'un élément sur ta page.

Les Raccourcis: CMD(ctrl) + E & CMD(ctrl) + K
Les Raccourcis: CMD(ctrl) + E & CMD(ctrl) + K

09 → Le Raccourci CMD(ctrl) + Entrée

Déplacer sa souris jusqu'à la zone de saisie de la .Class. Cliquer. Taper le nom de la .Class. Appuyer sur Entrée. Trop d'actions. Je te donne un raccourci pour gagner du temps dans la saisie de la .Class.

Le Raccourci: CMD(ctrl) + Entrée
Le Raccourci: CMD(ctrl) + Entrée

10 → Détecter le DarkMode de l'OS

La grande mode, c'est le DarkMode. Il y a à la fois un intérêt UX mais également un intérêt UI. C'est plus simple à lire, ça fatigue moins les yeux et c'est quand même bien cool visuellement. Bref, je te montre un Custom Code rapide qui te permet de changer en CSS les couleurs selon le Mode (Light ou Dark) de ton OS (Windows ou MacOS).

Détecter le Dark Mode de l'OS
Détecter le Dark Mode de l'OS

S'abonner aux Webflow Hacks & à l'actualité Webflow x INIT

Découvrir la Formation Webflow francophone INIT Program

image

Apprends à créer un site moderne, dynamique et intègre les meilleurs outils du marché dans Webflow. Rejoins la formation sans attendre & Maitrise Webflow très rapidement.

-20% offert avec le code WIKI20 (valable sur les paiements en 1x et 4x)