So gestalten Sie eine WordPress-Website neu (ohne Ausfallzeit)

Sieht Ihre Website noch so aus wie vor ein paar Jahren? Eine Website kann schnell veraltet wirken, und Sie stellen vielleicht fest, dass sie die Aufmerksamkeit der Besucher nicht mehr so fesselt wie früher.

Es geht nicht nur darum, ein neues Aussehen zu wollen; Sie möchten, dass Ihre Website ein leistungsstarkes Werkzeug ist, das Ihr Geschäft vorantreibt.

Ein Redesign ist ein strategischer Schritt, um Ihre Online-Präsenz aufzufrischen und sicherzustellen, dass Ihre WordPress-Site für Sie am härtesten arbeitet.

Wenn es richtig gemacht wird, kann ein Redesign Engagement, Konversionen und Markenbekanntheit steigern. Aber wie macht man das?

In diesem Tutorial zeige ich Ihnen, wie Sie Ihre WordPress-Website neu gestalten!

Hier sind die wichtigsten Erkenntnisse:

• Verwenden Sie Staging-Sites für Redesigns ohne Ausfallzeiten: Arbeiten Sie privat an Ihrem Redesign, während Ihre Live-Site online bleibt
• Duplicator Pros Ein-Klick-Staging vereinfacht den gesamten Prozess: Erstellen Sie eine Staging-Site direkt von Ihrem Dashboard aus jedem vollständigen Website-Backup
• Legen Sie zuerst Leistungskennzahlen fest: Verfolgen Sie aktuelle Metriken mit MonsterInsights und der Google Search Console, um den Erfolg des Redesigns zu messen
• Erstellen Sie immer Katastrophenwiederherstellungspunkte: Sichern Sie Ihre ursprüngliche Website, bevor Sie live gehen, um bei Bedarf sofortige Rollbacks zu ermöglichen
• Vollständige Post-Launch-Audits sind unerlässlich: Überprüfen Sie nach dem Redesign defekte Links, 301-Weiterleitungen, Core Web Vitals, SEO-Probleme und Funktionsprobleme

Kurze Zusammenfassung: So gestalten Sie eine WordPress-Site neu

Inhaltsverzeichnis

Warum Ihre WordPress-Site neu gestalten?

Sie schieben das Redesign Ihrer Website vielleicht auf, weil Sie befürchten, dass es zu viel Zeit in Anspruch nimmt oder Ihre Website in den Wartungsmodus versetzt. Hier sind jedoch einige Situationen, in denen ein Redesign nützlich wäre.

• Veraltetes Design

Wenn Ihre Website veraltet aussieht, moderne Funktionen fehlen oder sie aktuellen Designstandards nicht entspricht, ist es möglicherweise Zeit für ein Redesign.

Ein aktualisiertes Website-Design kann das Erlebnis Ihrer Besucher verbessern und Ihre Website ansprechender und professioneller machen.

• Schlechte Benutzererfahrung

Wenn Benutzer Schwierigkeiten haben, Ihre Website zu navigieren, oder langsame Seitenladezeiten erleben, kann dies zu einer hohen Absprungrate und geringeren Konversionen führen.

Die Neugestaltung Ihrer WordPress-Site mit Schwerpunkt auf Benutzererfahrung (UX) kann helfen, diese Probleme zu lösen und Ihr Publikum zu fesseln.

• Nicht responsiv oder nicht mobilfreundlich

Viele Menschen nutzen ihre Mobilgeräte, um im Internet zu surfen. Das bedeutet, dass es wichtig ist, eine responsive Website zu haben, die sich an verschiedene Bildschirmgrößen anpasst.

Wenn Ihre aktuelle Website nicht mobilfreundlich ist oder keine Reaktionsfähigkeit aufweist, ist es möglicherweise Zeit, sie neu zu gestalten, um die Zugänglichkeit zu maximieren.

• Änderungen am Branding oder an der Botschaft

Wenn Ihr Unternehmen signifikante Änderungen erfahren hat oder Sie Ihre Botschaft überarbeiten möchten, kann ein Website-Redesign Ihnen eine neue Markenidentität verleihen. Diese Konsistenz in Branding und Botschaft stärkt Ihr Gesamtbild und hilft Ihnen, Ihre Zielgruppe zu erreichen.

