Letzte SeedProd Nachrichten

WordPress-Tutorials, -Tipps und -Ressourcen für das Wachstum Ihres Unternehmens

Wie man eine einseitige Website in WordPress erstellt (Schritt für Schritt)

Wie man eine einseitige Website in WordPress erstellt (Schritt für Schritt) 

Geschrieben von: Autorenbild Stacey Corrin
Autorenbild Stacey Corrin
Stacey schreibt seit über 10 Jahren über WordPress und digitales Marketing und noch viel länger über andere Themen. Darüber hinaus ist sie fasziniert von Webdesign, Benutzererfahrung und SEO.
     Bewertet von: John Turner
Kritikerbild John Turner
John Turner ist der Mitbegründer von SeedProd. Er verfügt über mehr als 20 Jahre Geschäfts- und Entwicklungserfahrung und seine Plugins wurden über 25 Millionen Mal heruntergeladen.

Möchten Sie lernen, wie man eine einseitige Website in WordPress erstellt?

One-Page-Websites verwenden nur eine einzige Webseite mit einem einfachen, modernen Design. Auf diese Weise können die Nutzer alle Informationen, die sie benötigen, auf einer Seite sehen, ohne wegklicken zu müssen.

In diesem Artikel zeigen wir Ihnen Schritt für Schritt, wie Sie eine einseitige Website in WordPress erstellen können.

Warum eine einseitige Website erstellen?

Die meisten Websites haben eines gemeinsam: Sie verfügen in der Regel über eine Seitennavigation, die den Benutzer zu anderen Seiten der Website führt, z. B. zu einer Seite:

Ein Navigationsmenü ist eine gute Lösung für größere Unternehmen oder Unternehmen mit vielen Informationen. Kleinere Marken brauchen aber vielleicht nicht so viel Platz, um ihre Produkte oder Dienstleistungen zu erklären.

Außerdem werden bei einem einseitigen Webdesign die Informationen einer mehrseitigen Standard-Website auf eine einzige Seite reduziert. Dazu werden verschiedene Abschnitte hinzugefügt, die beim Durchblättern der Seite erscheinen.

Die Erstellung dieser Art von Website hat mehrere Vorteile:

  • Benutzer können leichter auf Ihrer Website navigieren
  • Ihr Call-to-Action wird schneller gesehen
  • Es ist einfacher, einzelne Webseiten für Mobilgeräte zu optimieren
  • Einseitige Websites sind leichter zu pflegen

Noch wichtiger ist, dass Ihr gesamter Verkehr auf eine Seite geht und Ihre einseitige Website daher viel höhere Konversionsraten aufweisen sollte.

Natürlich werden große und komplexe Unternehmen Schwierigkeiten haben, all ihre Informationen auf einer einzigen WordPress-Seite unterzubringen. Aber wenn Sie eine kleine Unternehmenswebsite, ein Portfolio oder ein einfaches Schaufenster betreiben, ist diese Art von Website eine ausgezeichnete Wahl.

Was Sie in Ihre One-Page-WordPress-Site einbauen sollten

Da Ihre WordPress-Website nur eine einzige Seite hat, müssen Sie sich überlegen, was Sie aufnehmen wollen. Ihre Aufgabe ist es, alles bereitzustellen, was Ihr Publikum braucht, um etwas über Ihr Unternehmen zu erfahren, ohne das Design zu überladen oder die Besucher zu überwältigen.

Einfach ausgedrückt: Alles, was Sie auf Ihrer einseitigen Website unterbringen, sollte einen Grund haben.

Hier ist eine allgemeine Vorstellung davon, was Sie auf Ihrer einseitigen WordPress-Website enthalten sollten:

  • Branding-Elemente wie Ihr Logo und Ihr Slogan, um Ihre Website wiedererkennbar zu machen.
  • Ein Abschnitt über Sie, der erklärt, wer Sie sind und was Sie tun.
  • Eine Liste der von Ihnen angebotenen Produkte oder Dienstleistungen.
  • Bewertungen oder Zeugnisse, um den sozialen Beweis zu erbringen und Vertrauen aufzubauen.
  • Ein hervorgehobener Call-to-Action, der die Nutzer dazu bringt, mehr zu erfahren, sich anzumelden oder zu kaufen.
  • Links zu Ihren Profilen in den sozialen Medien.
  • Kontaktinformationen, damit die Nutzer sich mit ihm in Verbindung setzen können.

