Wie man eine einseitige Website mit WordPress erstellt

Viele erfolgreiche Websites sind große, komplexe Angelegenheiten mit vielen Seiten und Inhalten. Doch manchmal ist in der Welt des Webdesigns weniger wirklich mehr. Deshalb kann es sich für Sie lohnen, statt eines traditionellen Ansatzes eine einseitige Website mit WordPress zu erstellen.

In diesem Artikel gehen wir näher auf die Vorteile und Anwendungen dieser Art von Website ein. Dann zeigen wir Ihnen, wie Sie eine einseitige Website mit WordPress in nur drei Schritten erstellen können. Fangen wir an!

📚 Inhaltsverzeichnis:

Warum Sie eine einseitige Website erstellen sollten

Die meisten Websites haben mehrere Seiten. Zumindest gibt es in der Regel eine Homepage, eine Kontaktseite, eine Info-Seite und Seiten für die Inhalte oder Dienstleistungen, die Sie anbieten.

Eine einseitige Website hingegen fasst alle wichtigen Informationen auf einer einzigen Homepage zusammen, oft mit einer Reihe von speziellen Abschnitten. Das Design einer einseitigen Website bietet eine Reihe von Vorteilen, wie z. B.:

• Einfachheit, die es den Besuchern erleichtert, sich auf Ihrer Website zurechtzufinden und das zu finden, was sie brauchen.
• Einfache Wartung, da nur sehr wenig Inhalt zu pflegen ist.

Natürlich ist ein einseitiges Design nicht die richtige Wahl für jede Website. Große, komplexe Websites haben ihre Berechtigung. Wenn Sie jedoch eine kleine Unternehmenswebsite, ein Portfolio oder ein einfaches Schaufenster betreiben, sollten Sie dieses Format in Erwägung ziehen.

Die wesentlichen Elemente einer einseitigen Website

Wenn Ihre Website nur eine einzige Seite umfasst, müssen Sie sich sehr genau überlegen, was Sie aufnehmen. Es ist wichtig, dass Sie alle Informationen bereitstellen, die Ihr Publikum braucht, ohne die Seite zu überladen oder es zu überfordern. Alles, was Sie auf Ihrer Seite hinzufügen, sollte einen Grund haben.

Hier sind einige der wichtigsten Elemente, wenn Sie eine einseitige Website erstellen möchten:

• Ein hervorgehobener Aufruf zum Handeln (CTA), z. B. eine Schaltfläche zum Anmelden, Kontaktieren oder Kaufen.
• Ein Abschnitt über Sie, der erklärt, wer Sie, Ihr Unternehmen oder Ihre Organisation sind.
• Markenelemente wie Ihr Logo und Ihr Slogan.
• Eine Liste von Produkten oder Dienstleistungen, falls relevant.
• Links zu Ihren anderen Orten und Inhalten im Web, einschließlich Social-Media-Profilen.
• Kontaktinformationen, wenn möglich über verschiedene Kanäle.

Es ist auch wichtig, auf die Reihenfolge dieser Elemente zu achten. Im Allgemeinen sollten Sie die wichtigsten Informationen und CTAs am Anfang der Seite platzieren, während Kontaktinformationen und Links weiter unten auf der Seite zu finden sind. Überlegen Sie, was Ihr Publikum in welcher Reihenfolge sehen muss, und das wird Ihnen dabei helfen, zu entscheiden, welche Elemente Sie einfügen und wie Sie sie anordnen.

Schließlich – nur weil Sie eine einseitige Website gestalten, bedeutet das nicht unbedingt, dass Sie keinen Blog haben können. Wenn Sie dennoch einen Blog einrichten möchten, können Sie mit WordPress von Ihrer einseitigen Homepage aus einen Link zu Ihrem Blog einrichten.

Wie Sie eine einseitige Website erstellen (genaue Schritte)

Nun lassen Sie uns darüber sprechen, wie Sie Ihre Website tatsächlich gestalten. Als Erstes sollten Sie sich einige Beispiele für einseitige Websites ansehen, um sich zu inspirieren. Dann fahren Sie mit dem ersten Schritt fort.

