En cliquant sur "Accepter tous les cookies", vous acceptez que des cookies soient stockés sur votre appareil afin d'améliorer la navigation sur le site, d'analyser l'utilisation du site et de contribuer à nos efforts de marketing. Consultez notre politique de confidentialité pour plus d'informations.

Comment exporter son site Webflow en HTML/CSS

Exportation HTML/CSS/JS Webflow

De nombreux utilisateurs existants et potentiels de Webflow se demandent s'il est possible d'exporter le code d'un site développé sur Webflow, et la réponse est simple : oui, c'est possible. En fait, même certains utilisateurs du plan gratuit peuvent le faire en quelques étapes faciles.

Webflow écrit la majeure partie du code pour vous au fur et à mesure que vous concevez et développez des pages web. La plateforme est louée pour la propreté et la sémantique de son code, étant donné qu'il n'est pas principalement écrit par des humains.

Une fois que vous décidez d'exporter l'ensemble de votre projet Webflow, vous obtiendrez du HTML, du CSS et du JavaScript statiques, tous prêts à être utilisés. Le code exporté peut être utilisé à diverses fins.

Bien sûr, en exportant le code et en l'utilisant ailleurs, vous perdrez certains des avantages offerts par Webflow, tels que la possibilité d'utiliser le CMS et l'éditeur de la plateforme, qui sont des fonctionnalités cruciales du constructeur de sites web populaire.

Étapes pour exporter le code Webflow

Webflow garantit que l'exportation du code est rapide et facile, mais nous allons la rendre encore plus pratique avec le guide étape par étape suivant.

  • Chargez votre projet via Webflow Designer.
  • Trouvez l'icône d'exportation dans le coin supérieur droit.
  • Téléchargez le fichier ZIP généré contenant le code de votre site.

Webflow a besoin de quelques secondes pour emballer votre code et vous l'offrir. Si le site est complexe, cela peut prendre un peu plus de temps, mais pas plus de quelques minutes.

Exportation du code Webflow pour les plans gratuits

L'exportation de code est réservée aux utilisateurs des espaces de travail premium. Cependant, si vous êtes sur un plan gratuit et que vous étudiez dans l'un des collèges accrédités, vous pouvez postuler pour un plan gratuit qui inclut certaines des fonctionnalités premium accessibles uniquement via des plans payants. Suivez les instructions ci-dessus pour exporter le code si vous parvenez à activer ce plan.

Si cela n'est pas une option, vous pouvez toujours publier votre site Webflow et copier le code source de celui-ci. Cela nécessite malheureusement beaucoup plus d'étapes pour le faire fonctionner.

À quoi s'attendre d'une exportation de code Webflow ?

Voici une liste des éléments couverts par la fonctionnalité d'exportation de code de Webflow.

  • HTML — Toutes les pages individuelles et les modèles pour les collections sont inclus en HTML.
  • CSS — Obtenez le CSS de Webflow, en plus de Normalize.css.
  • JavaScript — Recevez tous les morceaux de code JS nécessaires pour les interactions et les animations. Si vous n'avez pas besoin de certains éléments de ce fichier, vous pouvez les supprimer pour améliorer les performances.
  • Images — Toutes les images de la bibliothèque multimédia sont exportées et incluses dans le fichier zip.
  • Les scripts et bibliothèques provenant d'URLs distantes, y compris jQuery, les polyfills IE9 et les polices web de Google, peuvent être inclus dans l'exportation. Cela s'applique également aux interactions Webflow.

À quoi ne pas s'attendre d'une exportation de code Webflow ?

L'exportation de votre site désactivera les fonctionnalités nécessitant les APIs de Webflow, telles que les capacités eCommerce, la fonctionnalité de recherche sur le site, le traitement des formulaires et la protection par mot de passe.

De plus, les données de vos collections ne sont pas incluses lorsque vous exportez le code depuis Webflow. Même si Webflow génère une page HTML pour chaque collection, il n'est pas possible d'obtenir une page distincte pour chaque élément de la collection. Par conséquent, il est important de reconstruire les données avec vos modèles de page si vous dépendez des collections pour le site que vous souhaitez exporter.

Raisons d'exporter du code depuis Webflow

Il existe de nombreuses raisons pour lesquelles on pourrait vouloir exporter du code depuis leur site Webflow.

Il est techniquement possible de trouver une utilisation pour le code dans presque tous les projets, étant donné que l'exportation ne vous donne que du HTML et du CSS brut. Les gens exportent le code le plus souvent pour pouvoir construire différentes plateformes en l'utilisant.

Les personnes qui dépendent des hébergeurs de sites statiques, tels que Vercel, Cloudflare Pages, AWS Amplify ou Netlify, peuvent également décider d'exporter du code depuis Webflow. Ils peuvent ajouter le code sans modifications à ces hébergeurs.

Enfin, l'exportation de code peut vous permettre d'ajouter plus de données et de fonctionnalités dynamiques à vos modèles Webflow et de les convertir en applications web simples.