Maîtrisez l'exportation de code Webflow. Ce guide complet détaille pourquoi, comment et ce qu'il faut savoir sur les limites. Prenez le contrôle total de votre site !
Développement Web
Vous avez un projet, des problématiques, des questions concernant un site internet, un ecommerce, ou une application ? Nous sommes là pour vous aider !
Nous contacter
Vous souhaitez prendre le contrôle total de votre site web conçu sur Webflow ? L'exportation de code est une fonctionnalité puissante qui vous ouvre un monde de possibilités. Que vous soyez un développeur souhaitant approfondir la personnalisation ou un designer désireux d'héberger votre site sur un serveur personnel, ce guide complet vous expliquera tout ce que vous devez savoir sur l'exportation de code depuis Webflow.
Pourquoi exporter le code de votre site Webflow ?
Webflow est une plateforme de développement visuel qui permet de créer des sites web professionnels sans écrire une seule ligne de code. Cependant, plusieurs raisons peuvent vous pousser à vouloir exporter le code source (HTML, CSS et JavaScript) de votre projet.
L'exportation de code vous offre une flexibilité et un contrôle accrus sur votre projet web. Voici quelques-uns des avantages les plus courants :
- Personnalisation avancée : Allez au-delà des fonctionnalités natives de Webflow en modifiant directement le code pour des ajustements précis.
- Flexibilité d'hébergement : Hébergez votre site sur le serveur de votre choix, vous donnant un contrôle total sur votre environnement d'hébergement.
- Intégration avec d'autres systèmes : Intégrez facilement votre design Webflow à d'autres applications ou plateformes. Pour des intégrations complexes, Turnk.co peut vous accompagner.
- Point de départ pour un développement plus complexe : Utilisez le code exporté comme base pour des projets de développement plus élaborés.
- Sauvegarde et remise au client : Conservez une copie de votre travail ou transférez facilement le site à un client.
Tutoriel : Comment exporter votre code Webflow étape par étape
L'exportation de votre code depuis Webflow est un processus simple et rapide. Voici les étapes à suivre :
- Ouvrez votre projet dans le Designer Webflow.
- Cliquez sur l'icône "Export Code" en haut à droite de l'interface, ou accédez-y via le menu principal (l'icône "W" en haut à gauche).
- Préparez le fichier ZIP. Une fenêtre s'ouvrira, vous donnant un aperçu de votre code HTML, CSS, de vos assets JavaScript et de vos images. Cliquez sur le bouton "Prepare ZIP".
- Téléchargez le fichier ZIP. Une fois la préparation terminée, cliquez sur "Download ZIP" pour télécharger l'archive contenant tous les fichiers de votre site.
Astuce : Pour améliorer les temps de chargement de vos pages, vous pouvez minifier votre code HTML. Pour ce faire, utilisez le raccourci Command + O (sur Mac) ou Control + O (sur Windows) dans la fenêtre d'exportation pour faire apparaître l'option "Minify HTML".
Une fois le fichier ZIP téléchargé, il vous suffit de le décompresser et de téléverser les fichiers sur le serveur de votre choix.
Que contient le fichier exporté ?
L'archive ZIP que vous téléchargez contient une structure de fichiers bien organisée :
- Fichiers HTML : Toutes les pages de votre site avec leur structure et leur contenu.
- Dossier CSS : Tous les styles de votre site, y compris les styles personnalisés.
- Dossier JS : Les fichiers JavaScript, y compris le moteur d'interactions de Webflow.
- Dossier d'images et autres médias : Toutes les ressources visuelles utilisées sur votre site.
Les limites de l'exportation de code
Bien que l'exportation de code soit une fonctionnalité puissante, il est essentiel de comprendre ses limites. Certaines fonctionnalités dynamiques de Webflow ne sont pas incluses dans l'exportation.
Ce qui n'est PAS inclus dans le code exporté :
- Contenu du CMS : Les listes de collections et les pages de collections n'afficheront pas le contenu dynamique lié aux champs de votre CMS.
- Fonctionnalités E-commerce : Les fonctionnalités liées à la boutique en ligne ne seront pas fonctionnelles.
- Comptes utilisateurs : Les systèmes de connexion et de gestion des utilisateurs ne sont pas exportés.
- Formulaires : Pour des raisons de conformité avec le RGPD, les formulaires ne fonctionneront pas sur un site exporté. Il vous faudra utiliser une solution tierce pour collecter les soumissions.
- Protection par mot de passe : Les pages protégées par mot de passe ne le seront plus après l'exportation.
- Fonction de recherche du site : La barre de recherche interne de Webflow ne fonctionnera pas.
Alternatives et solutions pour les fonctionnalités dynamiques
Pour pallier les limitations de l'exportation, plusieurs solutions s'offrent à vous :
- CMS Headless : Pour gérer votre contenu dynamique, vous pouvez opter pour un CMS "headless" (sans tête) comme Contentful, Sanity ou Strapi. Vous devrez exporter votre contenu CMS de Webflow (via un fichier CSV) et le recréer dans le nouveau CMS.
- Solutions E-commerce tierces : Des services comme Foxy.io peuvent être intégrés à votre site statique pour gérer les fonctionnalités de commerce électronique.
FAQ
Peut-on exporter le code avec un plan gratuit de Webflow ?
Non, l'exportation de code est une fonctionnalité disponible uniquement avec les forfaits payants de l'espace de travail (Workspace).
Le code exporté est-il propre et sémantique ?
Oui, Webflow génère un code propre et sémantique, facile à lire et à modifier pour les développeurs.
Existe-t-il des alternatives à Webflow pour l'exportation de code ?
Oui, d'autres outils "no-code" ou "low-code" comme WeWeb, Webstudio ou Carrd offrent également des fonctionnalités d'exportation de code.
Qu'est-ce qui n'est PAS inclus dans le code exporté ?
Le contenu du CMS, les fonctionnalités E-commerce, les comptes utilisateurs, les formulaires, la protection par mot de passe et la fonction de recherche du site.
Comment gérer le contenu dynamique après l'exportation ?
Vous pouvez utiliser un CMS "headless" ou des solutions e-commerce tierces pour pallier les limitations.
