Un site conçu sous Webflow ne se « convertit » pas vers WordPress : il se reconstruit, section par section, en partant du rendu final plutôt que d’un quelconque export automatique. Aucun outil ne transforme fidèlement un projet Webflow en blocs Gutenberg, et c’est précisément ce qui a occupé plusieurs semaines de travail sur ce projet de site vitrine, pour un cabinet de conseil qui quittait la plateforme après plusieurs années.
Ce billet détaille la méthode suivie pour reconstruire une brochure Webflow de quatorze sections en blocs Gutenberg natifs. Le référencement de la version reconstruite, sujet à part entière, n’est pas traité ici.
Étape 1 : cartographier chaque section avant de coder
Avant d’ouvrir l’éditeur de blocs, chaque section de la page d’accueil a été capturée en image et annotée : type de mise en page (colonnes, superposition, grille), espacement observé, comportement au défilement. Cette cartographie complète, réalisée avant tout développement, a évité de redécouvrir la structure de la page au fil de l’eau, avec le risque d’oublier une section entière en fin de projet.
Étape 2 : extraire les vraies valeurs du CSS généré
Webflow génère un CSS très verbeux, mais parfaitement exploitable pour en extraire les valeurs réellement utilisées : couleurs exactes, tailles de police, espacements en pixels. Plutôt que de deviner ces valeurs à l’œil, l’export CSS du site d’origine a servi de référence directe.
.hero-section {
padding: 96px 0px 120px;
background-color: #1c2b39;
}
.hero-title {
font-size: 48px;
line-height: 1.15;
letter-spacing: -0.02em;
}Étape 3 : recréer chaque section avec les blocs natifs
Chaque section a été recomposée avec les blocs de groupe et de colonnes natifs de WordPress, en s’appuyant sur theme.json pour déclarer les couleurs et espacements extraits à l’étape précédente comme des valeurs réutilisables du thème, plutôt que de les coller en dur bloc par bloc :
{
"version": 2,
"settings": {
"color": {
"palette": [
{ "slug": "fond-hero", "color": "#1c2b39", "name": "Fond héro" }
]
}
}
}
Étape 4 : reproduire les micro-interactions, avec parcimonie
Webflow permettait des animations déclenchées au défilement, très présentes sur le site d’origine. Plutôt que d’installer une bibliothèque d’animation complète pour tout le site, seules les deux animations réellement centrales à l’identité du site (apparition progressive du titre principal, effet de parallaxe léger sur l’image d’en-tête) ont été reproduites, avec un script front minimal utilisant l’API IntersectionObserver du navigateur.
const observateur = new IntersectionObserver( ( entrees ) => {
entrees.forEach( ( entree ) => {
if ( entree.isIntersecting ) {
entree.target.classList.add( 'est-visible' );
}
} );
} );
document.querySelectorAll( '.anime-au-defilement' ).forEach( ( element ) => {
observateur.observe( element );
} );Étape 5 : valider section par section, pas à la fin
- Comparer chaque section reconstruite à sa capture d’origine, immédiatement après sa réalisation
- Faire valider chaque section par le cabinet de conseil au fil de l’eau, plutôt qu’en bloc à la toute fin
- Vérifier l’affichage sur mobile section par section, Webflow gérant le responsive différemment de theme.json
Ce qui a pris le plus de temps, contre toute attente
Ce n’est pas la mise en page qui a demandé le plus d’efforts, mais la reproduction fidèle des espacements verticaux entre sections : Webflow calcule certains espacements de façon relative à la taille de la fenêtre, un comportement qu’il a fallu approcher manuellement avec des unités fluides en CSS plutôt que de reproduire à l’identique, techniquement impossible tel quel.
Sur ce genre de reconstruction, on préfère toujours cartographier la totalité du site avant d’écrire la première ligne de code : découvrir une section oubliée en fin de projet coûte largement plus cher que de l’avoir anticipée dès le départ.
En résumé
Reconstruire un site Webflow en blocs Gutenberg natifs demande une méthode rigoureuse, section par section, appuyée sur les vraies valeurs extraites du CSS d’origine plutôt que sur une estimation visuelle. Le résultat, une fois toutes les sections validées, offre au client une autonomie éditoriale que la plateforme d’origine ne permettait pas dans les mêmes conditions.
