Webflow ist eine benutzerfreundliche Plattform, mit der du professionelle Webseiten mit einem intuitiven visuellen Editor erstellen kannst. Wenn du deine Webseite jedoch schon eine Weile hast, bist du vielleicht auf der Suche nach einer flexibleren und fortschrittlicheren Lösung, wie zum Beispiel WordPress.

Die Umstellung von Webflow auf WordPress kann sich wie eine gewaltige Aufgabe anfühlen, vor allem, wenn deine Webseite viele Inhalte enthält. Der Prozess ist jedoch einfacher, als du vielleicht denkst, und du kannst deine neue WordPress-Webseite in kürzester Zeit zum Laufen bringen.

In diesem Beitrag gehen wir zunächst kurz auf die Gründe ein, warum du von Webflow zu WordPress wechseln solltest. Anschließend führen wir dich durch den gesamten Migrationsprozess.

Los geht’s!

Warum du einen Wechsel von Webflow zu WordPress in Betracht ziehen solltest

Wie die meisten All-in-One-Webseiten-Lösungen ermöglicht es dir Webflow, eine Webseite ohne viel Aufwand zu erstellen und zu starten. Es dient sowohl als Webseiten-Ersteller als auch als Hosting-Anbieter. Das klingt zwar sehr praktisch, kann sich aber auch ein wenig einschränkend anfühlen. Da jeder Aspekt deiner Webseite von demselben Dienst verwaltet wird, kann es sein, dass du dich beim Hinzufügen neuer Funktionen oder beim Optimieren deiner Inhalte eingeschränkt fühlst.

Ein Open-Source Content Management System (CMS) wie WordPress gibt dir mehr Freiheit bei der Anpassung. Webflow verfügt zwar über eine breite Palette an Apps und Widgets, ist aber nicht mit der Fülle an Plugins vergleichbar, die WordPress zu bieten hat.

Mit WordPress hast du auch die Kontrolle über dein Webhosting und dein Budget. Du kannst dich umsehen und die richtige Lösung für deine Webseite wählen. Außerdem ist die WordPress-Software kostenlos, ebenso wie die meisten der verfügbaren Plugins. Die Umstellung von Webflow auf WordPress kann dir also helfen, die Kosten für deine Webseite zu senken.

Was du vor der Migration von Webflow zu WordPress beachten solltest

Egal, ob du einen Blog oder ein E-Commerce-Shop betreibst, die Migration einer Webseite kann wie eine schwierige und zeitraubende Aufgabe erscheinen. Der Prozess dauert aber gar nicht so lange. Außerdem ist es möglich, die Migration selbst durchzuführen, wenn du Zugang zu den richtigen Tools hast.

Bevor du jedoch loslegst, musst du einige Dinge erledigen. Sehen wir uns einige wichtige Vorbereitungen für die Migration von Webflow zu WordPress an.

Einen WordPress-Webhoster finden

Wie wir bereits erwähnt haben, ist eines der besten Dinge bei der Nutzung von WordPress die freie Wahl des Webhosters. So kannst du einen Dienst auswählen, der sowohl deinen Bedürfnissen als auch deinem Budget entspricht.

Auch wenn es verlockend ist, sich für einen billigen Webhosting-Dienst zu entscheiden, solltest du in Erwägung ziehen, ein Managed WordPress Hosting für deine Webseite zu nutzen. Dieser Service ist normalerweise teurer als andere Optionen. Allerdings kannst du damit die Leistung deiner Webseite steigern und deine Inhalte schützen.

Bei Kinsta bieten wir eine Reihe von Hosting-Angeboten für unterschiedliche Budgets an. Unser verwalteter WordPress-Hosting-Service bietet eine Vielzahl von Funktionen, darunter:

  • Schnelle und einfache WordPress-Installation
  • Automatische tägliche Backups
  • Entfernung von Hacks und Malware
  • 24/7-Support
  • Kostenlose SSL-Zertifikate

