So erstellen Sie eine One-Page-Website in WordPress (Schritt für Schritt) 

Der Aufbau einer One-Page-Website in WordPress erwies sich als eine der einfachsten und effektivsten Methoden, um eine Online-Präsenz zu schaffen. Ich musste weder Code lernen noch einen Entwickler beauftragen, sondern brauchte nur ein klares Ziel und die richtigen Werkzeuge.

Für diese Website habe ich SeedProd verwendet, einen Drag-and-Drop-WordPress-Builder, der den gesamten Prozess intuitiv gestaltete. Er ermöglichte mir, alles von der Hero-Sektion bis zum Kontaktformular auf einer einzigen, scrollbaren Seite zu strukturieren, die sowohl auf dem Desktop als auch auf dem Mobilgerät hervorragend funktioniert.

Wenn Sie Freiberufler, Kleinunternehmer oder einfach jemand sind, der eine übersichtliche, auf Konversionen ausgerichtete Website ohne den Aufwand der Verwaltung mehrerer Seiten wünscht, ist dieser Ansatz eine Revolution. Und wenn Sie bei Null anfangen, keine Sorge, ich führe Sie durch jeden Schritt.

In diesem Leitfaden zeige ich Ihnen genau, wie Sie eine One-Page-WordPress-Website erstellen, die großartig aussieht und Ihre Ziele effektiv unterstützt – ganz ohne technische Kenntnisse.

Was ist eine One-Page-Website?

Eine One-Page-Website ist eine Seite, die alle ihre Inhalte auf einer einzigen scrollbaren Seite enthält, anstatt mehrere Seiten für verschiedene Abschnitte zu verwenden. Navigationslinks springen typischerweise zu verschiedenen Abschnitten derselben Seite über Ankerlinks.

Dieses Layout ist beliebt für Landingpages, Portfolios, Startup-Launches und Mobile-First-Erlebnisse, da es Reibungsverluste reduziert und die Benutzer auf eine einzige Reise konzentriert.

Warum eine One-Page-Website in WordPress erstellen?

One-Page-WordPress-Websites bieten eine elegante, moderne und mobilfreundliche Möglichkeit, Ihre Inhalte zu präsentieren, ohne die Benutzer zu überfordern. Anstatt Informationen über mehrere Seiten zu verteilen (wie Über uns, Dienstleistungen, Kontakt), kombinieren Sie sie zu einem einzigen, scrollbaren Erlebnis.

Hier sind die wichtigsten Vorteile der Verwendung eines One-Page-WordPress-Designs:

• Schnellere Ladezeiten und einfachere Navigation
• Höhere Konversionen durch fokussierte Call-to-Actions
• Einfachere Optimierung für Mobilgeräte und SEO
• Ideal für Landingpages, Portfolios und Produktpräsentationen
• Vereinfachte Wartung mit weniger zu verwaltenden Inhalten

Außerdem können Sie mit Tools wie SeedProd diese Websites visuell erstellen, ohne einen Entwickler beauftragen zu müssen.

Wesentliche Abschnitte einer One-Page-WordPress-Website

Bei der Gestaltung Ihrer One-Page-Website ist die Struktur entscheidend. Jeder Inhaltsblock sollte einen klaren Zweck erfüllen. Hier sind die Elemente, die die meisten erfolgreichen One-Page-Websites enthalten:

• Hero-Sektion: Ihre Überschrift, Unterüberschrift und ein überzeugender CTA. Dies ist das Erste, was Benutzer sehen.
• Über uns-Sektion: Erklären Sie kurz, wer Sie sind und was Sie anbieten.
• Funktionen oder Dienstleistungen: Präsentieren Sie Ihre Kernangebote oder Produkt-Highlights.
• Social Proof: Fügen Sie Kundenrezensionen oder Vertrauenssiegel hinzu.
• Call-to-Action (CTA): Fordern Sie Benutzer auf, eine Aktion auszuführen – sich anzumelden, zu kaufen oder Kontakt aufzunehmen.
• Kontakt-Sektion: Fügen Sie E-Mail, Telefon oder ein Kontaktformular hinzu.
• Fußzeile: Fügen Sie rechtliche Links, Copyright-Informationen oder sekundäre Navigation hinzu.

So erstellen Sie eine One-Page-Website in WordPress

Mit den obigen Punkten im Hinterkopf können Sie die folgenden Schritte ausführen, um zu lernen, wie Sie eine One-Page-Website in WordPress erstellen:

Schritt 1. WordPress-Hosting und Domain einrichten

Bevor Sie Ihre One-Page-Website erstellen, müssen Sie zuerst einen Domainnamen und Webhosting erwerben. Ein Domainname ist die Adresse Ihrer Website im Internet, während Hosting das Zuhause ist, in dem die Dateien Ihrer Website gespeichert werden.