• Suchmaschinenoptimierung (SEO) Verbesserungen

Suchmaschinen aktualisieren ihre Algorithmen häufig und SEO-Best-Practices ändern sich im Laufe der Zeit. Ein Website-Redesign bietet die Möglichkeit, Ihre Seitenstruktur zu optimieren, die Ladezeit von Seiten zu verbessern und SEO-freundliche Elemente zu implementieren, um Ihren organischen Traffic zu erhöhen.

• Neue Funktionen

Wenn sich Ihr Unternehmen weiterentwickelt, müssen Sie möglicherweise einen E-Commerce-Shop, einen Blog oder Social-Media-Feeds zu Ihrer Website hinzufügen. Mit einem Redesign können Sie diese neuen Funktionen nahtlos integrieren und sicherstellen, dass sie mit Ihrem Gesamtdesign und Benutzererlebnis übereinstimmen.

Was Sie tun sollten, bevor Sie Ihre WordPress-Website neu gestalten

Später zeigen wir Ihnen, wie Sie Ihre WordPress-Website komplett neu gestalten. Es gibt jedoch ein paar Schritte, die Sie vorher unternehmen sollten.

Bewerten Sie Ihr aktuelles Design

Bevor Sie Ihre Website neu gestalten, sollten Sie ihr aktuelles Design berücksichtigen. Sie sollten sich ihrer guten Funktionen bewusst sein und auch dessen, was Sie verbessern möchten.

Stellen Sie sicher, dass Sie notieren, was Ihnen an Ihrer ursprünglichen Website gefällt. Während des Redesigns möchten Sie diese Funktionen und Eigenschaften beibehalten.

Es ist jedoch wichtig, die Schwachstellen für ein gutes Redesign zu berücksichtigen. Durch die Behebung schlechter Layouts und Farbpaletten erhalten Sie eine Website, die gut funktioniert und ansprechend aussieht.

Überprüfen Sie Ihre aktuellen Benchmarks

Um zu sehen, ob ein Redesign effektiv war, müssen Sie Ihre aktuellen Website-Statistiken kennen.

Sie können Ihre aktuellen Benchmarks ganz einfach überprüfen, indem Sie MonsterInsights installieren. Dies ist ein Plugin, das Google Analytics mit Ihrem WordPress-Backend verbindet und alle Ihre Leistungsdaten an einem Ort zusammenfasst.

Sobald Sie MonsterInsights zu Ihrer Website hinzugefügt haben, finden Sie den Bericht Top-Beiträge/Seiten. Hier sehen Sie, wie viele Besucher Sie erhalten:

Wenn Sie Daten aus MonsterInsights speichern möchten, klicken Sie auf die Schaltfläche PDF-Bericht exportieren. Dies lädt eine Zip-Datei mit Ihren Seitenaufrufen, Benutzersitzungen, Absprungrate und mehr herunter:

Möchten Sie sehen, was MonsterInsights noch kann? Lesen Sie unsere vollständige Rezension!

Sie sollten auch Ihre Core Web Vitals-Werte aus der Google Search Console abrufen. Gehen Sie zu Erlebnis » Core Web Vitals und exportieren Sie Ihre Berichte für Mobilgeräte und Desktops.

Dies sind die Leistungskennzahlen, mit denen Google die Benutzererfahrung bewertet. Es lohnt sich, diese vor und nach einem Redesign zu verfolgen, um sicherzustellen, dass Sie Ihre Suchleistung verbessert (nicht verschlechtert) haben.

Indem Sie diese Statistiken speichern, können Sie leicht erkennen, ob sich Ihr Redesign gelohnt hat. Sie können die Analysen vor und nach der Veröffentlichung des neuen Designs vergleichen.

Haben Sie Ziele für das Redesign

Sobald Sie Ihre Leistungs-Benchmarks kennen, können Sie Ziele für das Redesign festlegen.

Mit einem guten Redesign können Sie:

• Ladezeit beschleunigen
• Konversionsraten erhöhen
• Absprungrate reduzieren
• Durchschnittliche Verweildauer auf der Seite erhöhen
• Benutzererlebnis verbessern
• Und mehr!