Die Reihenfolge, in der Sie diese Angaben auf Ihrer Seite anzeigen, ist ebenso wichtig.

Am besten fügen Sie Ihren CTA weiter oben auf Ihrer Seite ein, da er das wichtigste Element ist. Ihre Kontaktdaten und die Links zu sozialen Netzwerken sollten in der Nähe des unteren Endes Ihrer Website stehen.

Überlegen Sie, was Ihr Publikum zuerst sehen soll, und gestalten Sie Ihre Seite entsprechend.

Wie man eine einseitige Website in WordPress erstellt

Unter Berücksichtigung der obigen Ausführungen können Sie die folgenden Schritte befolgen, um zu lernen, wie man eine einseitige Website in WordPress erstellt:

Schritt 1. WordPress-Hosting und Domain einrichten

Bevor Sie Ihre einseitige Website erstellen können, müssen Sie zunächst einen Domänennamen und ein Webhosting erwerben. Ein Domänenname ist die Adresse Ihrer Website im Internet, während das Hosting das Zuhause ist, in dem die Dateien Ihrer Website gespeichert werden.

Viele Hosting-Unternehmen bieten im Rahmen ihrer Hosting-Angebote einen kostenlosen Domänennamen an. Das WordPress-Hosting von Bluehost bietet zum Beispiel einen kostenlosen Domainnamen für ein Jahr bei jedem Tarif.

bluehost beste WordPress-Hosting-Lösung

Der Plan von Bluehost für kleine Unternehmen umfasst auch:

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

Der Preis liegt bei etwa 5 Dollar pro Monat.

Wenn Sie bedenken, dass Bluehost auch ein offizieller, von WordPress empfohlener Hosting-Partner ist, sind sie eine ausgezeichnete erste Wahl für Ihre Unternehmenswebsite. Sie können sich aber auch umsehen, indem Sie diese besten WordPress-Hosting-Anbieter ausprobieren.

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

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

Stattdessen empfehlen wir, ein schnelles und optimiertes Theme für Ihre Website zu verwenden. Sie können zum Beispiel eines der offiziellen Standard-Themes von WordPress verwenden oder aus diesen beliebten WordPress-Themes wählen.

Denken Sie nur daran, dass das Design oder die Themenoptionen nicht wichtig sind. Sie suchen nach sauberem Code und schnellen Geschwindigkeiten, um Ihre Website zu optimieren.

Wenn Sie Hilfe bei der Einrichtung Ihrer Website benötigen, lesen Sie diesen ultimativen Leitfaden für die Erstellung einer Website.

In diesem Tutorial werden wir die einseitige Apple Plug-Website neu erstellen.

Apfelstecker-Parodie

Diese Website 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 Website verwenden, ist ein einziges, leistungsstarkes WordPress-Plugin.

SeedProd WordPress Website-Baukasten

SeedProd ist einer der besten WordPress-Website-Builder auf dem Markt. Es enthält einen leistungsstarken Drag-and-Drop-Editor und einen WordPress-Theme-Builder, mit dem Sie jedes Layout erstellen, anpassen und starten können, ohne Code zu schreiben.

SeedProd ist supereinfach zu bedienen (auch für Anfänger). Das Einrichten Ihrer Website ist so einfach wie das Zeigen und Klicken und Sie sehen, wie die Änderungen automatisch in Echtzeit erfolgen.

Schritt 2. SeedProd Website Builder installieren

Zunächst müssen Sie das SeedProd Website Builder Plugin herunterladen und auf Ihrer WordPress-Website installieren und aktivieren.

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

Sie können diese Anleitung zur Installation eines WordPress-Plugins befolgen, 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. Sie finden diese Informationen auf Ihrer Kontoseite auf der SeedProd-Website.

Ihren Lizenzschlüssel eingeben

Schritt 3. Erstellen Sie Ihre Website-Vorlage

Um eine benutzerdefinierte einseitige Website mit SeedProd zu erstellen, müssen Sie zunächst eine benutzerdefinierte Vorlage erstellen. Keine Sorge, das Erstellen einer benutzerdefinierten Vorlage mit SeedProd ist ganz einfach.

Gehen Sie zunächst auf die Seite SeedProd " Theme Builder.

SeedProd Themenerstellung

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

Normalerweise empfehlen wir, bei der Erstellung einer Website mit einem der vorgefertigten Themen von SeedProd zu beginnen. Da wir aber die Apple Plug-Parodie-Website neu erstellen wollen, fangen wir bei Null an.

