De nombreux utilisateurs, actuels ou futurs, se demandent s’il est possible d’exporter le code d’un site Webflow en HTML/CSS. La réponse est oui. Même certains utilisateurs du plan gratuit peuvent le faire en quelques étapes simples.
Webflow écrit la majeure partie du code à votre place, au fur et à mesure que vous concevez et développez vos pages. La plateforme est réputée pour la propreté et la sémantique de son code, qui n’est pas écrit principalement à la main.
Quand vous exportez l’ensemble de votre projet Webflow, vous obtenez du HTML, du CSS et du JavaScript statiques, prêts à l’emploi. Ce code peut servir à de nombreux usages.
En exportant le code pour l’utiliser ailleurs, vous perdez en revanche certains avantages de Webflow, comme le CMS et l’éditeur de contenu, 2 fonctionnalités clés de la plateforme.
Les étapes pour exporter le code Webflow
L’export du code est rapide et simple. Voici la marche à suivre, étape par étape.
- Ouvrez votre projet dans le Designer Webflow.
- Cliquez sur l’icône d’export dans le coin supérieur droit.
- Téléchargez le fichier ZIP généré, qui contient le code de votre site.
Webflow met quelques secondes à préparer votre code. Pour un site complexe, l’opération peut durer un peu plus longtemps, sans dépasser quelques minutes.
Exporter le code Webflow avec un plan gratuit
L’export de code est réservé aux espaces de travail premium. Si vous êtes sur un plan gratuit et étudiant dans un établissement accrédité, vous pouvez toutefois demander un plan gratuit qui inclut certaines fonctionnalités normalement réservées aux plans payants. Une fois ce plan activé, suivez les étapes ci-dessus pour exporter le code.
Sinon, vous pouvez toujours publier votre site Webflow et copier son code source. Cette méthode demande malheureusement beaucoup plus d’étapes pour obtenir un résultat qui fonctionne.
Ce que contient un export de code Webflow
Voici les éléments couverts par l’export de code Webflow :
- Le HTML. Toutes les pages et les modèles de collections sont inclus en HTML.
- Le CSS. Vous récupérez le CSS de Webflow, ainsi que Normalize.css.
- Le JavaScript. Vous recevez tout le code JS nécessaire aux interactions et aux animations. Si certains éléments de ce fichier ne vous servent pas, vous pouvez les supprimer pour améliorer les performances.
- Les images. Toutes les images de la bibliothèque de médias sont exportées dans le fichier ZIP.
- Les scripts et bibliothèques chargés depuis des URL distantes, comme jQuery, les polyfills IE9 et les polices Google Fonts, peuvent être inclus dans l’export. C’est aussi le cas des interactions Webflow.
Ce que l’export de code Webflow ne contient pas
L’export de votre site désactive les fonctionnalités qui reposent sur les API de Webflow, comme l’e-commerce, la recherche sur le site, le traitement des formulaires et la protection par mot de passe.
Les données de vos collections ne sont pas incluses non plus. Webflow génère une page HTML par collection, mais pas une page distincte pour chaque élément de la collection. Si votre site repose sur les collections, vous devrez donc reconstruire les données à partir de vos modèles de page.
Pourquoi exporter du code depuis Webflow
Les raisons d’exporter le code de son site Webflow sont nombreuses.
Comme l’export fournit du HTML et du CSS bruts, ce code peut techniquement servir dans presque tous les projets. Le plus souvent, il sert de base pour construire d’autres plateformes.
Les utilisateurs d’hébergeurs de sites statiques, comme Vercel, Cloudflare Pages, AWS Amplify ou Netlify, peuvent aussi exporter leur code depuis Webflow. Ils peuvent le déposer tel quel chez ces hébergeurs.
Enfin, l’export de code vous permet d’ajouter des données et des fonctionnalités dynamiques à vos modèles Webflow pour les transformer en applications web simples.