Schritt 1: Bestimmen Sie den Schwerpunkt Ihrer Website

Wie wir bereits besprochen haben, bedeutet die Entscheidung, eine einseitige Website zu erstellen, dass Sie sich über das Design Gedanken machen müssen. Dazu gehört auch, dass Sie sich über die Ziele im Klaren sind. Wenn Sie sich auf eine einzige Seite beschränken, sollten Sie sich auf ein oder zwei wichtige Dinge konzentrieren.

Überlegen Sie sich dazu die primäre CTA, um die herum Ihre Website gestaltet wird. Was sollen die Besucher tun – sich für eine Mitgliedschaft anmelden, ein Produkt kaufen, an einer Veranstaltung teilnehmen oder Sie für einen Job engagieren? Alles auf Ihrer Seite sollte die Besucher dazu ermutigen, diese Aktion durchzuführen. Das bedeutet, dass Sie die erforderlichen Informationen bereitstellen, die Vorteile erläutern und die nächsten Schritte deutlich machen.

Schritt 2: Wählen Sie ein hochwertiges One-Page-Theme

Wenn Sie sich entschieden haben, eine One-Page-Website in WordPress zu erstellen, können Sie jedes beliebige Theme verwenden. Eine kluge Strategie ist es jedoch oft, ein One-Page-Theme zu wählen, das speziell für die Gestaltung dieser Art von Website entwickelt wurde. Diese Themes machen es einfach, alle notwendigen Informationen einzubinden und gleichzeitig ein attraktives Design beizubehalten.

Wenn Sie sich für ein One-Page-Theme entscheiden, sollten Sie auf Folgendes achten:

• Ein Page Builder mit vorgefertigten Elementen, die Sie benötigen, wie z. B. ein Kontaktbereich.
• Eine Methode, mit der Sie Ihre Seite in mehrere Abschnitte unterteilen können, die sich optisch voneinander unterscheiden lassen.
• Navigation, mit der Besucher zu verschiedenen Abschnitten innerhalb Ihrer Seite springen können.
• Eine einfache Möglichkeit, CTA-Schaltflächen hinzuzufügen und sie zu personalisieren.

Es gibt viele einseitige Themen. Neve zum Beispiel ist ein Mehrzweck-Theme, das sich perfekt für übersichtliche, aber umfassende One-Page-Sites eignet. Es ist mit vielen beliebten Page Buildern kompatibel, enthält einen Live-Customizer und hilft Ihnen, Ihre One-Page-Site schnell einzurichten. Außerdem enthält es vorgefertigte Abschnitte für Kontaktinformationen, Ihre Biografie, ein Schaufenster und vieles mehr.

Schritt 3: Gestalten Sie Ihre Seite

Wenn Sie wissen, was Sie auf Ihrer Seite einfügen möchten, sich über den Schwerpunkt im Klaren sind und ein starkes Thema gewählt haben, können Sie mit der eigentlichen Gestaltung der Seite beginnen. Sie soll für Ihr Publikum geeignet sein, Ihren Stil widerspiegeln und Ihre Ziele erfüllen – das bedeutet, dass Sie nicht einfach einer Formel folgen sollten.

Hier sind jedoch einige Vorschläge, die Sie bei der Zusammenstellung Ihrer Seite beachten sollten:

• Halten Sie Ihre Seite einfach und fügen Sie nichts ein, was nicht einem bestimmten Zweck dient
• Unterscheiden Sie deutlich zwischen verschiedenen Abschnitten mit einer Vielzahl von Überschriften, Hintergründen usw.
• Erstellen Sie eine Navigation, die die Besucher schnell zu den benötigten Abschnitten führt.
• Machen Sie Ihre primären CTAs auffällig und überzeugend.

Wenn Sie diese Ratschläge befolgen, können Sie in kürzester Zeit eine großartige einseitige Website erstellen.

