Vorschau Ihrer WordPress-Website, bevor sie live geht

Eine Sache, die wir unseren Lesern sagen, ist: **immer** vor der Veröffentlichung in der Vorschau anzeigen. Im Laufe der Jahre haben wir Tausende von WordPress-Seiten und -Beiträgen erstellt und aktualisiert, und die Vorschau von Inhalten, bevor sie live gehen, ist zu einem wichtigen Bestandteil unseres redaktionellen Prozesses geworden.

Wenn Sie diesen Schritt überspringen, kann dies zu Überraschungen für Ihre Besucher führen – fehlerhafte Layouts, fehlende Bilder oder Tippfehler. Wir haben das selbst erlebt, aber wirklich, diese Probleme sind leicht zu vermeiden.

In diesem Artikel führen wir Sie durch effektive Möglichkeiten, Ihre WordPress-Website in der Vorschau anzuzeigen, bevor sie live geht. So können Sie sicher sein, dass Ihre Website genau so aussieht und funktioniert, wie Sie es möchten. 🧑‍💻

Hier ist eine kurze Übersicht über die Themen, die wir in diesem Leitfaden behandeln werden. Nutzen Sie die untenstehenden Links, um zu bestimmten Abschnitten zu springen:

• WordPress-Website vor dem Start mit dem "Coming Soon"-Modus in der Vorschau anzeigen
• Ermöglichen Sie Kunden die Vorschau der WordPress-Website, bevor sie live geht
• Erstellen Sie eine WordPress-Staging-Website, um Änderungen in der Vorschau anzuzeigen
• WordPress-Beiträge und -Seiten vor der Veröffentlichung in der Vorschau anzeigen
• WordPress-Theme vor dem Wechseln in der Vorschau anzeigen
• Vorschau von WordPress-Theme-Anpassungen
• Vorschau Ihres benutzerdefinierten WordPress-Themes
• WordPress-Landingpages vor dem Start in der Vorschau anzeigen
• Bonustipp 🌟: Designprobleme mit visuellen Regressionstests erkennen

Bereit? Legen wir los.

WordPress-Website vor dem Start mit dem "Coming Soon"-Modus in der Vorschau anzeigen

Wenn Sie eine neue WordPress-Website erstellen, wird immer empfohlen, den „Demnächst verfügbar“-Modus zu aktivieren, während Sie an Ihrer Website arbeiten.

Dies ermöglicht es Ihnen, Besuchern Ihrer Website eine ordnungsgemäße „Coming Soon“-Seite anzuzeigen. Sie können sich weiterhin im WordPress-Adminbereich anmelden und an Ihrer Website arbeiten, aber Ihre Besucher können sie nicht sehen.

Das Beste daran ist, dass Sie Ihre Website in der Vorschau anzeigen und alle notwendigen Tests durchführen können, bevor Sie sie live schalten.

Um dies zu tun, benötigen Sie SeedProd. Es ist der beste WordPress Website Builder auf dem Markt und ermöglicht es Ihnen, ganz einfach eine schöne „Coming Soon“-Seite anzuzeigen.

Einige unserer Partner-Marken nutzen tatsächlich SeedProd, um ihre Websites zu erstellen. Wir haben aus erster Hand gesehen, wie gut es für sie funktioniert hat, und wir haben das Tool viele Male verwendet, als wir Tutorials für unsere Leser geschrieben haben.

Wenn Sie mehr über das Plugin erfahren möchten, lesen Sie unsere ausführliche SeedProd-Bewertung.

Zuerst müssen Sie das SeedProd Plugin installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zum Installieren eines WordPress-Plugins.

Nach der Aktivierung besuchen Sie die Seite SeedProd » Einstellungen, um Ihren Lizenzschlüssel einzugeben. Diese Informationen finden Sie in Ihrem Konto auf der SeedProd-Website.

Gehen Sie als Nächstes zum Bildschirm SeedProd » Landing Pages im WordPress-Adminbereich.

Klicken Sie hier einfach auf die Schaltfläche „Coming Soon-Seite einrichten“.

Danach wird Sie das Plugin auffordern, eine Vorlage für Ihre „Coming Soon“-Seite auszuwählen.