Viele Hosting-Unternehmen bieten im Rahmen ihrer Hosting-Pläne einen kostenlosen Domainnamen an. Zum Beispiel bietet Bluehost WordPress-Hosting auf jedem Plan einen kostenlosen Domainnamen für ein Jahr an.

Bluehosts Small Business Plan beinhaltet auch:

• Unbegrenzte Websites
• Unbegrenzter Speicherplatz
• Kostenloses CDN
• Kostenloses SSL-Zertifikat

Die Kosten liegen bei etwa 5 US-Dollar pro Monat.

Wenn man bedenkt, dass Bluehost auch ein offizieller WordPress-empfohlener Hosting-Partner ist, sind sie eine ausgezeichnete erste Wahl für Ihre geschäftliche Website. Sie können sich aber auch umsehen, indem Sie sich diese besten WordPress-Hosting-Anbieter ansehen.

Neben Ihrer Domain und Ihrem Hosting müssen Sie auch ein WordPress-Theme auswählen, um loszulegen. 

Die meisten Unternehmen suchen nach modernen Single-Page-Themes, um ihre Website zu erstellen. Aber für dieses Tutorial werden wir einen Website-Builder verwenden, sodass Sie kein spezielles One-Page-WordPress-Theme benötigen.

Stattdessen empfehlen wir die Verwendung eines schnellen und optimierten Themes für Ihre Website. Sie könnten zum Beispiel eines der offiziellen Standard-Themes von WordPress verwenden oder aus diesen beliebten WordPress-Themes wählen.

Denken Sie einfach daran, dass das Design oder die Theme-Optionen nicht wichtig sind. Sie suchen nach sauberem Code und schnellen Geschwindigkeiten, um Ihre Website optimiert zu halten.

Wenn Sie Hilfe beim Einrichten Ihrer Website benötigen, lesen Sie diesen ultimativen Leitfaden zum Thema Website-Erstellung.

Wir werden die Apple Plug One-Page-Website in diesem Tutorial nachbilden.

Diese Seite ist eine Parodie auf ein Apple-Produkt von Nicer, einem Unternehmen, das Apps für führende Unternehmen entwickelt.

Alles, was wir zur Erstellung dieser Seite verwenden werden, ist ein einziges, leistungsstarkes WordPress-Plugin.

SeedProd ist eines der besten WordPress-Website-Builder auf dem Markt. Es verfügt über einen leistungsstarken Drag-and-Drop-Editor und einen WordPress-Theme-Builder, mit dem Sie jedes Layout erstellen, anpassen und starten können, ohne Code schreiben zu müssen.

SeedProd ist super einfach zu bedienen (auch für Anfänger). Die Einrichtung Ihrer Website ist so einfach wie Zeigen, Klicken und die automatische Anzeige der Änderungen in Echtzeit.

Schritt 2. SeedProd Website Builder installieren

Zuerst müssen Sie das SeedProd Website Builder Plugin herunterladen und es auf Ihrer WordPress-Site installieren und aktivieren.

Hinweis: SeedProd bietet eine kostenlose Version, aber wir werden für die Theme Builder-Funktionen in diesem Tutorial SeedProd Pro verwenden.

Sie können dieser Anleitung zum Installieren eines WordPress-Plugins folgen, wenn Sie Hilfe benötigen.

Nachdem Sie SeedProd aktiviert haben, gehen Sie in Ihrem WordPress-Dashboard zu SeedProd » Einstellungen und geben Sie Ihren Lizenzschlüssel ein. Diese Informationen finden Sie auf der Kontoseite auf der SeedProd-Website.

Schritt 3. Erstellen Sie Ihre Website-Vorlage

Um eine benutzerdefinierte One-Page-Website mit SeedProd zu erstellen, müssen Sie zuerst eine benutzerdefinierte Vorlage erstellen. Keine Sorge; das Erstellen einer benutzerdefinierten Vorlage mit SeedProd ist ganz einfach.

Gehen Sie zuerst zur Seite SeedProd » Theme Builder.

Normalerweise sehen Sie auf dieser Seite die Liste der Vorlagen für Ihr aktuelles SeedProd-Theme. Da wir noch keine erstellt haben, sehen Sie nur die Global CSS-Vorlage. 

Wir empfehlen normalerweise, beim Erstellen einer Website mit einem der vorgefertigten Themes von SeedProd zu beginnen. Da wir jedoch die Apple Plug-Parodie-Website nachbilden möchten, beginnen wir von Grund auf neu.

Klicken Sie dazu auf die Schaltfläche Neue Theme-Vorlage hinzufügen.