Nun lassen Sie uns über die Werkzeuge sprechen. Wie können Sie eine großartige One-Page-Website so effizient und schnell wie möglich erstellen?

Erstellen Sie Ihre One-Page-Website mit Elementor

Elementor ist ein einfach zu bedienender, funktionsreicher Page-Builder, mit dem Sie eine beliebige Anzahl von Seiten innerhalb einer WordPress-Website erstellen können. Das macht es zum perfekten Werkzeug, um eine großartige One-Page-Website zu erstellen.

In den folgenden Abschnitten zeigen wir Ihnen, wie Sie das machen. Das Beispiel, das wir verwenden, ist eine Website für einen Obst- und Gemüseladen. Die Website besteht aus:

• einer Seite mit vielen Abschnitten, in denen der Inhalt untergebracht ist
• einem Menü, auf das die Besucher klicken können, um direkt zu den entsprechenden Abschnitten zu gelangen
• einem Header, in dem das Logo und das Menü untergebracht sind
• einem Footer

Hier ist eine Vorschau, wie die Website am Ende aussehen wird:

Wir werden jeden Schritt im Detail durchgehen, aber hier ist der grundlegende Prozess:

1. Installieren Sie das kostenlose Neve-Theme.
2. Installieren Sie das Elementor-Plugin, falls Sie es noch nicht haben.
3. Richten Sie die „Leinwand“ Ihrer Website ein – Kopfzeile, Fußzeile und Menü.
4. Fügen Sie Ihre Inhalte mit Elementor hinzu.
5. Verknüpfen Sie das Menü mit verschiedenen Abschnitten in Ihrem Design, um den Effekt einer einseitigen Navigation zu erzeugen.
6. Stellen Sie Ihr Design als Startseite Ihrer Website ein.

Installieren Sie das kostenlose Neve-Theme

• Gehen Sie in Ihrem WordPress-Dashboard zu Erscheinungsbild → Themes → Neu hinzufügen.
• Suchen Sie nach „Neve“
• Klicken Sie auf die Schaltfläche Installieren
• Wenn WordPress das Theme installiert hat, Klicken Sie auf Aktivieren, um es in Betrieb zu nehmen

Installieren Sie das kostenlose Elementor Plugin

• Gehen Sie zu Plugins → Neu hinzufügen
• Suchen Sie nach „Elementor“
• Installieren und aktivieren Sie das kostenlose Elementor Page Builder Plugin.

Nun, mit einer sauberen WordPress-Installation, aktivem Neve-Theme und dem Elementor Page Builder, bist du bereit, deine einseitige Website zu erstellen.

Kopfzeile, Fußzeile und Menü einrichten

Sie verwenden das Neve-Theme, um die Kopf- und Fußzeile und das Menü Ihrer einseitigen Website einzurichten.

Kopfzeile

Gehen Sie zum WordPress-Dashboard und klicken Sie auf Darstellung → Themes → Anpassen, um das Neve-Theme anzupassen:

Zuerst wählst du die Farben und den Hintergrund für die Website aus

Nächstens klickst du im Anpassungsfeld auf Kopfzeile → Logo ändern und fügst das Logo deiner Website hinzu. Passen Sie die Breite des Logos an, fügen Sie den Site-Titel, das Site-Symbol und einen Slogan hinzu. Legen Sie fest, ob der Site-Name und die Tagline in der Kopfzeile angezeigt oder ausgeblendet werden sollen.

Wählen Sie auf der Registerkarte „Layout“ ein Layout für die Kopfzeile sowie die Farbe und legen Sie die Polsterung und die Ränder fest. Alternativ können Sie auch eine der Kopfzeilenvorgaben wählen.

Menü

Als Nächstes müssen Sie das Navigationsmenü erstellen, das in Ihrer Kopfzeile angezeigt werden soll. Klicken Sie dazu auf Menüs → Neues Menü erstellen. Geben Sie dem Menü einen Namen und setzen Sie die Menüposition auf „Primäres Menü“.

