Kostenlos starten
Dokumentationsmenü

Eine ZIP- / HTML-Website konvertieren

Schritt für Schritt: Verwandle ein ZIP mit HTML, CSS und Bildern in WordPress-Seiten – mit einem Free-Konto und mit einem Bezahl-Konto.

Das ist der vollständigste Weg: Tapeto konvertiert alle Seiten des ZIPs, behält die Links dazwischen bei und kann die ganze Website veröffentlichen. Er steht in allen Tarifen zur Verfügung, auch in Free. Ein als HTML exportiertes Figma- oder Penpot-Design funktioniert hier ebenfalls.

Bevor du beginnst

  • Ein .zip mit bis zu 5–200 MB (je nach Tarif) (eine einzelne .html-Datei geht auch).
  • Darin: eine .html-Datei pro Seite, deine .css-Dateien, Bilder und SVGs. Jede .html wird zu einer WordPress-Seite.
  • Deine eigene WordPress-Website, falls du veröffentlichen willst: HTTPS, Permalinks „Beitragsname“ (Einstellungen → Permalinks) und für Gutenberg ein Block-Theme wie Twenty Twenty-Five.

Schritt 1 — ZIP vorbereiten

  1. Lege alles in einen Ordner: die Seiten (index.html, ueber-uns.html …), die Stylesheets und einen Ordner images.
  2. Verwende relative Pfade (images/logo.png, ueber-uns.html). Links zwischen Seiten werden in WordPress-Links umgewandelt.
  3. Halte das CSS in .css-Dateien statt in Inline-style-Attributen – so wird es zuverlässiger gelesen.
  4. Markiere den Inhalt des Ordners und komprimiere ihn zu einem .zip.

Was du von den Dateien erwarten kannst

Das HTML wird so analysiert, wie es ausgeliefert wird. Inhalte, die ein Skript erst nach dem Laden der Seite aufbaut (manche Menüs, Slider), werden unter Umständen nicht erfasst. Bilder werden als jpg, png, gif oder webp mit je bis zu 6 MB zu WordPress hochgeladen; als separate Dateien gelieferte SVGs werden nicht hochgeladen, SVG direkt im HTML bleibt aber erhalten.

Schritt 2 — Projekt erstellen

  1. Klicke in der App auf Neues Projekt.
  2. Gib einen Namen ein und bleibe im Tab Datei.
  3. Ziehe das .zip in den Ablagebereich (oder klicke, um es auszuwählen).
  4. Klicke auf Projekt erstellen.
  5. Warte, bis der Projektstatus „verarbeitet“ lautet. Endet er mit „Fehler“, erklärt die Meldung, was zu korrigieren ist.

Schritt 3 — Builder wählen und konvertieren

  1. Öffne das Projekt. Wähle unter Neue Konvertierung den Builder: Gutenberg (alle Tarife) oder Elementor (ab Starter).
  2. Klicke auf Konvertieren. Alle Seiten des Projekts werden konvertiert; schlägt eine fehl, werden die anderen trotzdem abgeschlossen.
  3. Ist die Konvertierung abgeschlossen, öffne sie und prüfe den Fidelity Score und die Vorschau.

Jede Konvertierung gilt für einen Builder. Um dieselbe Website in Gutenberg und in Elementor zu erhalten, starte zwei Konvertierungen für dasselbe Projekt.

Schritt 4 — Das Ergebnis in WordPress übernehmen

Free-Konto (Gutenberg, von Hand)

  1. Öffne auf der Konvertierungsseite den Tab Inhalt und klicke auf Dateien herunterladen (oder Kopieren).
  2. Gehe in WordPress zu Seiten → Neu hinzufügen. Öffne das Drei-Punkte-Menü → Code-Editor und füge den Inhalt ein. Wechsle zurück zum visuellen Editor.
  3. Hat dein Design Header und Footer, öffne den Tab Header / Footer / Sidebar, lade jeden Teil herunter und füge ihn unter Design → Editor (Code-Editor) in den passenden Template-Teil ein.
  4. Kopiere den Inhalt deiner CSS-Datei unter Design → Customizer → Zusätzliches CSS.
  5. Lade deine Bilder in die Mediathek hoch und prüfe, ob sie auf der Seite erscheinen.
  6. Wiederhole das für jede Seite. Der Tab Anleitung zeigt die genauen Schritte für deinen Builder.

Free-Konten können weder WXR exportieren noch In WordPress veröffentlichen nutzen; die Buttons erscheinen gesperrt.

Bezahl-Konto (Starter, Pro, Agency, Studio)

Wähle eine von zwei Möglichkeiten.

Option A — In WordPress veröffentlichen (am schnellsten)

  1. Installiere das Tapeto-Plugin auf deiner Website und kopiere den geheimen Schlüssel – siehe Plugin-Installation.
  2. Gehe in der App zu WP-Verbindungen, füge die URL deiner Website hinzu und füge den Schlüssel ein. Nutze den Test-Button, bis er eine gültige Verbindung meldet.
  3. Öffne die abgeschlossene Konvertierung und klicke auf In WordPress veröffentlichen. Wähle die Website.
  4. Zeigt das Panel dynamische Inhalte aus deinem Design (Blogbeiträge, Produkte, eigene Typen), wähle für jeden echte WordPress-Inhalte oder Design unverändert beibehalten.
  5. Klicke auf Veröffentlichen. Tapeto lädt die Bilder hoch, legt jede Seite als Entwurf an, schreibt die Links zwischen den Seiten um, fügt dein CSS unter Zusätzliches CSS ein und lädt die verwendeten Google Fonts.
  6. Öffne in WordPress Seiten, prüfe die Entwürfe und veröffentliche sie. Um die Startseite als Frontseite zu nutzen: Einstellungen → Lesen → Eine statische Seite.

Option B — WXR exportieren (ohne Plugin)

  1. Klicke auf der Konvertierungsseite auf WXR exportieren.
  2. Gehe in WordPress zu Werkzeuge → Daten importieren → WordPress, lade die Datei hoch und starte den Import.
  3. Prüfe die importierten Seiten, Menüs und Header / Footer.

Bei Agency und Studio enthält das WXR zusätzlich Custom Post Types und Loops. Installiere das CPT-Plugin (von der Konvertierungsseite herunterladen) und aktiviere es vor dem Import des WXR.

Elementor

Die Elementor-Ausgabe erfordert, dass Elementor auf der Zielwebsite aktiv ist (die kostenlose Version genügt). Header und Footer werden in jede Seite eingebettet, da das kostenlose Elementor keine gemeinsamen Theme-Teile hat.

Bekannte Grenzen

  • Formulare sehen gleich aus, senden aber nichts: Verbinde ein Formular-Plugin und ersetze den Block.
  • Das mobile Menü (Hamburger) und JavaScript-Animationen des Originals werden nicht übernommen.
  • Erneutes Veröffentlichen erstellt neue Seiten; bestehende werden nicht überschrieben. Lösche zuerst die alten Entwürfe.
  • Websites, deren Inhalt vollständig von einem JavaScript-Framework erzeugt wird, lassen sich unter Umständen schlechter konvertieren.

Nächster Schritt

Mehr zum Parser in HTML/CSS-Designs konvertieren, oder alle Ausgabeoptionen unter Ergebnisse exportieren.