Geben Sie dann im Overlay-Fenster der Vorlage einen Namen und wählen Sie im Dropdown-Menü „Typ“ die Option Benutzerdefinierte Seite. Klicken Sie anschließend auf die Schaltfläche Bedingung hinzufügen und wählen Sie die Option „Gesamte Website“.

Diese Einstellungen stellen sicher, dass die Seite, die Sie mit SeedProd erstellen, überall auf Ihrer Website angezeigt wird.

Nachdem Sie Ihre Vorlage erstellt haben, wird sie in Seed પ્રોડ્ ના Drag-and-Drop-Seitenersteller geöffnet, wo Sie das Layout und Design anpassen und Ihre benutzerdefinierten Inhalte hinzufügen können.

Schritt 4. Passen Sie Ihre One-Page-Website an

Im Drag-and-Drop-Seitenersteller von SeedProd sehen Sie rechts eine Vorschau Ihrer Website und links ein Bearbeitungsfeld.

Erstellen eines Headers für eine One-Page-Website

Um mit dem Erstellen Ihrer Website zu beginnen, müssen Sie zuerst einen neuen Abschnitt hinzufügen. Klicken Sie dazu auf das Symbol zum Hinzufügen von Spalten und klicken Sie auf ein Layout.

Da die Apple Plug-Website einen 3-Spalten-Website-Header hat, wählen wir das 3-Spalten-Layout.

Ziehen Sie als Nächstes den Bild-Block vom linken Bereich in Ihre neue Spalte, wie hier gezeigt:

Jetzt können Sie auf den Bildblock klicken und ein Logo aus Ihrer Mediathek oder Ihrem Computer hochladen. Nachdem Sie Ihr Logo hochgeladen haben, können Sie seine Größe und Ausrichtung ändern und einen Link hinzufügen, indem Sie auf die Optionen im Einstellungsbereich klicken.

Lassen Sie uns nun die Menüpunkte nachbilden. Wir verwenden dafür den Navigationsmenü-Block von SeedProd. Ziehen Sie ihn also in die zweite Spalte und fügen Sie jeden Menüpunkt im Einstellungsbereich hinzu.

Für dieses Design möchten Sie den Menütyp „Einfach“ verwenden, da wir später Ankerlinks hinzufügen werden, mit denen Benutzer zu verschiedenen Abschnitten der Seite springen können.

Der letzte Schritt für diesen Abschnitt ist das Hinzufügen eines „Kaufen“-Buttons. Dies können Sie tun, indem Sie den Button-Block aus dem linken Bereich ziehen und in Ihre letzte Spalte einfügen.

Von dort aus können Sie den Button mit Ihrer Checkout-Seite verknüpfen. Im Tab „Erweitert“ können Sie dann Ihre Button-Farbe, Abstände und den Rahmen durch Zeigen und Klicken anpassen.

Wenn Sie mit dem Header Ihrer One-Page-Website zufrieden sind, klicken Sie auf Speichern.

Hinzufügen verschiedener Inhaltsbereiche

Wenn Sie sich das Beispiel ansehen, das wir nachbilden, werden Sie sehen, dass die Seite 7 verschiedene Abschnitte hat:

• Hero
• Vision
• Design
• Innovation
• Materialien
• Funktionen
• Handlungsaufforderung

Jeder Abschnitt erklärt einen anderen Aspekt des Produkts, ohne zu viel Platz einzunehmen. Es hilft den Lesern auch, durch die Seite zu fließen, bis sie zum Call to Action gelangen.

Das Erstellen jedes Abschnitts ist mit SeedProd einfach.

Fügen Sie zuerst einen neuen Abschnitt mit einer Spalte hinzu, wie Sie es für den Header-Bereich getan haben. Ziehen Sie dann einen Bildblock hinein und laden Sie Ihr Logo erneut hoch.

Als Nächstes müssen Sie den Überschriften-Block von SeedProd hinzufügen. Dieser Block ermöglicht es Ihnen, Ihre Überschriftenebene von H1 bis H6 festzulegen. Sie können auch auf den Tab „Erweitert“ klicken, um Schriftart, Farben und Abstände anzupassen.

Wiederholen Sie diesen Schritt für jeden Abschnitt Ihrer One-Page-Website. Der folgende Abschnitt erfordert beispielsweise ein 2-Spalten-Layout, zwei Überschriftenblöcke, einen Bildblock und einen einfachen Textblock.

Die folgenden 2 Abschnitte sind gleich. Sie können Ihren ersten Abschnitt duplizieren und die Inhalte ändern, um die Dinge zu erleichtern. Tun Sie dies, indem Sie mit der Maus über einen Abschnitt fahren und auf das Duplizieren-Symbol klicken.

Ihr neuer Abschnitt wird direkt unter dem Original angezeigt.

Ankerlinks hinzufügen