Klicken Sie auf „Weiter“ und „Elemente hinzufügen“. Geben Sie hier die Namen der Abschnitte ein, die Sie erstellen möchten. Zum Beispiel: Main, About Us, Products und Contact. Klicken Sie dazu auf die Schaltfläche Benutzerdefinierte Links.

Geben Sie in das URL-Feld einen Hashtag ein, gefolgt von dem Namen des Abschnitts. Später, wenn Sie Elementor einrichten, werden Sie es so konfigurieren, dass diese Links zu bestimmten Abschnitten in Ihrem Design führen. Zum Beispiel:

• #about-us
• #products
• #contact

Footer

Gehen Sie zur Fußzeile und fügen Sie Text und Hintergrundfarbe hinzu. Sie können hier jeden beliebigen Inhalt hinzufügen:

Klicken Sie auf Veröffentlichen, um alle Änderungen zu speichern

In diesem Stadium hat Ihre Website eine Kopfzeile, eine Fußzeile und ein Menü. Sie sollte in etwa wie unten aussehen. Jetzt können Sie Elementor verwenden, um den Inhalt zwischen Kopf- und Fußzeile hinzuzufügen:

Erstellen Sie eine neue Seite und fügen Sie Inhalte mit Elementor hinzu

Um zu beginnen, gehen Sie zu Seiten → Neu hinzufügen, um eine neue Seite zu erstellen. Geben Sie der Seite einen Namen. Wenn das Thema über Seitenleisten verfügt, werden auch diese angezeigt. Sie können die Seitenleisten jedoch ausblenden, indem Sie die Seitenattribute auf volle Breite einstellen.

Klicken Sie auf der neuen Seite, die sich öffnet, auf Bearbeiten mit Elementor. Es öffnet sich ein Panel auf der linken Seite. Auf der rechten Seite befindet sich der Bearbeitungsbereich, in dem Sie sehen, wie die Website Gestalt annimmt.

Eine kurze Einführung in die Elementor-Benutzeroberfläche

Bevor wir weitermachen, werfen wir einen Blick auf das Elementor-Panel. Es bietet viele kreative Elemente oder Widgets wie Überschriften, Absätze, Bilder oder Videos. Du kannst diese zu deinem Inhalt hinzufügen, indem du sie rüberziehst.

Oben links im Panel befindet sich das Hamburger-Menü, das dir viele Optionen bietet. Hier können Sie Farben, Schriftarten und den Stil des Themas auf globaler Ebene anpassen. Das spart natürlich eine Menge Zeit beim Hinzufügen neuer Seiten.

Von dieser Registerkarte aus können Sie auch jederzeit zum WordPress-Dashboard zurückkehren.

Unten im Panel gibt es Optionen zum Anpassen der Seiteneinstellungen, zum Benennen der Seite, zum Anzeigen des Bearbeitungsverlaufs und zum Wechseln zwischen responsiven Modi. Außerdem gibt es einen Navigator, der eine übersichtliche Ansicht der Seite zeigt.

Mit einem Klick auf das Augensymbol können Sie eine Vorschau der Seite anzeigen, und wenn Sie bereit sind, die Seite zu veröffentlichen, klicken Sie auf die Schaltfläche Veröffentlichen.

Jetzt ist es an der Zeit, Inhalte hinzuzufügen.

Zwei Möglichkeiten, eine einseitige Website mit Elementor zu erstellen

In diesem Stadium können Sie die einseitige Website mit Elementor auf zwei Arten erstellen:

1. Fügen Sie eine der vorgefertigten Vorlagen von Elementor ein und passen Sie sie dann wie gewünscht an. Klicken Sie dazu in der Live-Vorschau Ihres Designs auf das Ordnersymbol und es öffnet sich eine Reihe von Vorlagen, einige kostenlos, viele professionell. Auf der Registerkarte Seiten finden Sie komplett fertige Designs für ganze Seiten. Auf der Registerkarte Blöcke finden Sie vorgefertigte Vorlagen für bestimmte Abschnitte einer größeren Seite (dies ist am nützlichsten für eine einseitige Website).