Wir bieten außerdem unbegrenzte kostenlose Migrationen von allen Webhostern an, damit dein Umzug stressfrei verläuft. Außerdem kannst du unser benutzerfreundliches Entwicklungstool DevKinsta nutzen, um deine erste WordPress-Webseite zu gestalten.

Im Idealfall hast du dein neues Hosting-Konto bereits eingerichtet, bevor du mit der Migration beginnst. Diese Vorbereitung hilft dir, den Prozess ein wenig zu beschleunigen.

Sichern deiner Daten

Es ist wichtig zu wissen, dass du deine Inhalte während des Migrationsprozesses nicht von Webflow zu WordPress verschieben wirst. Du lädst lediglich eine Kopie auf deinen Computer herunter und lädst sie dann in WordPress hoch. Deine Webflow-Webseite bleibt also so, wie sie ist, und du brauchst keine Sicherungskopie deiner Inhalte zu erstellen.

Du kannst aber trotzdem ein Backup erstellen, für den Fall, dass etwas schief geht. Um ein Backup in Webflow zu speichern, musst du nur die Tastenkombination Command + Shift + S (Mac) oder Control + Shift + S (Windows) gedrückt halten:

Speichern eines Backups in Webflow
Speichern eines Backups in Webflow

Webflow fordert dich dann auf, eine Beschreibung für dein Backup einzugeben. Wenn du fertig bist, klicke auf Speichern. Du kannst dann zu Einstellungen > Backups gehen, um sicherzustellen, dass deine letzte Kopie gespeichert wurde.

Wie man von Webflow zu WordPress migriert (in 6 Schritten)

Nachdem du dein Hosting-Konto eingerichtet und ein Backup deiner Daten erstellt hast, ist es an der Zeit, deine Inhalte von Webflow zu WordPress zu übertragen. In diesem Lernprogramm führen wir dich durch den gesamten Migrationsprozess, damit du deine neue Webseite erfolgreich starten kannst.

Schritt 1: WordPress einrichten

Der erste Schritt besteht darin, WordPress einzurichten. Die meisten Webhoster bieten mit ihren Tarifen eine Ein-Klick-WordPress-Installation an, auf die du über dein Hosting-Konto zugreifen kannst. Diese Funktion wird normalerweise mit einer Anleitung geliefert, die dir hilft, den Prozess in wenigen Minuten abzuschließen.

Alternativ kannst du die Software auch manuell von WordPress.org herunterladen:

WordPress.org Startseite
WordPress.org Startseite

Anschließend musst du deine WordPress-Dateien auf deinen Server hochladen. Dieser Vorgang kann ein paar Minuten dauern. Sobald er abgeschlossen ist, kannst du mit dem Webflow-Export nach WordPress fortfahren.

Schritt 2: Exportiere deine Inhalte aus Webflow

Jetzt, wo du WordPress eingerichtet hast, kannst du die Inhalte für deine neue Webseite vorbereiten. Zum Glück ist es mit Webflow super einfach, deine Daten zu exportieren.

Allerdings kannst du nicht alle Daten exportieren. Zu den Inhalten, die du aus Webflow herunterladen kannst, gehören Webseiten, Blogbeiträge, Texte, eingebettete Blöcke, Galerieseiten und Bilder.

Um deine Inhalte zu exportieren, gehst du zu deinem Webflow-Designer und klickst auf das Panel CMS-Sammlungen. Hier kannst du alle Dateien und Daten auf deinem Webflow-Server sehen:

Bedienfeld "Sammlungen" in Webflow
Bedienfeld „Sammlungen“ in Webflow

Wähle die Sammlung aus, die du herunterladen möchtest (z.B. Blogbeiträge), und klicke auf die Schaltfläche Exportieren am oberen Rand des Bildschirms. Der Inhalt wird als .csv-Datei auf deinen Computer heruntergeladen. Du kannst diesen Vorgang für jede andere Sammlung, die du exportieren möchtest, wiederholen.