Klicken Sie dazu auf die Schaltfläche Neue Themenvorlage hinzufügen.

Hinzufügen einer neuen Themenvorlage in seedprod

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

Hinzufügen des benutzerdefinierten Seitentyps und Einfügen in die 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 im Drag-and-Drop-Seitenerstellungsprogramm von SeedProd geöffnet, wo Sie das Layout und das Design anpassen und Ihren eigenen Inhalt hinzufügen können.

Schritt 4. Anpassen Ihrer einseitigen Website

Im Drag-and-Drop-Seiten-Builder von SeedProd sehen Sie auf der rechten Seite eine Vorschau Ihrer Website und auf der linken Seite ein Bearbeitungsfeld.

SeedProd Drag & Drop Seitenerstellung

Erstellen einer einseitigen Website-Kopfzeile

Um mit dem Aufbau Ihrer Website zu beginnen, müssen Sie zunächst einen neuen Bereich hinzufügen. Klicken Sie dazu auf das Symbol "Spalten hinzufügen" und dann auf ein Layout.

eine neue Spalte zu Ihrer einseitigen Website hinzufügen

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

Ein 3-Spalten-Layout hinzufügen

Ziehen Sie als nächstes den Block Bild aus dem linken Fenster auf Ihre neue Spalte, etwa so:

Fügen Sie einen Bildblock zu Ihrer einseitigen Website hinzu

Jetzt können Sie auf den Bildblock klicken und ein Logo aus Ihrer Mediathek oder von 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 Einstellungsfeld klicken.

SeedProd-Bildblock-Einstellungen

Lassen Sie uns nun die Menüpunkte neu erstellen. Hierfür verwenden wir den Nav Menu-Block von SeedProd. Ziehen Sie ihn in die zweite Spalte und fügen Sie die einzelnen Menüpunkte im Einstellungsfenster hinzu.

SeedProd Navigationsmenü

Sie sollten den Menütyp "Einfach" für dieses Design verwenden, da wir später Ankerlinks hinzufügen werden, mit denen die Benutzer zu verschiedenen Abschnitten der Seite springen können.

Der letzte Schritt in diesem Abschnitt ist das Hinzufügen einer Schaltfläche "Kaufen". Ziehen Sie dazu den Block "Schaltfläche" aus dem linken Fenster und fügen Sie ihn in Ihrer letzten Spalte ein.

SeedProd-Schaltflächenblock

Von dort aus können Sie die Schaltfläche mit Ihrer Kassenseite verknüpfen. Auf der Registerkarte "Erweitert" können Sie die Farbe, den Abstand und den Rahmen der Schaltfläche anpassen, indem Sie auf die Schaltfläche zeigen und klicken.

Einstellungen für den Schaltflächenstil

Wenn Sie mit der Kopfzeile Ihrer einseitigen Website zufrieden sind, klicken Sie auf Speichern.

Hinzufügen verschiedener Inhaltsabschnitte

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

  • Held
  • Vison
  • Gestaltung
  • Innovation
  • Materialien
  • Eigenschaften
  • Aufruf zum Handeln

Jeder Abschnitt erklärt einen anderen Aspekt des Produkts, ohne zu viel Platz einzunehmen. Außerdem hilft es den Lesern, die Seite zu durchlaufen, bis sie auf den Aufruf zum Handeln stoßen.

Die Erstellung der einzelnen Abschnitte ist mit SeedProd einfach.

Fügen Sie zunächst einen neuen einspaltigen Abschnitt hinzu, wie Sie es mit dem Kopfbereich getan haben. Ziehen Sie dann einen Bildblock darüber und laden Sie Ihr Logo noch einmal hoch.

Als nächstes müssen Sie den Überschriftenblock von SeedProd hinzufügen. Mit diesem Block können Sie die Überschriftenebene von H1 bis H6 einstellen. Sie können auch auf die Registerkarte "Erweitert" klicken, um die Schriftart, die Farben und die Abstände anzupassen.

Einstellungen des SeedProd-Kopfzeilenblocks

Wiederholen Sie diesen Schritt für jeden Abschnitt Ihrer einseitigen Website. Der folgende Abschnitt erfordert zum Beispiel ein zweispaltiges Layout, zwei Überschriftenblöcke, einen Bildblock und einen einfachen Textblock.

SeedProd einseitiger Website-Bereich

