Eine statische HTML-Website nach WordPress mit Elementor zu migrieren klingt nach viel Arbeit – und wenn man es falsch angeht, ist es das auch. Seite für Seite mit einem Konverter erledigt, ist es überwiegend Routinearbeit. Hier ist das Vorgehen, mit dem der Aufwand überschaubar bleibt und Sie am Ende echte, bearbeitbare Elementor-Seiten haben.
Richten Sie zuerst die WordPress-Seite ein
Bevor Sie irgendetwas konvertieren, bereiten Sie das Ziel vor: eine WordPress-Installation mit aktivem Elementor, Ihre Schriftarten registriert (Website-Einstellungen → Benutzerdefinierte Schriftarten), falls das Original Webfonts verwendet hat, und Ihre Markenfarben als Globale Farben angelegt, wenn die importierten Seiten sie übernehmen sollen. Wenn Sie das zuerst erledigen, beurteilen Sie jede konvertierte Seite anhand der echten Website – nicht anhand von Ersatzschriften und Platzhalterfarben.
Konvertieren Sie eine Seite nach der anderen
Versuchen Sie nicht, die ganze Website in einem Schritt zu importieren. Arbeiten Sie sie Seite für Seite ab – und innerhalb einer langen Seite Abschnitt für Abschnitt. Jede konvertierte Einheit lässt sich leicht prüfen; eine ganze Website auf einmal nicht. Wer in Teilstücken konvertiert, schleppt außerdem nicht Header, Footer und Cookie-Banner der alten Website in jede Seite mit.
Für jede Seite gilt: Öffnen Sie das HTML, stellen Sie sicher, dass das CSS inline oder in einem Style-Block steht, und fügen Sie es im Native-Komponenten-Modus in den Konverter ein. Überschriften, Texte, Bilder, Buttons und Layout werden zu nativen Elementor-Widgets und -Containern, wobei Abstände, Farben und Typografie in echte Einstellungen übertragen werden.
Der schnellste Weg bei vielen Seiten: Stapelkonvertierung
Hat die Website mehr als eine Handvoll Seiten, müssen Sie sie nicht einzeln einspeisen. Legen Sie alle HTML-Dateien auf einmal im Konverter ab – ab zwei Dateien wechselt er in den Stapelmodus. Die Dateien werden nacheinander mit denselben Einstellungen konvertiert, und Sie laden ein einziges ZIP herunter, das pro Seite eine Elementor-JSON-Vorlage enthält.
Auf der WordPress-Seite wird daraus dann eine Import- statt einer Konvertierungssitzung: Vorlagen → Gespeicherte Vorlagen → Importieren, die Vorlagen hochladen und jede Seite aus ihrer Vorlage erstellen. Alles läuft weiterhin in Ihrem Browser – selbst bei einer Website mit dreißig Seiten wird keine einzige Datei irgendwohin hochgeladen.
Zwei ehrliche Grenzen. Der Stapelmodus arbeitet mit automatischer Zuordnung – das Zuordnungspanel für einzelne Elemente und die Kopierwurzel gibt es nur bei einzelnen Dateien –, eine Seite, bei der Sie genau festlegen möchten, was zu was wird, sollten Sie daher anschließend noch einmal einzeln konvertieren. Und weil der Stapelmodus jede Datei genau so konvertiert, wie sie ist, landen der gemeinsame Header und Footer in jeder Vorlage: Entfernen Sie sie entweder aus den HTML-Dateien, bevor Sie diese ablegen, oder löschen Sie die betreffenden Container aus jeder importierten Vorlage. Bei einer Website mit viel gemeinsamem Rahmen ist es tatsächlich schneller, zuerst die Dateien zu kürzen.
Gemeinsamen Header und Footer nur einmal erstellen
Eine statische Website wiederholt Header und Footer in jeder HTML-Datei. In WordPress gehören sie nicht in den Seiteninhalt – Sie wollen sie als Theme-Header und -Footer (oder als Vorlagen im Elementor Theme Builder), die einmal gebaut und überall angewendet werden. Verwenden Sie beim Konvertieren einer Seite daher die Kopierwurzel in der Strukturübersicht, um nur den Hauptinhalt dieser Seite zu erfassen und Header und Footer wegzulassen. Diese bauen Sie separat, ein einziges Mal.
Bilder und Links brauchen Aufmerksamkeit
- Bilder: Laden Sie sie in die Mediathek hoch und verweisen Sie auf die echten URLs – dann werden sie ohne manuellen Schritt importiert. Lokale Dateipfade und Base64-Bilder können nicht zu Anhängen werden und kommen daher als leere Platzhalter an – jeder mit seinem Alt-Text als Beschriftung, damit Sie wissen, was Sie hochladen müssen.
- Interne Links: Eine statische Website verlinkt zwischen
.html-Dateien. Passen Sie diese Links nach dem Import so an, dass sie auf Ihre neuen WordPress-URLs zeigen. Das ist der eine mühsame Teil jeder Migration, und es führt kein Weg daran vorbei – pro Seite ist es aber schnell erledigt. - Formulare und Menüs: Die Absendeaktion eines Formulars wird nicht übernommen – verbinden Sie es mit einem Elementor-Formular auf Ihrer Website. Die Navigation wird zu einem echten WordPress-Menü.
Was gut konvertiert wird und was Sie neu machen
Layout, Abstände, Farben, Typografie, Bilder, Icons und Struktur werden originalgetreu konvertiert. Skripte werden entfernt, daher bauen Sie jedes JavaScript-gesteuerte Verhalten mit nativen Widgets neu. Hover-Zustände und Animationen richten Sie in Elementor neu ein. Wer diese Aufteilung von vornherein kennt, macht aus der Migration eine planbare Checkliste statt einer Reihe von Überraschungen.
Eine bewährte Reihenfolge für die Migration
- Bauen Sie den gemeinsamen Header und Footer einmal.
- Konvertieren Sie die Startseite, dann die wichtigsten Landingpages, dann die Unterseiten.
- Legen Sie für jede Seite eine Kopierwurzel fest, um den Inhalt zu erfassen, fügen Sie ihn ein und korrigieren Sie anschließend interne Links und Bilder.
- Bauen Sie interaktive Elemente (Slider, Tabs) nativ neu.
- Speichern Sie wiederverwendbare Abschnitte – ein Feature-Grid, ein CTA-Band – schon unterwegs in der Vorlagenbibliothek, damit spätere Seiten eher zusammengesetzt als neu gebaut werden.
- Richten Sie Weiterleitungen von den alten
.html-URLs auf die neuen ein, damit Ihre Suchmaschinenplatzierungen erhalten bleiben.
So angegangen, ist der Import einer HTML-Website in Elementor ein gleichmäßiger Prozess Seite für Seite, an dessen Ende eine bearbeitbare WordPress-Website steht – kein Neuaufbau und kein Haufen nicht bearbeitbarer Codeblöcke.