Wie Sie eine Vorschau Ihrer WordPress-Website erstellen, bevor Sie online gehen

Möchten Sie eine Vorschau Ihrer WordPress-Website sehen, bevor Sie sie in Betrieb nehmen?

Eine Vorschau Ihrer Website vor der Veröffentlichung ermöglicht es Ihnen, alle Fehler, Designprobleme, fehlende Elemente sowie Rechtschreib- und Grammatikfehler zu erkennen.

In diesem Artikel zeigen wir Ihnen, wie Sie Ihre Website in der Vorschau anzeigen können, bevor sie online geht, ohne die Benutzerfreundlichkeit zu beeinträchtigen.

Hier finden Sie einen kurzen Überblick über die Themen, die wir in diesem Leitfaden behandeln werden. Verwenden Sie die Links unten, um zu bestimmten Abschnitten zu springen.

• Vorschau der WordPress-Website vor dem Start mit dem Coming Soon-Modus
• Ermöglichen Sie Ihren Kunden eine Vorschau auf Ihre WordPress-Website, bevor Sie live gehen
• Erstellen einer Staging-Website zur Vorschau von Änderungen
• Vorschau von Beiträgen und Seiten vor der Veröffentlichung
• Vorschau eines WordPress-Themes vor dem Umstieg
• Vorschau WordPress-Theme-Anpassungen
• Vorschau Ihres benutzerdefinierten WordPress-Themes (SeedProd)
• Vorschau WordPress Landing Pages (SeedProd)

Sind Sie bereit? Dann fangen wir an.

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

Wenn SieErstellen einer neuen WordPress-Websitedann ist es immer empfehlenswert, einen „Coming Soon“-Modus zu aktivieren, während Sie an Ihrer Website arbeiten.

So können Sie den Besuchern Ihrer Website eine richtige „Coming Soon“-Seite anzeigen. Sie können sich weiterhin in den WordPress-Administrationsbereich einloggen 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 in Betrieb nehmen.

Hierfür benötigen SieSeedProd. Es ist die beste WordPress-Website-Builder auf dem Markt und ermöglicht es Ihnen, leicht zu zeigen, eine schöne kommende bald Seite.

In diesem Tutorial werden wir die Pro-Version von SeedProd verwenden, um alle Vorlagen und erweiterten Funktionen nutzen zu können, aber es gibt auch einekostenlose Version die Sie zur einfachen Erstellung von „Coming Soon“-Seiten verwenden können.

Zunächst müssen Sie das Programm installieren und aktivieren.SeedProd Plugin. Weitere Einzelheiten finden Sie in unserer Schritt-für-Schritt-Anleitung aufwie man ein WordPress-Plugin installiert.

Nach der Aktivierung müssen Sie dieSeedProd “ Einstellungen Seite, um Ihren Lizenzschlüssel einzugeben. Sie finden diese Informationen unter Ihrem Konto auf der SeedProd-Website.

Als nächstes müssen Sie Folgendes besuchenSeedProd “ Landing Pages.

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

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

SeedProd verfügt über mehrere schöne „Coming Soon“-Vorlagen, die professionell gestaltet sind, um die Konversionsrate zu erhöhen.

Wenn Sie eine Vorlage auswählen, wird die Oberfläche des SeedProd-Seitenerstellungsprogramms geöffnet.

Der Page Builder ist ein intuitives Design-Tool, mit dem Sie durch einfaches Zeigen und Klicken jedes Element bearbeiten oder neue Elemente per Drag & Drop in Ihr Layout einfügen können.

Sie können ein E-Mail-Anmeldeformular und Schaltflächen für soziale Medien zu Ihrer „Coming Soon“-Seite hinzufügen, damit Ihre Nutzer Ihrer Marke schon vor dem Start folgen können.

Sobald Sie mit der Gestaltung der Seite fertig sind, müssen Sie zur Registerkarte „Verbinden“ wechseln. Von hier aus können Sie sich mit IhremE-Mail-Marketing-Service um Ihre Liste zu erweitern und andere zu benachrichtigen, wenn Ihre Website online geht.

Wenn Sie fertig sind, können Sie auf die Schaltfläche Speichern klicken, um Ihre Änderungen zu speichern.

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