Schritt 3: Importiere deine Inhalte in WordPress

Im nächsten Schritt musst du deine Webflow-Inhalte in WordPress hochladen. Das CMS verfügt über ein Import-Tool, mit dem du Dateien im XML-Format hochladen kannst. Leider kannst du mit Webflow Inhalte nur als CSV-Datei herunterladen.

Daher musst du ein Migrations-Plugin verwenden, um CSV-Dateien in WordPress zu importieren. Wir empfehlen WP All Import:

WP All Import
WP All Import

Um das Plugin zu deiner Webseite hinzuzufügen, gehe in deinem WordPress-Dashboard auf Plugins > Neu hinzufügen und suche in der Suchleiste nach dem Tool.

Suche nach WP All Import
Suche nach WP All Import

Klicke dann auf die Schaltfläche Jetzt installieren, gefolgt von Aktivieren. Sobald das Plugin aktiviert ist, navigiere zu All Import > New Import:

WP All Import installieren und aktivieren
WP All Import installieren und aktivieren

Klicke auf die Option Datei hochladen und wähle dann die CSV-Datei aus, die du zuvor heruntergeladen hast. Das Plugin wird dich dann durch den Importprozess leiten.

In diesem Tutorial importieren wir die Blogbeiträge aus Webflow:

Import von Webflow-Blogbeiträgen
Import von Webflow-Blogbeiträgen

Das Plugin fordert dich auf, Elemente per Drag & Drop in die richtigen Felder zu ziehen:

Drag-and-Drop-Schnittstelle in WP All Import
Drag-and-Drop-Schnittstelle in WP All Import

Du musst zum Beispiel den Namen deines Beitrags (von rechts) in das Titelfeld und den Beitragstext in den entsprechenden Bereich ziehen. Außerdem siehst du Optionen zum Hinzufügen von Taxonomien, wie Kategorien und Tags, und zum Konfigurieren anderer Einstellungen, wie dem Beitragsstatus:

Beitragseinstellungen konfigurieren
Beitragseinstellungen konfigurieren

Beachte, dass diese Einstellungen auf jeden Beitrag in deiner Datei angewendet werden. Du musst den Vorgang also nicht für jeden Beitrag wiederholen, den du importiert hast.

Als Nächstes wirst du aufgefordert, einen eindeutigen Bezeichner für die Beiträge in deiner Datei festzulegen. Du kannst auf die Schaltfläche Automatisch erkennen klicken, um eine ID zu erzeugen:

Erstelle deine eindeutige Kennung
Erstelle deine eindeutige Kennung

Zum Schluss musst du auf die Schaltfläche Bestätigen & Import ausführen klicken, um den Vorgang abzuschließen:

Bestätigen und Ausführen
Bestätigen und Ausführen

Das Plugin teilt dir mit, wenn der Importvorgang abgeschlossen ist:

Meldung zum Abschluss des Imports in WP All Import
Meldung zum Abschluss des Imports in WP All Import

Sobald der Import abgeschlossen ist, kannst du deine Inhalte überprüfen, indem du in deinem Dashboard zu Posts oder Pages navigierst. Du musst den Importvorgang auch für alle anderen Webflow-Dateien wiederholen, die du heruntergeladen hast.

Beachte, dass WordPress den automatischen Import von Bildern von anderen Plattformen wie Webflow nicht unterstützt. Daher musst du deine Grafiken manuell einfügen oder ein Plugin wie Auto Upload Images verwenden.

Auto Upload Images
Auto Upload Images

Dieses Plugin sucht nach Bild-URLs in deinen Beiträgen und Seiten. Es lädt dann diese Grafiken herunter und lädt sie in WordPress hoch, wobei es die URLs ersetzt.

Schritt 4: Wähle ein WordPress-Theme

Leider kannst du das Design deiner Webflow-Seite nicht auf WordPress übertragen. Das beliebte CMS bietet jedoch Tausende von schönen Themes, aus denen du wählen kannst.