Sie könnten auch ein Rebranding mit neuen Farben, Logos oder Layouts ausprobieren. Stellen Sie sicher, dass Sie Ihre Leistungs-Benchmarks vor und nach dem Redesign aufzeichnen. Diese Metriken helfen Ihnen zu entscheiden, ob das Redesign erfolgreich war oder nicht.

Legen Sie ein Budget fest

Schließlich müssen Sie entscheiden, wie hoch Ihr Budget für das Projekt sein wird. Einige grundlegende Kosten für ein Redesign umfassen den Kauf eines neuen Themes oder die Beauftragung eines professionellen Webdesigners.

Wenn Sie Geld für andere Bereiche Ihres Unternehmens sparen möchten, empfehlen wir Ihnen, Ihr Redesign selbst durchzuführen. Mit einem guten Theme Builder benötigen Sie keine Programmierkenntnisse, um Ihre neue Website zu erstellen.

So gestalten Sie eine WordPress-Website neu

Sobald Sie sich entscheiden, das Design Ihrer Website zu verbessern, wissen Sie vielleicht nicht, wie Sie vorgehen sollen. Keine Sorge, ich führe Sie Schritt für Schritt durch!

• Schritt 1: Duplicator Pro installieren: Ein Backup- und Migrations-Plugin erleichtert die Migration Ihrer Website in einen Staging-Bereich für das Redesign.
• Schritt 2: Eine Kopie Ihrer Live-Website erstellen: Erstellen Sie ein vollständiges Backup Ihrer aktuellen Website und laden Sie es herunter.
• Schritt 3: Erstellen Sie eine Staging-Site: Verwenden Sie Duplicator, um Ihr Live-Site-Backup sofort in eine Staging-Site umzuwandeln
• Schritt 4: Erstellen Sie Ihr neues Design: Verwenden Sie SeedProd oder andere Design-Tools, um Ihre neu gestaltete Website zu erstellen
• Schritt 5: Starten Sie Ihre neue Website: Erstellen Sie Notfallwiederherstellungspunkte und migrieren Sie dann Ihr abgeschlossenes Redesign auf den Live-Server
• Schritt 6: Überprüfen Sie Ihre neu gestaltete Website: Prüfen Sie auf Fehler, defekte Links, SEO-Probleme und die allgemeine Funktionalität

Schritt 1: Duplicator Pro installieren

Wenn Sie ein Redesign in Erwägung ziehen, möchten Sie keine komplett neue WordPress-Installation von Grund auf neu erstellen. Selbst wenn Sie Ihre gesamte Website überarbeiten, ist es wichtig, alle Ihre Beiträge, Seiten, Plugins und andere wichtige Details beizubehalten.

Um Datenverlust zu vermeiden, empfehle ich, eine Kopie Ihrer Live-Website zu erstellen und sie auf eine Staging-Site zu verschieben. Hier können Sie ein neues Design erstellen, ohne Ihre Live-Benutzer zu beeinträchtigen.

Das beste Werkzeug für diese Aufgabe ist Duplicator. Dieses WordPress-Plugin ist ein Kraftpaket für Backups, Migrationen und Klonen. Es lädt Ihre gesamte Website als einzelne Zip-Datei herunter, sodass Sie sie einfach verschieben können.

Sind Sie sich nicht sicher, ob Sie Duplicator während des Redesign-Prozesses benötigen? Sehen Sie, wie Rock Lobster Webdesign die Designeffizienz mit Duplicator steigert!

Wählen Sie zunächst ein Abonnement für Duplicator Pro. Es gibt eine kostenlose Version, aber Duplicator Pro bietet Drag-and-Drop-Migrationen. Dies kann Ihnen helfen, Ihr Redesign im Handumdrehen einzurichten.

Nachdem Sie Ihren Kauf abgeschlossen haben, kopieren Sie Ihren Lizenzschlüssel. Öffnen Sie dann das Dashboard Ihrer Live-WordPress-Site und installieren Sie Duplicator.

Gehen Sie als Nächstes zu Duplicator Pro » Einstellungen » Allgemein.

Fügen Sie Ihren Lizenzschlüssel ein und klicken Sie auf die Schaltfläche Aktivieren. Jetzt können Sie mit dem Redesign-Prozess beginnen!

Schritt 2: Erstellen Sie eine Kopie Ihrer Live-Website