Die meisten One-Page-Websites verwenden Ankerlinks, um den Lesern die Navigation zu erleichtern, anstelle eines typischen Navigationsmenüs. Auf diese Weise können Benutzer zu dem Abschnitt springen, der sie am meisten interessiert.

Das Hinzufügen von Ankerlinks mit SeedProd ist einfach. Alles, was Sie tun müssen, ist den Anker-Block zu finden und ihn in den Abschnitt zu ziehen, zu dem Sie verlinken möchten.

Geben Sie dann im Einstellungsfenster Ihrem Anker einen Namen.

Lassen Sie uns nun den Abschnitt mit einem Menüpunkt verknüpfen. Klicken Sie dazu auf einen Menüpunkt und geben Sie im Feld „URL-Link“ das Hashtag-Symbol und den Namen Ihres Ankers ein. In unserem Fall wäre das #visionsection.

Denken Sie daran, Ihre Änderungen zu speichern, bevor Sie fortfahren.

Anmeldeformular hinzufügen

Der letzte Abschnitt dieser Einzelseiten-Website ist der Call-to-Action-Bereich. Da diese Website eine Parodie ist, muss sie mit Besuchern, die mehr erfahren möchten, in Kontakt bleiben.

Der einfachste Weg, dies zu tun, ist mit dem Opt-in-Formular-Block von SeedProd. Er fügt Ihrer Website ein anpassbares Formular hinzu, in das Benutzer ihre E-Mail-Adressen eingeben können, um Updates und Benachrichtigungen zu erhalten.

Sie können die Formularfelder, Schaltflächen, Farben, Abstände und mehr mit wenigen Klicks anpassen.

Einige andere wichtige Elemente, die Sie mit SeedProd zu Ihrer One-Page-Website hinzufügen können, sind:

• Social-Media-Icons, um Ihre Follower in sozialen Netzwerken zu vergrößern
• Testimonials zur Steigerung von Vertrauen und Glaubwürdigkeit
• Countdown-Timer, um Dringlichkeit zu erzeugen
• In den Warenkorb-Buttons, um Benutzer zu Ihrer WooCommerce-Kasse weiterzuleiten

Die Optionen sind endlos und es dauert nur einen Moment, bis Ihre Website so aussieht, wie Sie es möchten.

Wenn Sie mit dem Aussehen Ihrer Website zufrieden sind, klicken Sie auf die Schaltfläche „Speichern“ in der oberen rechten Ecke Ihres Bildschirms.

Schritt 5. Verbinden Sie Ihren E-Mail-Marketing-Service

Der nächste Schritt ist die Verbindung zu Ihrem E-Mail-Marketing-Service. Dies ist eine gute Idee, wenn Sie E-Mail-Adressen von Ihrer Website sammeln möchten, um Ihre E-Mail-Liste aufzubauen.

Klicken Sie oben in Ihrem Seitenersteller auf die Registerkarte Verbinden und wählen Sie aus den vielen verfügbaren E-Mail-Diensten. Wählen Sie Ihren bevorzugten E-Mail-Dienst, klicken Sie auf Verbinden und folgen Sie den Anweisungen, um Ihre E-Mail-Liste zu verbinden.

Sehen Sie sich unsere

Schritt 6. Veröffentlichen Sie Ihre One-Page-Website

Jetzt sind Sie bereit, Ihre neue Website live zu schalten. Verlassen Sie dazu den Builder und kehren Sie zum Dashboard des Theme Builders zurück. 

Schalten Sie von dort den Schalter SeedProd Theme aktivieren auf Ein.

Sie können jetzt Ihre Website-Homepage besuchen und Ihre One-Page-Website in Aktion sehen.

Hier ist das Original noch einmal:

Dann hier ist die Website, die wir mit SeedProd nachgebildet haben:

FAQs zu One-Page-WordPress-Websites

Großartige Arbeit; Sie haben jetzt eine Website wie das Originalbeispiel erstellt. War es nicht einfach?

Sie wissen jetzt, wie Sie mit SeedProd eine One-Page-Website in WordPress erstellen. Das Tolle an SeedProd ist, dass Sie so viele verschiedene Arten von Layouts erstellen können, ohne eine einzige Codezeile anfassen zu müssen.

Sind Sie bereit, eine benutzerdefinierte One-Page-Website zu erstellen?

Wenn Sie noch nicht bereit sind, Ihre Website für die Öffentlichkeit sichtbar zu machen, lesen Sie diese Anleitung zum Erstellen einer „Coming Soon“-Seite in WordPress.

Wenn Ihnen dieser Artikel gefallen hat, folgen Sie uns bitte auf YouTube, Twitter und Facebook, um weitere hilfreiche Inhalte für das Wachstum Ihres Unternehmens zu erhalten.