Sie können nun die Oberfläche des Seitenerstellers schließen, wodurch Sie wieder zurSeedProd “ Landing Pages Seite.

Von hier aus müssen Sie auf das Feld Umschalten unter der kommenden Seite auf Aktiv klicken. Dadurch wird sichergestellt, dass alle Besucher Ihrer Website Ihre neue „Demnächst“-Seite anstelle Ihrer eigentlichen Website sehen werden.

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

Sie werden sehen, dass Ihre „Coming Soon“-Seite live auf Ihrer Website zu sehen ist.

Sie können sich weiterhin in Ihren WordPress-Administrationsbereich einloggen und an Ihrer Website weiterarbeiten.

Wenn Sie angemeldet sind, können Sie auch eine Vorschau Ihrer Live-Website sehen.

Wenn Sie mit der Arbeit an Ihrer Website fertig sind, können Sie einfach auf die SeiteSeedProd “ Landing Pages Seite, um die „Demnächst“-Seite zu deaktivieren.

Klicken Sie einfach auf den Schieberegler „Aktiv“, um ihn wieder inaktiv zu schalten.

Mit SeedProd können Sie auch leichtIhre Website in den Wartungsmodus versetzen während der Arbeit an Ihrer Website mit Live-Vorschau.

Ermöglichen Sie Ihren Kunden eine Vorschau der WordPress-Site, bevor Sie live gehen

Wenn Sie an Kunden-Websites arbeiten, gibt es mehrere Möglichkeiten, um Kunden auf einfache Weise eine Vorschau der Änderungen an einer WordPress-Website zu ermöglichen, bevor Sie live gehen.

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

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

Auf dem Bildschirm des Seitenerstellers müssen Sie zur Registerkarte Seiteneinstellungen wechseln.

Klicken Sie dann auf den Abschnitt Zugriffskontrolle.

Von hier aus können Sie eine Bypass-URL erstellen und die URL-Ablaufdauer 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 eine Vorschau der Website zu erhalten.

Wenn Ihre Website bereits live ist und Sie Ihre Kunden über die Änderungen informieren möchten, bevor Sie sie in Betrieb nehmen, werden wir dies im nächsten Schritt behandeln.

Erstellen einer WordPress Staging-Website zur Vorschau von Änderungen

Es ist ein Standardverfahren unter Web-Profis, eine Staging-Website zu erstellen, damit Sie alle Änderungen testen und in der Vorschau anzeigen können, bevor Sie sie auf eine Live-Website anwenden.

Eine Staging-Website ist ein privater Klon Ihrer Website. Sie ist für die Öffentlichkeit unsichtbar und bietet Ihnen den Vorteil, dass Sie Ihre Änderungen auf Ihrem Live-Server testen und in der Vorschau anzeigen können.

Viele derTop-WordPress-Hosting-Unternehmen bieten eine 1-Klick-Staging-Website. Sie können einfach auf eine Schaltfläche klicken, um eine Staging-Website zu erstellen und alle Änderungen, die Sie vornehmen, einfach mit Ihrer Live-Website zu synchronisieren.

In diesem Artikel zeigen wir Ihnen, wie Sie eine Staging-Website aufBluehost.

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

Zunächst müssen Sie sicherstellen, dass Sie das Bluehost-Plugin auf Ihrer Website installiert und aktiviert haben. Wenn es bereits aktiviert ist, sehen Sie einen Bluehost-Menüpunkt oben im WordPress-Verwaltungsmenü.

Wenn Sie nicht sehen können, dass dieBluehost können Sie sich in das Kontrollpanel Ihres Bluehost-Hosting-Kontos einloggen und auf die Schaltfläche „Site verwalten“ klicken.

Wechseln Sie im Bereich der Website-Verwaltung einfach zur Registerkarte Plugins und aktivieren Sie das Bluehost-Plugin.

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

Gehen Sie im WordPress-Administrationsbereich zum MenüpunktBluehost “ Inszenierung Seite und klicken Sie auf die Schaltfläche Staging-Site erstellen.

Das Plugin erstellt dann Ihre Staging-Website.

Wenn Sie fertig sind, können Sie einfach auf Ihre Staging-Site klicken, um zu ihr zu wechseln und mit ihrer Arbeit zu beginnen.

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