Sie können jede Vorlage einfügen, indem Sie auf sie klicken. Dann können Sie jedes Element vollständig anpassen.

2. Alternativ können Sie ganz von vorne beginnen, indem Sie auf die Plus-Schaltfläche klicken, um einen Abschnitt hinzuzufügen und Ihr Design von einer leeren Leinwand aus zu erstellen.

Für die Zwecke dieses Tutorials werden wir eine Kombination aus beiden Methoden anwenden – wir werden den ersten Abschnitt unserer Website von Grund auf neu erstellen und dann aus Vorlagenblöcken wählen, um die restlichen Abschnitte auszufüllen.

Wie man Abschnitte der einseitigen Website mit Elementor erstellt

Elementor verwendet Abschnitte, Spalten und Widgets, um das Layout jeder Seite zu erstellen. Abschnitte sind die größten Bausteine, in die Sie Spalten einfügen können. Innerhalb dieser Abschnitte oder Spalten können Sie dann die gewünschten Widgets hinzufügen.

Klicke auf das ‚+‘-Zeichen, um einen Abschnitt hinzuzufügen und wähle die Spaltenstruktur.

Wenn Sie den Mauszeiger über einen Abschnitt bewegen, erscheint ein blauer Rahmen mit einem Griff am oberen Rand. Mit diesem Griff können Sie einen neuen leeren Abschnitt über dem bestehenden Abschnitt hinzufügen oder einen Abschnitt bearbeiten/löschen. Wenn Sie auf die Punkte in der Mitte klicken, haben Sie Zugriff auf die Abschnittssteuerungen – Layout, Stil und Erweitert. Außerdem können Sie die Abschnitte nach oben oder unten verschieben, indem Sie an den Punkten ziehen, und mit der rechten Maustaste klicken, um weitere Optionen wie Duplizieren oder Löschen aufzurufen.

In ähnlicher Weise können Sie auf den Griff mit dem Spaltensymbol in der oberen Ecke klicken, um Spaltenlayouts innerhalb des Abschnitts auszuwählen. Sie können auch die Breite der Spalten und den Abstand zwischen ihnen einstellen. Klicken Sie mit der rechten Maustaste auf die Kästchen, um weitere Spalten hinzuzufügen, vorhandene zu duplizieren, zu löschen und vieles mehr.

Im Elementor-Bedienfeld können Sie jedes beliebige Element (ein sogenanntes Widget) in die Spalte ziehen. Sobald Sie ein Element zu einer Spalte oder einem Abschnitt hinzufügen, erscheint ein Stift-Symbol in der oberen rechten Ecke. Klicken Sie auf dieses Symbol, um im Elementor-Panel die Optionen für Inhalt, Styling und erweiterte Bearbeitung aufzurufen.

Wie man den ersten Abschnitt erstellt

Wir verwenden den ersten Abschnitt, um die Besucher über die Art des Unternehmens und ein wenig darüber zu informieren. Zu diesem Zweck können Sie die volle Breite des Abschnitts nutzen, um ein Hintergrundbild unterzubringen. Während Sie das Layout des Abschnitts bearbeiten, können Sie die Breite des Inhalts anpassen und den Abschnitt auf die gesamte Breite der Seite ausdehnen, indem Sie einfach eine Schaltfläche umschalten.

Um das Hintergrundbild hinzuzufügen, wählen Sie die Option Abschnitt bearbeiten, indem Sie auf die Punkte im Griff klicken. Gehen Sie auf die Registerkarte Stil, die im Panel erscheint, und laden Sie das Bild aus der Mediathek hoch. Passen Sie die Größe des Bildes sowie die Überlagerung an.

Wir fügen eine einzelne Spalte in den Abschnitt ein und zentrieren sie innerhalb des Abschnitts. Innerhalb der Spalte werden wir drei Widgets verwenden – eine Überschrift, die den Besuchern mitteilt, dass Sie frisches Obst und Gemüse verkaufen, einen Texteditor, der die Aufmerksamkeit auf die Lieferoptionen nach Hause lenkt, und eine Schaltfläche, über die Besucher eine Bestellung aufgeben können.