Für den nächsten Schritt müssen Sie eine Kopie (oder ein Backup) Ihrer Website erstellen. Manuelle Backups können mühsam sein, aber Duplicator macht es auch für Anfänger einfach.

Duplicator sichert alle Ihre WordPress-Dateien, Themes, Plugins und Datenbanktabellen in einer Zip-Datei. Sobald Sie ein Backup erstellen, können Sie es problemlos auf einen völlig neuen Server verschieben.

Gehen Sie zunächst zu Backups » Neu hinzufügen.

Sie können dynamische Tags verwenden, um das Backup zu benennen. Wählen Sie unter Speicher die Option Lokal.

Bei der Neugestaltung möchten Sie möglicherweise bestimmte Teile Ihrer Website löschen. In diesem Fall können Sie die Archivdatei anpassen. Erweitern Sie einfach den Abschnitt Backup und deaktivieren Sie alle Komponenten, die Sie nicht einschließen möchten.

Um Ihre gesamte Website zu sichern, nehmen Sie keine Änderungen vor. Klicken Sie dann auf Weiter. 

Duplicator führt einen vollständigen Scan Ihrer Live-Website durch. Überprüfen Sie unbedingt alle Hinweise, bevor Sie das Backup erstellen.

Nachdem Ihr Backup erstellt wurde, können Sie es herunterladen.

Wenn Sie eine lokale Staging-Umgebung wie LocalWP verwenden möchten, installiert diese Software oft WordPress für Sie. In diesem Fall müssen Sie nur die Archivdatei herunterladen.

Wenn Sie Ihr Backup jedoch direkt mit einem FTP-Client oder cPanel auf einen Server hochladen, stellen Sie sicher, dass Sie auch das installer.php-Skript speichern. 

Schritt 3: Erstellen Sie eine Staging-Site

Bei der Vorbereitung auf eine große Aufgabe wie eine Neugestaltung ist eine Staging-Website wichtig. Dies ist eine geklonte Version Ihrer Website, mit der Sie Änderungen testen können, ohne die Funktionalität oder das Erscheinungsbild Ihrer Live-Website zu beeinträchtigen. 

Wenn Sie Ihre Live-Website neu gestalten, könnten Sie versehentlich Fehler an Ihr Publikum weitergeben.

Mit einer Staging-Website haben Sie einen sicheren und kontrollierten Bereich, um sicherzustellen, dass alles korrekt funktioniert, bevor Sie live gehen. Außerdem müssen Sie Ihre bestehende Website nicht in den Wartungsmodus versetzen, während Sie sie neu gestalten. 

Die Einrichtung einer Staging-Umgebung war früher der frustrierendste Teil eines Redesigns. Sie mussten entweder die Staging-Tools Ihres Hostinganbieters herausfinden, eine lokale Entwicklungsumgebung wie LocalWP konfigurieren oder Dateien manuell auf eine Subdomain kopieren.

Duplicator Pro eliminiert all das. Mit Ein-Klick-Staging können Sie direkt von Ihrem WordPress-Dashboard aus eine Staging-Site erstellen.

Gehen Sie zu Duplicator Pro » Staging und erstellen Sie Ihre erste Staging-Site.

Wählen Sie das Backup, das Sie im vorherigen Schritt erstellt haben. Geben Sie der Site einen Titel und ein benutzerdefiniertes Admin-Farbschema, damit Sie leicht erkennen können, dass Sie Ihre Staging-Site und nicht die Live-Site bearbeiten.

Sobald die Klonung abgeschlossen ist, melden Sie sich im Admin-Dashboard Ihrer Staging-Site an. Alles sieht aus und funktioniert genau wie auf Ihrer Live-Site. Ihre Zielgruppe sieht nichts.

Wenn Sie ein Entwickler sind, der es vorzieht, lokal zu arbeiten, ist LocalWP immer noch eine gute Option. Laden Sie die Version herunter, die zu Ihrem Betriebssystem passt, fügen Sie eine neue Site hinzu und importieren Sie ein Duplicator-Backup. Aber für die meisten Website-Besitzer ist Ein-Klick-Staging der schnellere Weg.

Schritt 4: Erstellen Sie Ihr neues Design

Jetzt, da Sie eine Staging-Website haben, können Sie eine vollständige Neugestaltung vornehmen, während Ihre ursprüngliche Website noch online ist.

