# Guide d'utilisation des templates Webflow ## A qui sert ce guide Ce guide est pense pour les freelances, designers, consultants et creatifs qui veulent partir d'une base Webflow solide puis la personnaliser vite, proprement et sans casser la structure existante. ## 1. Cloner un template Webflow ### Avant de commencer - Connectez-vous a votre compte Webflow. - Gardez sous la main votre logo, vos couleurs, vos polices, vos textes et vos images. - Creez un dossier projet sur votre ordinateur pour ranger vos exports, visuels et contenus. ### Etapes pas a pas #### Etape 1 — Ouvrir la page du template Depuis le lien du template, ouvrez la page de presentation Webflow. Vous devez voir un apercu du site, un titre clair, puis un bouton de clonage ou d'ouverture dans Webflow. **Ecran attendu :** une fiche template avec visuels, apercu live et action principale de type `Clone in Webflow`. #### Etape 2 — Lancer le clonage Cliquez sur `Clone in Webflow`. Si Webflow vous le demande, choisissez l'espace de travail dans lequel vous voulez ajouter le projet. **Ecran attendu :** une fenetre ou un panneau qui confirme dans quel workspace le projet va etre copie. #### Etape 3 — Renommer le projet Une fois le clonage termine, renommez immediatement le projet avec un nom client ou un nom interne clair. Exemples : - `Dupont Studio - Portfolio 2026` - `Nova App - Landing SaaS v1` - `Atelier Lune - Boutique` #### Etape 4 — Ouvrir le Designer Entrez dans le Designer Webflow. Dans la colonne de gauche, vous verrez la structure des pages. Dans la zone centrale, vous verrez la page. A droite, vous retrouverez les styles, typographies, espacements et autres reglages. **Ecran attendu :** la page s'affiche avec un panneau `Navigator`, une zone canvas et un panneau de style. ### Bon reflexe Avant de modifier quoi que ce soit, dupliquez le projet ou creez une sauvegarde. Cela vous donne une version de secours si vous cassez une section importante. ## 2. Personnaliser les couleurs et les polices globalement L'objectif est de modifier le systeme une seule fois, pas bloc par bloc. ### Couleurs #### Methode recommandee - Reperez les classes globales comme `section`, `button`, `heading`, `text`, `card`, `tag`, `bg-dark`, `text-muted`. - Ouvrez les styles des boutons, textes et fonds les plus reutilises. - Remplacez les couleurs de base par votre palette de marque. #### Ordre conseille 1. Couleur de fond principale 2. Couleur de texte principale 3. Couleur d'accent 4. Couleurs secondaires et etats hover #### Conseil pratique Travaillez d'abord sur 4 a 6 couleurs maximum : - 1 fond principal - 1 fond secondaire - 1 texte principal - 1 texte secondaire - 1 accent - 1 couleur d'alerte si necessaire ### Polices - Identifiez les classes appliquees aux titres, sous-titres, paragraphes et boutons. - Remplacez d'abord la police d'affichage, puis la police de lecture. - Verifiez ensuite la hauteur de ligne, l'espacement entre lettres et la taille sur mobile. #### Regle simple - 1 police expressive pour les titres - 1 police lisible pour le texte courant Si vous changez une police tres large par une police tres compacte, revoyez les largeurs de blocs et les retours a la ligne. ## 3. Remplacer les textes et les images ### Textes Ne commencez pas par modifier phrase par phrase sans structure. Remplacez dans cet ordre : 1. Headline principale 2. Sous-titre 3. CTA 4. Services ou benefices 5. Preuves sociales 6. FAQ 7. Footer ### Methode rapide - Collez vos textes definitifs dans un document de travail. - Avancez section par section dans Webflow. - Gardez la longueur du texte proche de la maquette d'origine pour eviter de casser la mise en page. ### Images - Preparez les visuels au bon format avant import. - Renommez chaque image avec un nom clair. - Importez les images dans le panneau Assets puis remplacez-les une par une. Exemples de noms propres : - `portrait-fondateur-marie-dupont.jpg` - `mockup-dashboard-mobile.webp` - `projet-identite-visuelle-atelier-lune-01.jpg` ### A verifier apres remplacement - Les visages et produits restent bien cadres - Le poids des images reste raisonnable - Les alt texts sont renseignes - Les proportions restent coherentes sur mobile ## 4. Adapter le template pour mobile Ne laissez jamais la version mobile pour la fin complete du projet. Faites un passage a chaque grande section, puis un controle final. ### Ordre de verification 1. Desktop 2. Tablet 3. Mobile landscape si necessaire 4. Mobile portrait ### Ce qu'il faut verifier - Les titres ne cassent pas sur 4 lignes - Les boutons restent cliquables - Les grilles passent bien en 1 colonne ou 2 colonnes utiles - Les espacements verticaux respirent encore - Les images importantes restent visibles - Les formulaires sont faciles a remplir au pouce ### Ajustements frequents - Reduire le `font-size` des grands titres - Diminuer les paddings lateraux - Transformer une grille 3 colonnes en pile verticale - Recentrer certains contenus - Supprimer ou simplifier des animations trop lourdes sur mobile ## 5. Publier avec votre propre domaine ### Checklist avant publication - Toutes les pages sont relues - Tous les liens fonctionnent - Les formulaires sont testes - Les images sont optimisees - Le SEO de base est rempli ### Etapes de publication #### Etape 1 — Ajouter le domaine Dans les reglages du projet, ajoutez votre domaine principal et, si besoin, la version `www`. #### Etape 2 — Configurer les DNS Copiez les enregistrements demandes par Webflow chez votre registrar. Cette etape se fait generalement chez OVH, Gandi, IONOS, GoDaddy ou Cloudflare selon le domaine. #### Etape 3 — Definir le domaine principal Choisissez si la version canonique est avec ou sans `www`, puis activez la redirection propre. #### Etape 4 — Publier Cliquez sur `Publish`, selectionnez le domaine Webflow de test et le domaine personnalise, puis lancez la publication. **Ecran attendu :** une fenetre de publication avec cases a cocher pour les domaines disponibles. #### Etape 5 — Verifier Ouvrez le site sur votre domaine reel et testez : - Home - Contact - Liens de navigation - Formulaire - Mobile ## 6. Bonnes pratiques de nommage des classes Un template devient vite lent a maintenir si les classes sont nommees au hasard. ### Regles simples - Soyez descriptif - Soyez coherent - Evitez les classes basees sur la couleur ou la position si elles risquent de changer - Utilisez une logique de composants ### Exemples de bons noms - `hero-section` - `hero-title` - `hero-subtitle` - `cta-button` - `services-grid` - `testimonial-card` - `footer-links` ### Exemples a eviter - `blue-button` - `left-text` - `div-block-47` - `big-title-new` - `section-final-2` ### Structure conseillee - Bloc : `pricing-card` - Element : `pricing-card-title` - Variante : `pricing-card featured` ### Reflexe utile Quand une classe est reutilisable sur plusieurs pages, donnez-lui un nom fonctionnel. Quand elle est vraiment unique a une section, rattachez-la a cette section. ## 7. Workflow recommande pour personnaliser proprement ### Sprint ideal 1. Dupliquer et renommer le projet 2. Nettoyer les pages inutiles 3. Poser les couleurs et les polices 4. Remplacer les contenus section par section 5. Corriger la version tablette et mobile 6. Verifier SEO, liens, formulaires et favicon 7. Publier sur domaine de test 8. Publier sur domaine final ## 8. Erreurs les plus frequentes - Tout personnaliser en local sans d'abord definir le systeme global - Changer les classes existantes sans comprendre ce qu'elles pilotent - Importer des images trop lourdes - Laisser des textes lorem ipsum dans le footer ou la meta description - Oublier la version mobile jusqu'a la veille de livraison - Publier sans tester le formulaire ## Resume express Un bon template Webflow doit vous faire gagner du temps, pas vous faire reconstruire le projet de zero. Clonez, renommez, personnalisez d'abord le systeme global, remplacez ensuite les contenus, puis finissez par le responsive et la publication.