SeedProd bietet mehrere schöne "Coming Soon"-Vorlagen, die professionell gestaltet sind, um die Konversionsrate zu erhöhen.

Nach der Auswahl einer Vorlage öffnet sich die Seiten-Builder-Oberfläche von SeedProd auf dem Bildschirm.

Der Seitenersteller ist ein intuitives Designwerkzeug. Sie können einfach zeigen und klicken, um jedes Element zu bearbeiten, oder neue Elemente per Drag & Drop aus der linken Spalte in Ihr Layout ziehen.

Sie können auch ein E-Mail-Anmeldeformular und Social-Media-Buttons zu Ihrer "Coming Soon"-Seite hinzufügen, damit Ihre Benutzer Ihrer Marke folgen können, noch bevor sie gestartet wird.

Sobald Sie mit dem Seitenlayout fertig sind, wechseln Sie zum Tab "Connect" oben. Von hier aus können Sie Ihren E-Mail-Marketing-Dienst integrieren, um Ihre Liste zu erweitern und Personen zu benachrichtigen, wenn Ihre Website online geht.

Für detailliertere Anweisungen können Sie unser Tutorial zum Thema Erstellen von „Coming Soon“-Seiten in WordPress mit SeedProd lesen.

Wenn Sie fertig sind, klicken Sie auf die Schaltfläche „Speichern“, um Ihre Änderungen zu speichern.

Wählen Sie dann „Veröffentlichen“, um Ihre „Coming Soon“-Seite einsatzbereit zu machen. Keine Sorge, sie ist noch nicht auf Ihrer Website aktiv. Das machen wir im nächsten Schritt.

Sie können nun die Page Builder-Oberfläche schließen, die Sie zurück zum Bildschirm SeedProd » Landing Pages bringt.

Klicken Sie hier auf den Schalter unter dem Feld „Coming Soon“-Seite auf „Aktiv“. Dadurch wird sichergestellt, dass alle Ihre Website-Besucher Ihre neue „Coming Soon“-Seite anstelle Ihrer tatsächlichen Website sehen.

Sie können sich jetzt aus dem WordPress-Adminbereich abmelden oder Ihre Website im Inkognito-Modus besuchen.

Sie sehen Ihre „Coming Soon“-Seite live auf Ihrer Website.

Sie können sich immer noch in Ihr WordPress-Dashboard einloggen und weiter an Ihrer Website arbeiten.

Sie können Ihre Live-Website auch in der Vorschau anzeigen, wenn Sie angemeldet sind.

Sobald Sie mit der Arbeit an Ihrer Website fertig sind, können Sie einfach zum Bildschirm SeedProd » Landing Pages gehen, um Ihre „Coming Soon“-Seite zu deaktivieren.

Klicken Sie hier auf den Schieberegler „Aktiv“, um ihn wieder auf inaktiv zu setzen.

Ermöglichen Sie Kunden die Vorschau der WordPress-Website, bevor sie live geht

Wenn Sie an Kunden-Websites arbeiten, gibt es mehrere Möglichkeiten, Kunden einfach Vorschauen von Änderungen auf einer WordPress-Website zu ermöglichen, bevor sie live gehen.

Der einfachste Weg ist jedoch die Verwendung einer „Coming Soon“-Seite, die mit SeedProd erstellt wurde, wie wir gerade oben gezeigt haben.

Sobald Sie den Wartungsmodus aktiviert haben, müssen Sie auf die Schaltfläche „Seite bearbeiten“ klicken.

Dies startet den Seitenersteller auf Ihrem Bildschirm, wo Sie zum Tab "Seiten-Einstellungen" wechseln müssen.

Klicken Sie dann auf den Abschnitt „Zugriffskontrolle“.

Von hier aus können Sie eine Umgehungs-URL erstellen und die Dauer des Ablaufs der URL wählen. Vergessen Sie nicht, Ihre Änderungen zu speichern.

Ihre Kunden können nun die geheime URL verwenden, um die 'Coming Soon'-Seite zu umgehen und die Website in der Vorschau anzuzeigen.

Wenn Ihre Website bereits live ist und Sie Änderungen mit Ihren Kunden teilen möchten, bevor sie live gehen, behandeln wir dies im nächsten Schritt.

