Modifier un template gratuit Webflow

Choisir et installer un template gratuit sur Webflow

Un compte Webflow gratuit se crée depuis webflow.com et l’inscription t’amène directement dans le Designer, avec le choix entre un site vierge et un template. Problème : cet écran de création ne permet pas de filtrer les templates par catégorie.

1. Passe par la bibliothèque de templates de Webflow, pas par l’écran de création.
2. Croise deux filtres. Une catégorie (portfolio et agence, par exemple) et le filtre des modèles gratuits.
3. Installe le template. « Use for free », un nom de site, « create site », et il s’ouvre déjà installé dans le Designer.

Le portfolio est le premier site à monter quand tu lances une activité de freelance ou d’agence : c’est ce que tu montres à tes clients.

Lire la structure du template avant d’y toucher

Avant la moindre modification, déplie la hiérarchie de la page d’accueil et regarde comment elle est construite : la navbar, la hero section, une section d’autorité avec des cartes et des chiffres, une section de logos, le footer. Certaines sections n’ont même pas de nom.

Ce repérage sert à décider ce que tu changes avant de le changer : les textes, les images, ce qui manque au modèle. Sans ça, tu cliques au hasard dans une structure que quelqu’un d’autre a pensée.

Modifier les textes et les images sans casser le template

Le texte qu’on ne peut pas cliquer

Un double clic suffit pour la plupart des textes. Le texte défilant du template résiste : il déborde de son conteneur, donc il reste inaccessible. Tu peux retirer l’overflow hidden sur la div, mais tu touches alors au style pour rien. Plus propre : sélectionne le texte, remonte dans la hiérarchie, tu y retrouves les éléments répétés un par un, et change leur contenu depuis le panneau de réglages sans modifier une seule propriété.

Isoler une classe avant de la modifier

Pour une image, l’engrenage puis « replace image ». Le piège arrive juste après.

La parade tient en un mot : isoler. Ajoute une classe combinée aux seules images concernées, nommée dans la nomenclature du template, puis règle le cadrage sur cette classe combinée. Le reste du site ne bouge pas.

Ajouter ce qui manque au template

• Les boutons. Le modèle n’a aucun call to action. Ajoute un élément button dans le header et dans la navbar, et donne-lui la classe de bouton primaire déjà présente dans le style guide.
• Le bouton de navigation. Trop épais tel quel : classe combinée « nav », padding vertical réduit à 0,5 puis 0,35, un rem de chaque côté, taille de texte en regular ou en small. Un radius un peu plus prononcé sur la classe de base finit le travail.
• Le logo. Même logique que les images : « replace ».
• Un GIF dans un paragraphe. Un span autour d’un espace suffit pour glisser une image animée entre deux mots d’un texte intermédiaire.

Rendre la navigation collante

La navbar du template est en position absolute. Passe-la en fixed, ancre-la en haut, donne-lui un z-index élevé pour qu’elle passe au-dessus du reste de la page. Pour le fond, récupère la couleur dans les variables, déconnecte la variable pour ne garder que la couleur, descends l’opacité à 80 % et ajoute un backdrop filter blur de 8 pixels. Réduis enfin le padding interne du composant de navigation, qui reste épais par défaut.

Modifier le contenu dynamique lié au CMS

Les projets affichés sur la page d’accueil viennent d’une collection. Un picto sur l’élément ouvre sa fiche directement depuis la page, sans la quitter : nom du projet, slug, description courte, introduction, image principale. Chaque champ est branché à un endroit précis du template.

Une image principale trop haute étire toutes les cartes. Ajoute-lui une classe combinée, plafonne sa hauteur autour de 35 rem et cale sa position sur le haut. Nomme cette classe pour ce qu’elle fait, pas pour la page où tu l’as créée : les mêmes projets remontent sur la page d’accueil, sur la page des réalisations et sur le gabarit de page dynamique. Le texte long de ce gabarit s’édite au même endroit, dans le champ rich text de la fiche, et un save répercute tout.

Conclusion

Prendre en main un template gratuit tient en quelques réflexes : lire sa hiérarchie, changer textes et images sans toucher aux classes partagées, ajouter les boutons qui manquent et brancher le CMS sur tes vrais projets.