Faire ton premier site en no-code

Préparer le projet Webflow avant de designer

Le site construit ici est une page unique pensée pour convertir : hero avec un message clair, logos clients pour l’autorité, section problème, solution en bento, portfolio, FAQ, dernier appel à l’action.

Tout démarre par le tag HTML body, qui impacte toutes les pages : fond connecté à une variable, texte en blanc, hauteur de ligne à 1,2 et une police choisie à la place de l’Arial par défaut.

Pourquoi travailler en rem

La structure suit trois niveaux : une div page wrapper qui englobe tout et se copie d’un projet à l’autre, une div main wrapper taguée main pour signaler le contenu principal aux moteurs de recherche, et les sections dedans. La navigation reste en dehors du main wrapper.

La navigation, les classes et les composants Webflow

Une classe dans Webflow est une sauvegarde de style : les trois liens du menu partagent la même, une modification les touche tous les trois. Le conteneur de la nav passe en flexbox horizontal avec un espacement space between, le fond par défaut de la navbar est retiré, et du padding en rem agrandit la zone cliquable des liens.

Pour la garder en haut de l’écran, la nav passe en position fixed avec un z-index très élevé, et son contenu reçoit une largeur maximale de 90 rem centrée par des marges automatiques.

Le bouton à bordure dégradée

La propriété border de Webflow ne sait pas afficher un dégradé. La technique tient en quatre gestes.

1. Envelopper le bouton dans une div.
2. Poser le dégradé. Un fond en dégradé linéaire entre deux variables de couleur, sur la div.
3. Display inline block sur cette div, pour qu’elle épouse la taille du bouton.
4. Radius et padding. Un radius très élevé et une pointe de padding : le dégradé n’apparaît que sur ce liseré.

Un survol qui soulève le bouton de 3 pixels sur l’axe Y, avec une transition de 200 millisecondes sur transform, suffit à le rendre vivant. Le tout devient un composant, avec une variante primaire, une secondaire et une pour la navigation. Deux propriétés de composant, texte et lien, changent le libellé d’une instance sans toucher aux autres.

La hero section : lueurs, grille et images

Les deux halos colorés du fond sont des div carrées de 50 rem, passées en cercle par un radius de 100 %, floutées par un filtre blur en valeur personnalisée. Décoratives, elles vivent dans le page wrapper et non dans le main, et sortent du flux en position absolute avec un z-index négatif. La seconde est obtenue en dupliquant la classe de la première : le style est conservé, seule la couleur change.

Le contenu du hero vit dans une grille d’une colonne, limitée à 50 rem et centrée. Le H1 est stylé au niveau du tag HTML pour impacter tous les H1 du site. Sous les boutons, la mention discrète est posée en text block et non en paragraphe : elle ne porte aucun mot-clé et n’a pas vocation à être référencée.

La bande d’images tient dans une seconde grille de sept colonnes. Chaque image prend 100 % de sa colonne, une hauteur maximale, un ajustement en cover et une position top pour n’être rognée que par le bas. Un dégradé en absolute sur le bas de la grille, de la couleur du fond vers cette couleur en opacité nulle, adoucit la coupure.

Animer au scroll dans Webflow

L’animation a besoin de hauteur : une section suivante de 200 vh donne de quoi défiler. Le déclencheur est posé sur la hero section, en while scrolling in view. Sur la timeline, 0 % correspond au haut de l’élément et 100 % au bas.

Trois amplitudes décroissantes suffisent, l’image du milieu ne bouge pas, et un smoothing à 80 % fluidifie le rendu.

Adapter la page au mobile

• Le padding latéral se pose sur une div dédiée autour du contenu, pas sur la section : sinon la bande d’images serait contrainte elle aussi.
• Les images sont masquées par paires symétriques en tablette puis en mobile, colonnes de la grille supprimées en conséquence, ce qui préserve l’animation.
• Le groupe de boutons passe en horizontal wrap pour aller à la ligne au lieu de déborder, et les boutons prennent toute la largeur en mobile.
• Quand un display none refuse de s’appliquer, une classe dédiée qui ne porte que cette propriété règle le problème.

Conclusion

Un premier site sur Webflow tient à peu de choses : une structure nommée proprement, des classes qui servent de styles réutilisables, des composants pour ce qui se répète, et le responsive traité au fur et à mesure.