Erstellen Sie eine WordPress-Staging-Website, um Änderungen in der Vorschau anzuzeigen

Es ist gängige Best Practice unter Web-Profis, eine Staging-Website zu erstellen, damit Sie alle Änderungen testen und in der Vorschau anzeigen können, bevor Sie sie auf einer Live-Site anwenden.

Eine Staging-Website ist eine private Kopie Ihrer Website. Sie ist vor der Öffentlichkeit verborgen und gibt Ihnen den Vorteil, Ihre Änderungen auf Ihrem Live-Server zu testen und in der Vorschau anzuzeigen.

Viele der führenden WordPress-Hosting-Unternehmen bieten eine Staging-Website mit einem Klick. Sie können einfach auf eine Schaltfläche klicken, um eine Staging-Website zu erstellen und alle vorgenommenen Änderungen einfach mit Ihrer Live-Site zu synchronisieren.

Für diesen Artikel zeigen wir Ihnen, wie Sie eine Staging-Website auf Bluehost erstellen.

Bluehost ist eines der größten Hosting-Unternehmen der Welt und ein offiziell empfohlener WordPress-Hosting-Anbieter. Sie bieten allen ihren WordPress-Kunden eine Staging-Site-Funktion mit 1 Klick.

Stellen Sie zunächst sicher, dass das Bluehost-Plugin auf Ihrer Website installiert und aktiviert ist. Wenn es bereits aktiviert ist, sehen Sie einen Menüpunkt Bluehost oben im WordPress-Admin-Menü.

Wenn Sie das Bluehost-Menü nicht sehen können, können Sie sich in Ihr Bluehost-Hosting-Konto-Kontrollfeld einloggen und auf die Schaltfläche 'Websites' klicken.

Klicken Sie danach auf „Einstellungen“ auf Ihrer Website.

Wechseln Sie im Bereich Website-Verwaltung zum Tab „Plugins“.

Aktivieren Sie dann das Bluehost-Plugin.

Sobald Sie sichergestellt haben, dass das Bluehost-Plugin installiert ist, können Sie Ihre Staging-Site erstellen.

Klicken Sie im WordPress-Adminbereich auf die Seite des Bluehost-Plugins und wechseln Sie zur Registerkarte „Staging“.

Klicken Sie danach auf 'Staging-Website erstellen'.

Das Plugin generiert dann Ihre Staging-Website.

Sobald Sie fertig sind, können Sie auf 'Derzeit nicht bearbeiten' klicken, um zur Staging-Site zu wechseln und mit der Arbeit daran zu beginnen.

Sie können jetzt an Ihrer Staging-Website arbeiten und Ihre Änderungen in einer Live-Vorschau sehen.

Sobald Sie umgeschaltet haben, sehen Sie eine rote Benachrichtigung 'Staging-Umgebung' in der WordPress-Adminleiste.

Dies soll Ihnen helfen, den Unterschied zu Ihrer Live-Website zu erkennen.

Sobald Sie die Vorschau Ihrer Änderungen auf der Staging-Website abgeschlossen haben, können Sie erneut zur Seite des Bluehost-Plugins gehen und zum Tab „Staging“ navigieren.

Wählen Sie hier „Alle Änderungen bereitstellen“ und klicken Sie auf die Schaltfläche „Aktualisieren“, um die Änderungen live zu schalten.

Weitere Details und Anleitungen für andere Hosting-Umgebungen finden Sie in unserem detaillierten Leitfaden, wie Sie eine Staging-Site für WordPress erstellen.

WordPress-Beiträge und -Seiten vor der Veröffentlichung in der Vorschau anzeigen

WordPress verwendet einen intuitiven Block-Editor, der automatisch das Styling Ihres Themes verwendet, um eine Live-Vorschau Ihrer Beiträge und Seiten anzuzeigen.

Dies gibt Ihnen jedoch möglicherweise keine klare Vorstellung davon, wie ein Beitrag oder eine Seite auf Ihrer Website mit Ihren Headern, Sidebars und allem anderen auf der Seite aussehen könnte.

Glücklicherweise können Sie mit dem Block-Editor auch einen Beitrag oder eine Seite in der Vorschau anzeigen, ohne sie zu veröffentlichen.