Obwohl Sie Ihre Website mit den integrierten WordPress-Editoren gestalten könnten, sind diese nicht sehr benutzerfreundlich oder flexibel. 

Um jeden Website-Typ einfach zu gestalten, empfehle ich die Verwendung von SeedProd. SeedProd ist der beste Website-Builder, da er über Drag-and-Drop-Bearbeitung, über 150 Landingpage-Vorlagen und sogar vorgefertigte Website-Themes verfügt.

Obwohl SeedProd als Landingpage-Builder begann, hat es sich weiterentwickelt, um jeden Teil Ihrer Website anzupassen. Mit seinem Theme Builder können Sie ganz einfach neue Seiten, Header, Footer und mehr gestalten.

Um all diese Funktionen zu nutzen, installieren und aktivieren Sie SeedProd auf Ihrer lokalen WordPress-Website. Gehen Sie dann zu SeedProd » Theme Builder » Theme Template Kits.

Dies gibt Ihnen viele verschiedene vorgefertigte Theme-Kits zur Auswahl. Anstatt jede Seitenvorlage manuell von Grund auf neu zu codieren, kann SeedProd den Designprozess beschleunigen.

Sie finden Websites für Portfolios, Online-Unternehmen, Blogs und vieles mehr.

Sobald Sie ein neues Theme ausgewählt haben, haben Sie Vorlagen für Ihre Homepage, Beiträge, Header und Footer. Um eines davon zu bearbeiten, klicken Sie auf Design bearbeiten.

Sie können dann den SeedProd-Seiteneditor verwenden, um Ihr Theme vollständig anzupassen. Ziehen Sie per Drag & Drop neue Blöcke auf die Seite, bearbeiten Sie Schriftarten, aktualisieren Sie Standardfarben und nehmen Sie alle anderen Änderungen vor.

Speichern Sie Ihre Änderungen, wenn Sie fertig sind. Veröffentlichen Sie dann jede Theme-Vorlage. Aktivieren Sie oben auf der Seite das neue SeedProd-Theme.

Wenn Sie eine ausführlichere Anleitung zum Erstellen einer Website mit SeedProd wünschen, lesen Sie diesen Beitrag darüber, wie Sie ein benutzerdefiniertes WordPress-Theme ohne Code erstellen. 

Schritt 5: Starten Sie Ihre neue Website

Sobald Sie Ihre neue Website vollständig neu gestaltet haben, ist es an der Zeit, Ihre Änderungen zu veröffentlichen!

Mit Duplicator müssen Sie lediglich ein Backup der Staging-Website erstellen. Laden Sie dann die Archivdatei des Backups herunter.

Bevor Sie dies auf Ihrer Live-Website importieren, sollten Sie einen Disaster-Recovery-Punkt festlegen. Im Grunde speichert dies ein Backup Ihrer Website direkt bevor Sie das Design aktualisiert haben. Wenn Sie kritische Fehler bemerken, die Sie während der Entwicklung übersehen haben, können Sie einfach zu diesem Backup zurückkehren.

Erstellen Sie dazu ein Backup Ihrer ursprünglichen Website. Stellen Sie sicher, dass Sie Lokal als Speicherort auswählen.

Fahren Sie mit der Erstellung des Backups fort. Klicken Sie nach Abschluss auf das blaue Haus-Symbol.

Klicken Sie auf Disaster Recovery festlegen.

Kopieren Sie zu diesem Zeitpunkt entweder den Wiederherstellungslink oder laden Sie die Launcher-Datei herunter. Wenn Sie diese an einem sicheren Ort speichern, können Sie sie verwenden, um Ihre Website sofort wiederherzustellen.

Jetzt ist es an der Zeit, Ihr Redesign zu importieren. Gehen Sie dazu auf die Seite Backups importieren und laden Sie die Zip-Datei Ihrer Staging-Site hoch. Duplicator führt Sie durch den Import Ihres Backups in die Website. 

Weitere Details finden Sie in unserem Tutorial So verschieben Sie eine lokale WordPress-Site auf einen Live-Server.

Schritt 6: Überprüfen Sie Ihre neu gestaltete Website