Wähle ein WordPress-Theme
Wähle ein WordPress-Theme

WordPress-Themes sind anpassbar, du kannst sie also nach deinen Bedürfnissen verändern. Außerdem sind die meisten von ihnen kostenlos, obwohl einige kostenpflichtige Themes auch recht erschwinglich sein können.

Wir empfehlen dir, etwas Zeit in die Anpassung deines WordPress-Themes zu investieren und verschiedene Optionen auszuprobieren. Auf jeden Fall solltest du dich für ein responsives Design entscheiden, denn so kannst du sicherstellen, dass deine Inhalte auf allen Geräten gut aussehen.

Schritt 5: Konfiguriere deine WordPress Permalinks

Als Nächstes musst du deine WordPress-Permalinks konfigurieren. Sie definieren die Struktur der URL deiner Webseite.

Um auf deine Permalinks zuzugreifen, gehe in deinem WordPress-Dashboard auf Einstellungen > Permalinks:

Permalink-Einstellungen in WordPress
Permalink-Einstellungen in WordPress

Wie du sehen kannst, hast du mehrere Optionen. Wir empfehlen dir, Postname zu wählen. Auf diese Weise setzen sich deine URLs aus deinem Domainnamen und dem Slug zusammen, den du für die jeweilige Seite oder den Beitrag festgelegt hast. Kurze und saubere URLs können sich positiv auf die Suchmaschinenoptimierung (SEO) deiner Seite auswirken.

Wenn du fertig bist, klicke auf Änderungen speichern. Jetzt kannst du mit dem letzten Schritt fortfahren.

Schritt 6: Verweise deine Domain auf WordPress

Auch wenn du deine Webseite in WordPress importiert hast, zeigt deine Domain (z.B. mysite.com) immer noch auf die Nameserver von Webflow. Wenn du dieselbe Domain behalten willst, musst du deine DNS-Einstellungen aktualisieren, damit deine Domain auf die Server deines neuen Webhosters zeigt.

Die Nameserver deines Hosts findest du in deinem Hosting-Konto. Sie sehen in der Regel wie folgt aus:

  • ns1.deinwebhost.de
  • ns2.deinwebhost.de
  • ns3.deinwebhost.de

Wenn du einen Domain-Registrar benutzt hast, als du deine Webflow-Webseite erstellt hast, musst du dich in dein Konto einloggen, um die DNS-Einstellungen zu verwalten. Dein neuer Webhoster lässt dich deine Domain vielleicht sogar über sein Kontrollpanel verwalten. Wenn du Kinsta-Kunde bist, kannst du deine Domain über MyKinsta auf deine neue Webseite verweisen.

Wenn Besucher/innen nun deine URL in Google eingeben, werden sie zu deiner neuen Webseite weitergeleitet. Wir empfehlen dir, diesen Schritt abzuschließen, sobald deine WordPress-Webseite online gehen kann.

Zusammenfassung

Webflow ist ein All-in-One-Webseiten-Builder, der es dir leicht macht, deine Webseite zu erstellen und zu verwalten. Wenn deine Webseite jedoch wächst, musst du vielleicht auf eine flexiblere und leistungsfähigere Plattform wie WordPress umsteigen.

Wie wir gesehen haben, kann die Migration von Webflow zu WordPress ein reibungsloser Prozess sein. Allerdings ist es wichtig, dass du den richtigen Hosting-Anbieter für deine neue Webseite auswählst. Außerdem musst du ein responsives WordPress-Theme auswählen, deine Permalinks optimieren und deine Domain-Einstellungen aktualisieren, damit die Nutzer/innen auf deine neue Webseite weitergeleitet werden.

Hast du noch Fragen zur Migration von Webflow zu WordPress? Lass es uns in den Kommentaren unten wissen!

Matteo Duò Kinsta

Chefredakteur bei Kinsta und Content Marketing Berater für WordPress Plugin-Entwickler. Verbinde dich mit Matteo auf Twitter.