Klicken Sie einfach auf die Schaltfläche „Vorschau“ in der oberen rechten Ecke.

Sie können zwischen den Vorschauoptionen Desktop, Tablet und Mobilgerät wählen, diese zeigen Ihnen die Vorschau jedoch nur innerhalb des Inhaltseditors an.

Nachdem Sie einen Gerätetyp ausgewählt haben, klicken Sie auf die Option „In neuem Tab in der Vorschau anzeigen“, um die vollständige Vorschau auf Ihrer Website anzuzeigen.

WordPress zeigt Ihnen dann eine Vorschau Ihres Beitrags oder Ihrer Seite an, bevor sie veröffentlicht werden.

Wenn Sie jemand anderem exklusiven Zugriff auf die Vorschau eines Ihrer unveröffentlichten Beiträge gewähren möchten, lesen Sie unseren Leitfaden „So ermöglichen Sie öffentliche Beitrags-Vorschauen in WordPress“.

WordPress-Theme vor dem Wechseln in der Vorschau anzeigen

Normalerweise, wenn Sie ein WordPress-Theme aktivieren, wird es sofort auf Ihrer Website live geschaltet.

Wenn Sie keine Staging-Website verwenden, sehen Ihre Benutzer das neue Theme ohne Anpassungen.

Wäre es nicht schön, wenn Sie ein WordPress-Theme in der Vorschau anzeigen könnten, bevor Sie es auf Ihrer Website aktivieren?

Glücklicherweise erlaubt Ihnen WordPress, ein Theme in der Vorschau anzuzeigen, bevor Sie es aktivieren.

Installieren Sie einfach das WordPress-Theme, das Sie in der Vorschau anzeigen möchten. Weitere Details finden Sie in unserer Anleitung zum Installieren eines WordPress-Themes.

Klicken Sie nach der Installation des Themes auf den Link „Live-Vorschau“.

Alternativ können Sie auch die Seite Darstellung » Themes besuchen und mit der Maus über ein installiertes Theme fahren.

Sie sehen eine Schaltfläche zum Starten der „Live-Vorschau“.

WordPress startet dann den Theme Customizer.

Hier sehen Sie eine Live-Vorschau des Themes mit Ihren aktuellen Inhalten.

Der Theme-Customizer verwendet Ihre vorhandenen Inhalte und Navigationsmenüs. Sie können verschiedene Theme-Einstellungen im linken Bereich ausprobieren.

Sie können den Theme-Customizer verlassen, ohne das Theme zu aktivieren. Ihre Anpassungen werden jedoch nicht gespeichert.

Wenn Sie mit dem Aussehen des Themes zufrieden sind, können Sie es aktivieren, indem Sie oben im Menü auf die Schaltfläche „Aktivieren & Veröffentlichen“ klicken.

Benötigen Sie Hilfe beim Wechseln von Themes? Sehen Sie sich unser Tutorial an, wie Sie Ihr WordPress-Theme richtig wechseln.

Vorschau von WordPress-Theme-Anpassungen

Möchten Sie Änderungen an Ihrem WordPress-Theme vornehmen, sind sich aber nicht sicher, wie diese auf Ihrer Live-Site aussehen würden?

WordPress bietet verschiedene Möglichkeiten, Ihr WordPress-Theme in der Vorschau anzuzeigen, bevor Sie Änderungen übernehmen.

Bei den meisten WordPress-Themes können Sie Ihre Änderungen mit dem Theme Customizer in der Vorschau anzeigen. Gehen Sie einfach zur Seite Darstellung » Anpassen, um ihn zu starten.

Von hier aus können Sie verschiedene Theme-Optionen ausprobieren, Menüs ändern, Widgets anpassen, benutzerdefiniertes CSS hinzufügen und mehr.

Dies ermöglicht es Ihnen, Theme-Änderungen in der Vorschau anzuzeigen, ohne sie tatsächlich auf Ihre Website anzuwenden.

Sobald Sie mit den vorgenommenen Änderungen zufrieden sind, können Sie auf die Schaltfläche "Veröffentlichen" klicken, um diese Änderungen zu übernehmen. Optional können Sie auch auf das Zahnradsymbol klicken, um Ihre Änderungen als Entwurf zu speichern, Ihre Änderungen zu planen und einen Vorschau-Link mit Kunden zu teilen.