Die folgenden 2 Abschnitte sind identisch. Sie können Ihren ersten Abschnitt duplizieren und den Inhalt ändern, um es einfacher zu machen. Bewegen Sie dazu den Mauszeiger über einen Abschnitt und klicken Sie auf das Symbol zum Duplizieren.

Abschnitt seedprod duplizieren

Ihr neuer Abschnitt erscheint direkt unter dem ursprünglichen.

Die meisten einseitigen Websites verwenden Ankerlinks, um den Lesern die Navigation zu erleichtern, anstatt ein typisches Navigationsmenü zu verwenden. Auf diese Weise können die Nutzer zu dem Abschnitt springen, der sie am meisten interessiert.

Das Hinzufügen von Anker-Links mit SeedProd ist einfach. Sie müssen nur den Anker-Block finden und ihn auf den Abschnitt ziehen, auf den Sie verlinken möchten.

SeedProd-Ankerblock

Geben Sie dann im Einstellungsfenster Ihrem Anker einen Namen.

Einstellungen für Ankerblöcke

Verknüpfen wir nun den Abschnitt mit einem Menüpunkt. Klicken Sie dazu auf einen Menüpunkt, und geben Sie in das Feld "URL-Link" das Hashtag-Symbol und den Namen Ihres Ankers ein. In unserem Fall wäre das #visionsection.

Hinzufügen eines Anker-Links in seedprod

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

Hinzufügen eines Anmeldeformulars

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

Am einfachsten geht das mit dem Optin-Formularblock von SeedProd. Er fügt Ihrer Website ein anpassbares Formular hinzu, in das Nutzer ihre E-Mail-Adressen eingeben können, um Updates und Benachrichtigungen zu erhalten.

SeedProd Optin-Formular-Block

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

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

  • Soziale Profilsymbole für mehr Follower in Ihren sozialen Medien
  • Testimonials zur Stärkung von Vertrauen und Glaubwürdigkeit
  • Countdown-Timer zur Erzeugung von Dringlichkeit
  • Schaltflächen zum Hinzufügen zum Warenkorb, um Benutzer zur Kasse von WooCommerce zu leiten
SeedProd-Block mit Symbolen für soziale Medien

Die Möglichkeiten sind endlos, und es dauert nicht lange, bis Ihre Website so aussieht, wie Sie es wünschen.

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-Marketingdienst

Der nächste Schritt besteht darin, eine Verbindung zu Ihrem E-Mail-Marketingdienst herzustellen. Dies ist eine gute Idee, wenn Sie vorhaben, E-Mail-Adressen von Ihrer Website zu sammeln, um Ihre E-Mail-Liste aufzubauen.

seedprod E-Mail-Integrationen

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

In unserer Dokumentation zur E-Mail-Integration finden Sie spezifische Anweisungen zur Integration der einzelnen E-Mail-Marketingdienste.

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. 

SeedProd-Thema aktivieren

Stellen Sie dort den Schalter SeedProd-Theme aktivieren auf die Position Ein.

Sie können nun Ihre Website-Homepage besuchen und Ihre einseitige Website in Aktion sehen.

Hier ist noch einmal das Original:

Parodie-Website für Apple-Stecker.

Und hier ist die Website, die wir mit SeedProd erstellt haben:

Wie man eine einseitige Website in WordPress erstellt

Tolle Arbeit; Sie haben jetzt eine Website genau wie das Originalbeispiel erstellt. War das nicht einfach?

Sie wissen jetzt, wie Sie mit SeedProd eine einseitige Website in WordPress erstellen können. Das Tolle an SeedProd ist, dass Sie so viele verschiedene Arten von Layouts erstellen können, ohne auch nur eine einzige Zeile Code anzufassen.

Sind Sie bereit, eine individuelle einseitige Website zu erstellen?

Wenn Sie noch nicht bereit sind, Ihre Website für die Öffentlichkeit zugänglich zu machen, lesen Sie diesen Leitfaden zur Erstellung einer "Demnächst"-Seite in WordPress.

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

Autorenavatar
Stacey Corrin Autorin
Stacey schreibt seit über 10 Jahren über WordPress und digitales Marketing und noch viel länger über andere Themen. Darüber hinaus ist sie fasziniert von Webdesign, Benutzererfahrung und SEO.

Offenlegung: Unser Inhalt wird von den Lesern unterstützt. Das heißt, wenn Sie auf einige unserer Links klicken, erhalten wir möglicherweise eine Provision. Wir empfehlen nur Produkte, von denen wir glauben, dass sie einen Mehrwert für unsere Leser darstellen.