Comment récupérer un HTML CSS sur Webflow
Webflow est une plateforme de conception visuelle qui permet de créer des sites web sans coder. Cependant, certains professionnels souhaitent récupérer le code HTML et CSS d’un projet Webflow pour l’utiliser ailleurs. Voici comment procéder étape par étape.
1. Exporter le code depuis Webflow
Webflow propose une fonction d’exportation simple pour obtenir les fichiers HTML, CSS, JS et les images.
- Connectez-vous à votre tableau de bord Webflow.
- Ouvrez votre projet.
- Cliquez sur “Export code” dans le coin supérieur droit (icône de flèche vers le bas).
- Téléchargez le fichier ZIP contenant tout le code de votre site.
Ce fichier contient :
- Des fichiers .html pour chaque page.
- Une feuille de style CSS principale.
- Des fichiers JavaScript.
- Un dossier images avec tous les médias utilisés.
2. Préparer le code pour votre environnement
Une fois le dossier extrait, vous pouvez adapter le code selon vos besoins.
- Ouvrez les fichiers avec un éditeur comme VS Code.
- Réorganisez les éléments si nécessaire.
- Modifiez les styles ou le contenu librement.
Le code exporté est propre et lisible, ce qui facilite les ajustements techniques ou graphiques.
3. Utilisations possibles du code
Une fois le code récupéré, vous avez plusieurs options :
- L’héberger sur votre propre serveur.
- L’intégrer dans des CMS comme WordPress ou Drupal.
- Le transformer en template pour un développement plus avancé.
4. Limitations à connaître
Webflow n’exporte pas tout.
- Les animations créées avec l’éditeur d’interaction restent fonctionnelles, mais deviennent difficiles à modifier sans Webflow.
- Les fonctions de formulaire nécessitent un serveur ou une solution tierce pour fonctionner.
- Les contenus dynamiques (CMS Webflow) ne sont pas inclus dans l’export.
Conclusion
Savoir récupérer un HTML CSS sur Webflow est essentiel pour déployer un site hors de la plateforme tout en gardant un travail de qualité. Webflow facilite cette opération via son outil d’export, mais il est conseillé de maîtriser les bases du code pour modifier ou adapter ce contenu ensuite.
Utilisez cette méthode pour gagner en flexibilité, tout en conservant la qualité visuelle du design initial.