Diese Methode ist möglicherweise nicht für die WordPress Block-Themes verfügbar, die den Full Site Editor verwenden.

In diesem Fall können Sie den Editor starten, indem Sie zum Menü Darstellung » Editor navigieren.

Der Full Site Editor ermöglicht es Ihnen, Ihr WordPress-Theme mit Blöcken zu bearbeiten. Sie können einzelne Vorlagendateien mit einer Live-Vorschau Ihrer Website bearbeiten.

Für weitere Details können Sie unseren vollständigen Leitfaden zum WordPress Full Site Editing einsehen.

Im Gegensatz zum Theme-Customizer können Sie Ihre Änderungen jedoch nicht als Entwurf speichern. Diese Änderungen werden live geschaltet, wenn Sie Ihre Änderungen speichern, oder gehen verloren, wenn Sie ohne Speichern beenden.

Vorschau Ihres benutzerdefinierten WordPress-Themes

Möchten Sie ein komplett eigenes WordPress-Theme mit Live-Vorschau erstellen?

SeedProd ist der beste WordPress-Theme-Builder, mit dem Sie ein benutzerdefiniertes WordPress-Theme über eine Drag-and-Drop-Oberfläche mit Live-Vorschau erstellen können.

Zuerst müssen Sie das SeedProd-Plugin installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung, wie man ein WordPress-Plugin installiert.

Nach der Aktivierung besuchen Sie die Seite SeedProd » Einstellungen, um Ihren Lizenzschlüssel einzugeben. Diese Informationen finden Sie in Ihrem Konto auf der SeedProd-Website.

Als Nächstes müssen Sie die Seite SeedProd » Theme Builder besuchen.

Klicken Sie von hier aus auf die Schaltfläche „Themes“.

Dies öffnet ein Popup, in dem Sie ein Theme als Ausgangspunkt auswählen können.

SeedProd wird mit einer Reihe schöner Themes und Vorlagen geliefert, die Sie anpassen können.

Klicken Sie einfach, um ein Theme auszuwählen, und SeedProd generiert alle Theme-Vorlagendateien für Sie.

Sie können nun auf eine dieser Theme-Dateien klicken, um sie im Theme-Builder zu bearbeiten.

SeedProd verfügt über einen intuitiven Drag-and-Drop-Builder, der Blöcke und Abschnitte verwendet, um schöne Layouts zu erstellen.

Sie können Blöcke zu Ihrem Design aus der linken Spalte hinzufügen. Rechts daneben sehen Sie eine live, bearbeitbare Vorschau Ihrer Theme-Vorlage.

SeedProd bietet auch vollständige Unterstützung für WooCommerce.

Das bedeutet, dass Sie Ihren Online-Shop entwerfen und in der Vorschau anzeigen können, einschließlich Produktseiten, Checkout-Seiten und mehr.

Möchten Sie Ihr Theme für Mobilgeräte in der Vorschau anzeigen?

Klicken Sie einfach auf das mobile Symbol in der unteren Leiste, und SeedProd zeigt die mobile Vorschau Ihres Themes an.

Wenn Sie mit der Bearbeitung Ihres Themes fertig sind, können Sie oben rechts auf die Schaltfläche 'Speichern' klicken und den Builder verlassen. Sie können dann bei Bedarf andere Vorlagen bearbeiten.

Wenn Sie bereit sind, Ihr benutzerdefiniertes Theme bereitzustellen, aktivieren Sie einfach den Schalter „SeedProd Theme aktivieren“ auf der Theme-Builder-Seite.

Ihr benutzerdefiniertes Theme wird nun live geschaltet. Das bedeutet, es wird Ihr bestehendes WordPress-Theme ersetzen.

Um mehr über den SeedProd Custom Theme Builder zu erfahren, lesen Sie unser Tutorial unter wie man ein benutzerdefiniertes WordPress-Theme erstellt, ohne Code schreiben zu müssen.

WordPress-Landingpages vor dem Start in der Vorschau anzeigen