Um den Unterschied zu Ihrer Live-Site zu verdeutlichen, sehen Sie in der WordPress-Verwaltungsleiste einen roten Hinweis auf die „Staging-Umgebung“.

Sobald Sie die Vorschau Ihrer Änderungen auf der Staging-Website abgeschlossen haben, können Sie zuBluehost “ Inszenierung Seite auf der Staging-Site.

Von hier aus müssen Sie auf die Schaltfläche Alle Änderungen bereitstellen klicken.

Weitere Details und Anleitungen für andere Hosting-Umgebungen finden Sie in unserer ausführlichen Anleitung zurErstellen einer Staging-Site für WordPress.

Vorschau von WordPress-Beiträgen und -Seiten vor der Veröffentlichung

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

Sie vermittelt Ihnen jedoch keine klare Vorstellung davon, wie ein Beitrag oder eine Seite auf Ihrer Website mit Ihren Kopfzeilen, Seitenleisten und allem anderen auf der Seite aussehen könnte.

Glücklicherweise ist dieBlockeditor können Sie auch eine Vorschau eines Beitrags oder einer Seite anzeigen, ohne sie zu veröffentlichen.

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

Sie können zwischen den Vorschauprogrammen für Desktop, Tablet und Mobile wählen, aber diese zeigen Ihnen nur die Vorschau innerhalb des Inhaltseditors.

Nachdem Sie einen Gerätetyp ausgewählt haben, müssen Sie auf die Option „Vorschau in neuer Registerkarte“ klicken, um die vollständige Vorschau auf Ihrer Website anzuzeigen.

WordPress zeigt Ihnen dann eine Vorschau Ihres Beitrags oder Ihrer Seite, bevor er/sie online geht.

Wenn Sie jemandem einen exklusiven Zugang zur Vorschau eines Ihrer unveröffentlichten Beiträge gewähren möchten, lesen Sie bitte unsere Anleitung zuwie man eine öffentliche Beitragsvorschau in WordPress zulässt.

Vorschau eines WordPress-Themes vor dem Umstieg

Normalerweise, wenn Sie eineWordPress-Themeund wird dann sofort auf Ihrer Website freigeschaltet.

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

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

Glücklicherweise können Sie in WordPress eine Vorschau eines Themes anzeigen, bevor Sie es aktivieren.

Installieren Sie einfach das WordPress-Theme, das Sie in der Vorschau anzeigen möchten. Weitere Einzelheiten finden Sie in unserem Leitfaden überwie man ein WordPress-Theme installiert.

Nach der Installation des Themes müssen Sie lediglich auf den Link Live-Vorschau klicken.

Alternativ können Sie auch aufErscheinungsbild “ Themes Seite und fahren Sie mit der Maus über ein installiertes Thema.

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

WordPress wird dann den Theme Customizer starten.

Hier sehen Sie eine Live-Vorschau des Themas mit Ihrem aktuellen Inhalt.

Der Theme-Customizer verwendet Ihre vorhandenen Inhalte und das Navigationsmenü. Sie können auf der linken Seite verschiedene Theme-Einstellungen ausprobieren.

Sie können den Theme-Customizer verlassen, ohne das Theme zu aktivieren. Allerdings werden dabei keine Ihrer Anpassungen gespeichert.

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

Brauchen Sie Hilfe beim Wechseln des Themas? Sehen Sie sich unsere Anleitung an, wie manIhr WordPress-Theme richtig wechseln.

Vorschau WordPress-Theme-Anpassungen

Sie möchten Ä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 die Änderungen anwenden.

Bei den meisten WordPress-Themes können Sie Ihre Änderungen mit dem Theme-Customizer in der Vorschau anzeigen. Gehen Sie einfach auf die SeiteErscheinungsbild “ Anpassen Seite, um den Theme-Customizer zu starten.

Von hier aus können Sie verschiedene Themenoptionen ausprobieren, Menüs ändern, Widgets anpassen undbenutzerdefiniertes CSSund mehr.

Auf diese Weise können Sie eine Vorschau der Theme-Änderungen sehen, ohne sie tatsächlich auf Ihrer Website anzuwenden.

Wenn Sie mit den vorgenommenen Änderungen zufrieden sind, können Sie auf die Schaltfläche Veröffentlichen klicken, um die Ä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 Vorschaulink mit Kunden zu teilen.

