Rebuildy
🎨 WEBFLOW

Importer votre site sur Webflow

Guide pour coller le HTML Rebuildy dans le Designer Webflow

📦 Contenu du ZIP

📁

Fichiers .html

Pages générées par Rebuildy. C’est ce code que vous collez dans un Embed Webflow.

🎨

Fichier styles.css

CSS du site, à coller dans le code personnalisé du projet Webflow.

⚠️ Webflow n’importe pas un ZIP HTML nativement

On utilise un Embed + le code personnalisé du projet. C’est la méthode la plus fiable pour coller un site Rebuildy sans tout reconstruire à la main.

📑 Sommaire

⚙️
Préparer Webflow
CSS et Tailwind
🧩
Coller une page
Embed HTML
📦
Plusieurs pages
Navigation Webflow
⚙️

1. Préparer le projet

Avant de coller le HTML : téléchargez le ZIP depuis Rebuildy, puis ouvrez un projet Webflow (nouveau ou existant).

📝 Étapes :

1

Téléchargez le ZIP Rebuildy

Depuis la preview de votre site, téléchargez l’export HTML. Dézippez le dossier : vous y trouverez les pages .html et éventuellement styles.css.

2

Ouvrez les réglages du projet

Dans Webflow : Project Settings → Custom Code.

3

Ajoutez Tailwind dans le Head

Les sites Rebuildy utilisent Tailwind. Collez ceci dans Head Code :

<script src="https://cdn.tailwindcss.com"></script>
4

Collez le CSS Rebuildy

Si le ZIP contient styles.css, enveloppez-le dans une balise <style> et collez-le aussi dans le Head Code, sous Tailwind. Enregistrez.

🧩

2. Coller une page

Méthode recommandée : un Embed plein écran par page Webflow.

📝 Étapes d'installation :

1

Créez une page vide

Dans le Designer, créez une page (Accueil, À propos, etc.) et retirez les sections par défaut pour partir d’un canvas vide.

2

Ajoutez un Embed

Ajoutez un élément Embed (Add → Elements → Embed), puis étirez-le en pleine largeur.

3

Collez le HTML du body

Ouvrez le fichier HTML Rebuildy. Copiez uniquement le contenu entre <body> et </body>, puis collez-le dans l’Embed. Ne collez pas tout le document (doctype, html, head).

💡 Astuce : si l’Embed refuse le code, raccourcissez-le en collant d’abord le CSS dans Custom Code, puis seulement le body dans l’Embed.

4

Importez les images

Uploadez les visuels dans Assets, puis remplacez les URLs d’images du HTML par les URLs Webflow si besoin.

5

Publiez

Cliquez sur Publish et vérifiez le rendu sur l’URL Webflow (desktop et mobile).

⚠️ Points importants :

  • L’Embed Webflow a une limite de caractères : une page trop longue peut être coupée.
  • Le code personnalisé du projet s’applique après publication, pas toujours dans le canvas.
  • Les animations JS du HTML Rebuildy fonctionnent si vous les laissez dans le body.
📦

3. Sites multi-pages

Type de site : site personnalisé Rebuildy (plusieurs fichiers HTML).

Principe : une page Webflow = un fichier HTML du ZIP.

1

Créez une page Webflow par fichier

Exemple :

  • index.html → page Accueil (slug /)
  • about.html → /about
  • contact.html → /contact
2

Alignez les slugs

Dans Page Settings, donnez à chaque page le même chemin que les liens du HTML Rebuildy, sinon la navigation interne cassera.

3

Vérifiez les liens

Remplacez les .html dans les href si Webflow utilise des slugs sans extension (/contact au lieu de contact.html).

📚 Ressources utiles

Embed Webflow
Ajouter du HTML personnalisé dans le Designer
Custom Code
Head et Footer du projet Webflow

Besoin d'aide supplémentaire ?

Notre équipe est là pour vous accompagner dans l'installation et l'utilisation de Rebuildy.

Contacter le supportCréer un site maintenant