Landing Pages sind spezialisierte Seiten, die in Marketingkampagnen verwendet werden. Diese Seiten sind hochgradig für Conversions und Verkäufe optimiert.

Einige WordPress-Themes werden mit Landingpage-Vorlagen geliefert, die Sie mit dem Block-Editor anpassen können.

Wenn Sie jedoch mehr Designoptionen benötigen, dann benötigen Sie SeedProd. Es ist der beste WordPress Landing Page Builder und ermöglicht es Ihnen, einfach schöne Landing Pages für Ihre Website zu erstellen.

SeedProd bietet Dutzende von professionell gestalteten Landingpage-Vorlagen, mit denen Sie loslegen können. Außerdem sehen Ihre Landingpages auf allen Bildschirmgrößen gleichermaßen gut aus.

Zuerst müssen Sie das SeedProd-Plugin installieren und aktivieren. Nach der Aktivierung müssen Sie die Seite SeedProd » Einstellungen besuchen, um Ihren Lizenzschlüssel einzugeben.

Diese Informationen finden Sie in Ihrem Konto auf der SeedProd-Website.

Gehen Sie als Nächstes im Admin-Sidebar von WordPress zum Bildschirm SeedProd » Landing Pages.

Um mit der Gestaltung Ihrer Seite zu beginnen, klicken Sie auf die Schaltfläche „Neue Landing Page hinzufügen“.

Als Nächstes müssen Sie eine Vorlage auswählen.

Es gibt mehrere hochoptimierte Vorlagen, die Sie als Ausgangspunkt verwenden können, oder Sie können mit einer leeren Vorlage beginnen.

Dies öffnet ein Popup, in dem Sie einen Namen für Ihre Landing Page eingeben und eine URL-Slug auswählen müssen.

Klicken Sie dann auf die Schaltfläche "Speichern und Seite bearbeiten starten", um fortzufahren.

Dies startet die Page-Builder-Oberfläche.

Es ist ein Drag-and-Drop-Design-Tool, mit dem Sie Ihre Seite mit einer Live-Vorschau gestalten können.

Sobald Sie mit der Bearbeitung Ihrer Landingpage fertig sind, können Sie auf die Schaltfläche „Speichern“ klicken und „Veröffentlichen“ auswählen, um sie auf Ihrer Website live zu schalten.

Weitere Informationen finden Sie in unserem Tutorial zum Thema Erstellen von Landing Pages in WordPress.

Bonus-Tipp 🌟: Designprobleme mit visuellem Regressionstesting erkennen

Möchten Sie Ihr Website-Management auf die nächste Stufe heben? Visuelles Regressionstesting hilft Ihnen, automatisch Screenshots Ihrer Website vor und nach Änderungen zu vergleichen.

Dies ist eine der besten Methoden, um Designprobleme zu erkennen, die oft vom menschlichen Auge übersehen werden. Dazu gehören Layoutverschiebungen, Schriftfehler, Farbunstimmigkeiten oder Abstandsprobleme, die nur auf bestimmten Seiten oder Bildschirmgrößen auftreten.

Selbst eine kleine Plugin-Aktualisierung kann unbeabsichtigt das Styling eines Kontaktformulars zerstören oder Elemente verschieben.

Visuelle Regressionswerkzeuge heben diese Unterschiede nebeneinander hervor, sodass Sie sie erkennen und beheben können, bevor Ihre Besucher sie bemerken.

Der einfachste Weg, um loszulegen, ist die Verwendung des VRTs-Plugins für WordPress. Es ermöglicht Ihnen, visuelle Vergleichstests für bestimmte Seiten oder Vorlagen direkt von Ihrem Dashboard aus durchzuführen – ganz ohne Programmierung.

Sie können es sogar auf einer Staging-Site verwenden, um Updates sicher zu testen, bevor Sie etwas live schalten. Details finden Sie in unserem vollständigen Leitfaden zur visuellen Regressionstests.

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie Ihre WordPress-Website in der Vorschau anzeigen, bevor Sie sie veröffentlichen. Möglicherweise möchten Sie auch unsere Experten-Tipps zum Erstellen eines WordPress-Notfallwiederherstellungsplans und unseren ultimativen Leitfaden zur WordPress-Wartung sehen.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.