Diese Methode ist bei einigen neueren WordPress-Themes, die den Full Site Editor verwenden, möglicherweise nicht verfügbar.

Wenn Sie einevollständiges Site-Editor-Themakönnen Sie den Editor starten, indem Sie die SeiteErscheinungsbild “ Editor Menü.

Mit dem vollständigen Site-Editor können Sie Ihr WordPress-Theme mithilfe von Blöcken bearbeiten. Sie können einzelne Vorlagendateien mit einer Live-Vorschau Ihrer Website bearbeiten.

Anders als im Theme Customizer können Sie Ihre Änderungen jedoch nicht als Entwurf speichern. Diese Änderungen werden aktiv, wenn Sie sie speichern, oder gehen verloren, wenn Sie die Seite ohne Speichern verlassen.

Vorschau Ihres benutzerdefinierten WordPress-Themes

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

SeedProd ist der beste WordPress-Site-Builder, mit dem Sie ein benutzerdefiniertes WordPress-Theme über eine Drag & Drop-Schnittstelle mit Live-Vorschau erstellen können.

Zunächst müssen Sie Folgendes installieren und aktivierenSeedProd Plugin. Weitere Einzelheiten finden Sie in unserer Schritt-für-Schritt-Anleitung aufwie man ein WordPress-Plugin installiert.

Nach der Aktivierung müssen Sie Folgendes besuchenSeedProd “ Einstellungen um Ihren Lizenzschlüssel einzugeben. Sie finden diese Informationen unter Ihrem Konto auf der SeedProd-Website.

Als nächstes müssen Sie Folgendes besuchenSeedProd “ Theme Builder Seite.

Klicken Sie hier auf die Schaltfläche Themen.

Daraufhin wird ein Popup-Fenster angezeigt, in dem Sie ein Thema auswählen können, das Sie als Ausgangspunkt verwenden möchten.

SeedProd wird mit einer Reihe von schönen Themen geliefert, die Sie anpassen können.

Wählen Sie einfach per Mausklick ein Thema aus, und SeedProd generiert alle Themenvorlagendateien für Sie.

Sie können nun auf jede dieser Themendateien 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.

In der linken Spalte können Sie Blöcke zu Ihrem Design hinzufügen. Auf der rechten Seite sehen Sie eine bearbeitbare Live-Vorschau Ihrer Themenvorlage.

SeedProd bietet außerdem volle Unterstützung fürWooCommerce.

Das bedeutet, dass Sie Ihren Online-Shop entwerfen und in der Vorschau anzeigen können, einschließlichProduktseiten, Kassenseite, und mehr.

Möchten Sie eine Vorschau Ihres Themas für mobile Geräte sehen?

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

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

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

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

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

Vorschau von WordPress Landing Pages vor der Einführung

Landing Pages sind spezielle Seiten, die in Marketingkampagnen verwendet werden. Diese Seiten sind in hohem Maße für Konversionen und Verkäufe optimiert.

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

Wenn Sie jedoch mehr Gestaltungsmöglichkeiten benötigen, dann brauchen Sie SeedProd. Es ist dasbester WordPress Landing Page Builder und ermöglicht Ihnen die einfache Erstellung schöner Landing Pages für Ihre Website.

SeedProd wird mit Dutzenden von professionell gestalteten Landing Page-Vorlagen geliefert, damit Sie sofort loslegen können. Außerdem sehen Ihre Landing Pages auf allen Bildschirmgrößen gleich gut aus.

Zunächst müssen Sie das Programm installieren und aktivieren.SeedProd Plugin. Nach der Aktivierung müssen Sie Folgendes besuchenSeedProd “ Einstellungen Seite, um Ihren Lizenzschlüssel einzugeben. Sie finden diese Informationen unter Ihrem Konto auf der SeedProd-Website.

Als nächstes gehen Sie zurSeedProd “ Landing Pages Seite.

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.

Daraufhin wird ein Popup-Fenster angezeigt, in dem Sie einen Namen für Ihre Landing Page eingeben und einen URL-Slug auswählen müssen.

Klicken Sie dann auf die Schaltfläche „Speichern und mit der Bearbeitung der Seite beginnen“, um fortzufahren.

Dadurch wird die Oberfläche des Seitenerstellers gestartet.

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