Selbst wenn Sie Ihre Staging-Site auf Fehler überprüft haben, könnten Sie etwas übersehen. Nachdem Sie Ihr Redesign live geschaltet haben, ist es wichtig, Ihre Website gründlich zu überprüfen, um sicherzustellen, dass sie gut aussieht und richtig funktioniert.

Um sicherzustellen, dass Ihre Suchmaschinenoptimierung (SEO) stimmt, sollten Sie eine vollständige SEO-Prüfung durchführen. All-in-One SEO ist das beste SEO-Plugin dafür, da es Ihnen eine anfängerfreundliche Liste von SEO-Vorschlägen für Ihre Website gibt.

Ich würde auch empfehlen, ein Support-Ticket-Formular zu erstellen. Auf diese Weise kann Ihr Publikum Fehler oder 404-Fehler melden, die ihre Erfahrung auf Ihrer Website beeinträchtigen.

Mit einem Plugin wie WPForms können Sie mit einer Support-Ticket-Vorlage beginnen und das Kontaktformular bearbeiten, um Ihre spezifischen Bedürfnisse zu erfüllen.

Hier sind einige weitere Aufgaben, die Sie direkt nach einem Redesign durchführen sollten:

• Prüfen Sie auf defekte Links und fügen Sie bei Bedarf Weiterleitungen hinzu
• Überprüfen Sie erneut Ihre leistungsstärksten Webseiten und Beiträge
• Stellen Sie sicher, dass Titel, Überschriften und Meta-Beschreibungen vor und nach der Migration konsistent geblieben sind
• Testen Sie die Ladezeit Ihrer Seiten
• Löschen Sie Plugins, die nicht aktiv genutzt werden
• Überprüfen Sie Ihre XML-Sitemap und beheben Sie Fehler
• Überprüfen Sie Ihre Website anhand grundlegender WCAG 2.2-Barrierefreiheitsstandards
• Vergleichen Sie Ihre Core Web Vitals-Scores mit den Benchmarks, die Sie vor dem Redesign gespeichert haben. Achten Sie genau auf LCP (Ladegeschwindigkeit), INP (Interaktivität) und CLS (Layoutverschiebungen).
• Testen Sie Ihr Redesign für verschiedene Browser

Danach haben Sie ein wunderschönes Redesign, das neue Besucher anzieht und sie immer wieder auf Ihre Website zurückkehren lässt! 

Häufig gestellte Fragen (FAQs)

Es ist Zeit, mit dem Redesign auf Ihrer Live-Website aufzuhören

Die meisten WordPress-Website-Besitzer überspringen den Staging-Schritt, weil es sich früher wie zusätzliche Arbeit anfühlte. Das Einrichten von LocalWP, die Konfiguration eines Subdomains und die manuelle Übertragung von Dateien waren genug Hürden, um das Überspringen als vernünftig erscheinen zu lassen.

Diese Ausrede gibt es nicht mehr. Das One-Click-Staging von Duplicator Pro verwandelt eine früher 30-minütige Einrichtung in einen einzigen Knopfdruck. Ihre Live-Website bleibt online, Ihre Besucher sehen nichts, und Sie erhalten eine private Umgebung, um Dinge ohne Konsequenzen kaputt zu machen.

Die SEO-Seite eines Redesigns erfordert auch nach dem Start noch Aufmerksamkeit. Ein schönes neues Design, das Ihre Top-Performing-URLs zerstört oder Ihre Core Web Vitals-Scores verschlechtert, kann in den Suchrankings erheblichen Schaden anrichten, bevor Sie es bemerken. Führen Sie eine Überprüfung durch, bevor Sie das Projekt als abgeschlossen betrachten.

Sie müssen nicht viel Zeit damit verbringen, Ihre Website manuell in und aus einem Staging-Bereich zu verschieben. Probieren Sie das One-Click-Staging von Duplicator Pro aus jedem vollständigen Website-Backup aus!

Während Sie hier sind, könnten Ihnen diese WordPress-Tutorials und Plugin-Bewertungen gefallen:

• 15 beste WordPress-Themes zum Erstellen einer beeindruckenden Website
• So bereinigen Sie eine WordPress-Website (11 Expertentipps)
• So ändern Sie Ihr WordPress-Theme
• So erstellen Sie ein Cloud-WordPress-Backup
• 9 beste Plugins zum Klonen einer WordPress-Site
• So optimieren Sie Ihre WordPress-Datenbank