Hinzufügen eines Überschrift-Widgets:

Ziehen eines Text-Widgets:

Hinzufügen des Button-Widgets:

Jetzt können Sie jedes Widget mithilfe der Bearbeitungsoptionen anpassen.

Wenn Sie möchten, können Sie die Widgets auch in drei separaten Spalten hinzufügen, indem Sie auf das Spaltensymbol klicken. Wichtig ist hier, dass jedes Widget in Bezug auf Layout, Stil und mehr genau angepasst werden kann.

Erstellen Sie die verbleibenden Abschnitte

Nun, da der erste Abschnitt fertig ist, können Sie zu den verbleibenden drei übergehen – Über uns, Produkte und Kontakt.

Wie bereits erwähnt, werden wir vorgefertigte Vorlagenblöcke aus der Elementor-Bibliothek verwenden, um diese drei Abschnitte zu erstellen. Elementor hat viele kostenlose Vorlagenblöcke in jeder dieser Kategorien und die Bibliothek ist durchsuchbar.

Für den Abschnitt „Über uns“ wählen wir einen einfachen Vorlagenblock mit einer Überschrift, einem Texteditor und einem Video-Widget. Sie können dies alles durch eigene Inhalte ersetzen.

Der Vorlagenblock mit dem ersetzten Inhalt:

Auf dieselbe Weise können Sie Vorlagenblöcke für die Abschnitte Produkte und Kontakt verwenden. Die Vorlage für den Bereich „Kontakt“ enthält Symbole für soziale Medien. Klicken Sie auf die Registerkarte „Stil“, um die Farbe, die Größe, die Polsterung und vieles mehr der Icons zu steuern.

Da Elementor ein hohes Maß an Anpassung erlaubt, können Sie diese Abschnitte anders aussehen lassen als die importierten Vorlagen.

Wenn Sie die gewünschten Änderungen vorgenommen haben, klicken Sie auf die grüne Schaltfläche „Veröffentlichen“ und die Änderungen werden auf der Website live geschaltet.

Verknüpfen Sie das Menü mit den einseitigen Abschnitten

Um ein klickbares Navigationsmenü zu haben, müssen Sie die verschiedenen Abschnitte in Ihrem Elementor-Design mit dem Navigationsmenü verbinden, das Sie in Schritt #3 erstellt haben. Öffnen Sie dazu die ID eines Abschnitts und gehen Sie auf die Registerkarte Erweitert. Geben Sie im CSS-ID-Feld des Elementor-Panels im entsprechenden Abschnitt den korrekten Abschnittsnamen ohne den Hashtag ein.

Wenn Ihr Menü beispielsweise auf #about-us verlinkt, würden Sie die CSS-ID als about-us hinzufügen. Dann wiederholen Sie den Vorgang für alle Abschnitte, auf die Sie verlinken möchten:

Setzen Sie Ihr Design als Startseite

Als letzten Schritt können Sie die soeben erstellte Seite als Startseite der mit Elementor erstellten einseitigen Website einrichten. Gehen Sie dazu zu Einstellungen → Lesen. Klicken Sie unter Your homepage displays auf Select a static page und wählen Sie das Design aus, das Sie erstellt haben. Klicken Sie abschließend auf Änderungen speichern.

Wenn Sie bei einem Schritt nicht weiter wissen, finden Sie hier eine ausführliche Anleitung zum Einrichten einer statischen WordPress-Homepage.

Schließlich ist Ihre einseitige Website jetzt fertig. Hier ist ein Beispiel dafür, wie sie aussehen könnte:

Abschluss

Hier sind drei einfache Schritte, die es Ihnen ermöglichen, noch heute eine einseitige Website zu erstellen:

1. Bestimmen Sie den Schwerpunkt Ihrer Website.
2. Wählen Sie ein hochwertiges einseitiges Thema, wie z. B. Neve.
3. Gestalten Sie Ihre Website bei Bedarf mit Elementor.