Eine Einzelseiten-Website liegt vor, wenn sämtliche Inhalte auf einer Seite leben und das Menü nicht zu anderen URLs führt: Beim Klick scrollt die Seite sanft zum gewünschten Block. Keine Neuladevorgänge, keine verlorenen Besucher. Klingt nach dem, was Sie für eine Landingpage, ein Portfolio oder eine Visitenkarte brauchen, nicht wahr?

Doch wenn es ernst wird, stößt ein Anfänger an zwei Mauern. Die erste: „Ich kann nicht programmieren." Die zweite: „Ich brauche wohl teure Plugins." Beide Mauern bröckeln innerhalb einer Stunde.

Sie erstellen eine vollwertige Einzelseiten-Website auf WordPress mit sanftem Scrollen, Ankerbereichen und ausschließlich mit kostenlosen Werkzeugen. Keine einzige Zeile Code.

Wenn Sie lieber schauen als lesen, hier eine visuelle Schritt-für-Schritt-Anleitung von der Installation bis zur Veröffentlichung:

💡 Kurzer Überblick:

• Installieren Sie XAMPP, einen lokalen Server, um WordPress auf Ihrem Rechner zu testen
• Bringen Sie WordPress auf einem lokalen Rechner zum Laufen, über phpMyAdmin und durch Bearbeiten der wp-config.php
• Wählen Sie ein Theme, das mit einer Einzelseiten-Struktur kompatibel ist (wir verwenden SiteOrigin North)
• Installieren Sie zwei kostenlose Plugins von SiteOrigin: Page Builder und Widgets Bundle
• Bauen Sie eine Seite aus fertigen Layouts zusammen, weisen Sie Anker-IDs zu und verknüpfen Sie diese mit Menüpunkten

Warum überhaupt eine Einzelseiten-Website

Eine Einzelseiten-Website ist einer klassischen mehrseitigen Website in bestimmten Szenarien überlegen. Sie steuern die Reihenfolge, in der ein Besucher Informationen aufnimmt: zuerst der Nutzen, dann der Preis, nicht umgekehrt. Kein Suchen nach Links im Menü.

Wann das funktioniert

Das Portfolio eines Fotografen, eine Dienstleistungs-Landingpage, eine Produkt-Promo-Seite, eine Unternehmensvisitenkarte mit fünf Bereichen, all das passt auf eine einzige Scroll-Seite. Sechs Blöcke mit je zwei bis drei Absätzen auf einer Seite wirken solide. Dieselben sechs Blöcke auf sechs verschiedenen Seiten wirken wie eine leere Hülle.

Mobil und Geschwindigkeit

Eine Einzelseiten-Website lädt einmal. Danach wird nur noch gescrollt. Ein Besucher kann mitten im Lesen die Internetverbindung verlieren und trotzdem bis zum Ende scrollen: Die Seite ist bereits im Speicher. Auf einem mobilen Bildschirm fühlt sich das wie eine App an, nicht wie eine Website. Google hat schon vor längerer Zeit bestätigt: Mobile-First-Indexierung ist seit 2018 der Standard.

Wann nicht

Hundert Blogartikel, ein komplexer Onlineshop, eine mehrstufige Struktur, das bewältigt eine Einzelseiten-Website nicht. Das Scrollen wird endlos, und die Suchmaschinenoptimierung leidet: Suchmaschinen lieben separate URLs für jeden Bedeutungskomplex.

Schritt 1: XAMPP unter Windows installieren

XAMPP ist ein kostenloses plattformübergreifendes Paket: Apache (Webserver), MariaDB (Datenbank), PHP und Perl. Einfach gesagt macht es Ihren Rechner zu einem lokalen Hosting, auf dem WordPress ohne Internet und ohne Bezahlung läuft. Ideal zum Testen und Lernen von Aufbauten.

Installationsablauf unter Windows:

• Rufen Sie die Apache Friends Website auf und laden Sie die neueste Version von XAMPP für Ihr System herunter.
• Führen Sie das Installationsprogramm aus. Klicken Sie auf dem Willkommensbildschirm auf Next.
• Lassen Sie bei der Komponentenauswahl die Häkchen bei MySQL und phpMyAdmin gesetzt, das genügt für WordPress. Die übrigen können Sie abwählen: Sie lassen sich bei Bedarf später über das Control Panel hinzufügen.

• Wählen Sie einen Installationsordner (Vorgabe ist C:\xampp, können Sie so belassen).
• Entfernen Sie auf dem Bitnami-Bildschirm das Häkchen bei „Learn more about Bitnami for XAMPP", wir installieren WordPress manuell. Klicken Sie auf Next.
• Warten Sie, bis die Dateien entpackt sind. Lassen Sie das Häkchen bei „Launch control panel" gesetzt und klicken Sie auf Finish.

Wenn sich das Control Panel ohne rote Fehler öffnete und Apache sowie MySQL grün hervorgehoben sind, läuft der Server. Öffnen Sie einen Browser und rufen Sie http://localhost/ auf. Wenn Sie die XAMPP-Willkommensseite sehen, ist alles korrekt eingerichtet.

Falls Apache nicht startet, prüfen Sie, ob Port 80 von einem anderen Programm belegt ist. Häufige Verursacher sind Skype und IIS. In den Apache-Einstellungen (Config → Apache → httpd.conf) können Sie den Port von 80 auf 8080 ändern.

Schritt 2: Datenbank anlegen und WordPress installieren

WordPress speichert alles, Seiten, Einstellungen, Benutzer, in einer MySQL-Datenbank. Legen wir sie über phpMyAdmin an.

• Klicken Sie im XAMPP Control Panel in der Zeile MySQL auf die Schaltfläche Admin. phpMyAdmin öffnet sich.
• Wechseln Sie oben links im Menü zum Reiter Databases.
• Geben Sie einen Datenbanknamen ein, zum Beispiel wordpress, und klicken Sie auf Create.

Die Datenbank ist bereit. Nun zu WordPress selbst:

• Laden Sie die neueste Version von WordPress herunter und entpacken Sie das Archiv in den Ordner C:\xampp\htdocs\wordpress (Sie können den Ordner anders benennen, dies wird Teil der lokalen URL).
• Suchen Sie im Ordner die Datei wp-config-sample.php und benennen Sie sie in wp-config.php um.
• Öffnen Sie die Datei in einem beliebigen Texteditor und suchen Sie den Block mit den MySQL-Einstellungen:

1
define('DB_NAME', 'wordpress');
2
define('DB_USER', 'root');
3
define('DB_PASSWORD', '');
4
define('DB_HOST', 'localhost');

• Speichern Sie die Datei und schließen Sie den Editor.
• Öffnen Sie im Browser http://localhost/wordpress/. Wählen Sie eine Sprache, erstellen Sie einen Benutzernamen und ein Passwort und klicken Sie auf WordPress installieren.

Fertig. Sie sind im WordPress-Adminbereich Ihrer lokalen Maschine angemeldet. Der erste Meilenstein ist erreicht.

Schritt 3: Auswahl eines Themes

Nahezu jedes Theme funktioniert für eine Single-Page-Website, aber wir verwenden SiteOrigin North. Es ist kostenlos, responsiv und auf die Zusammenarbeit mit dem Page Builder von SiteOrigin zugeschnitten, der im nächsten Schritt zum Einsatz kommt. Das Theme unterstützt ein fixiertes Menü, sodass Besucher nicht zurückscrollen müssen, um zu einem anderen Abschnitt zu navigieren.

Installation: Design → Themes → Neues Theme installieren → SiteOrigin North eingeben → Installieren → Aktivieren. Das Theme wird vom SiteOrigin-Team entwickelt, denselben Leuten, die auch das Page-Builder-Plugin erstellen. Konflikte wird es nicht geben.

Schritt 4: SiteOrigin-Plugins, Page Builder und Widgets Bundle

Das Kernstück unseres Aufbaus, zwei kostenlose Plugins aus dem WordPress-Repository:

• SiteOrigin Page Builder (siteorigin-panels), ein Drag-and-Drop-Builder mit Raster, Layouts und integrierter Single-Page-Scrolling-Funktionalität (seit Version 2.3). Live-Vorschau, saubere HTML-Ausgabe, über 500.000 aktive Installationen.
• SiteOrigin Widgets Bundle (so-widgets-bundle), ein Satz von Widgets: Buttons, Bilder, Slider, Karten, Preise und zwei Dutzend weitere Elemente. Alles, was Layouts mit Inhalten füllt.

Installation: Plugins → Installieren → nacheinander nach SiteOrigin Page Builder und SiteOrigin Widgets Bundle suchen → Installieren → Aktivieren Sie beide. Erst die Kombination dieser beiden Plugins liefert Ihnen sowohl den Builder als auch die Inhalte für Layouts. Die Anker-Scrollfunktion ist im Page Builder integriert, sodass keine zusätzlichen Plugins für die Einzelseiten-Funktionalität erforderlich sind.

Schritt 5: Eine Seite mit SiteOrigin Page Builder aufbauen

Legen Sie eine neue Seite an (Seiten → Erstellen). Oberhalb des Standard-Editors erscheinen Tabs, wechseln Sie zu Page Builder.

SiteOrigin Page Builder wird mit einer Bibliothek vorgefertigter Layouts ausgeliefert. Klicken Sie auf die Schaltfläche Layouts oberhalb des Editors.

Es öffnet sich ein Katalog mit Vorlagen, von Fitness Gym bis Agency. Wählen Sie eine passende aus (wir haben Fitness Gym gewählt) und klicken Sie auf Einfügen. Falls sich bereits Inhalte auf der Seite befanden, fragt das Plugin, ob es davor, danach einfügen oder ersetzen soll. Bei einer leeren Seite spielt das keine Rolle.

Speichern Sie die Seite und rufen Sie sie auf. Wechseln Sie in den **Live **Editor, der entsprechende Link erscheint in der oberen WordPress-Admin-Leiste.

Im Live Editor fahren Sie mit der Maus über ein beliebiges Element und sehen sofort, welches Widget dafür verantwortlich ist. Sie können Texte bearbeiten, Bilder austauschen und Blöcke verschieben, und das alles in Echtzeit.

Schritt 6: Anker-IDs und Navigationsmenü

Der letzte Schritt besteht darin, Menüpunkte mit Seitenabschnitten zu verknüpfen. Ohne dies funktioniert das Scrollen nicht.

Bewegen Sie im Live Editor den Mauszeiger über die erste Zeile nach dem Hero-Block, klicken Sie auf das Schraubenschlüssel-Symbol und wählen Sie Zeile bearbeiten. Wechseln Sie zum Tab Attribute und geben Sie im Feld Zeilen-ID eine Kennung ein, zum Beispiel activities. Klicken Sie auf Fertig.

Wiederholen Sie dies für jede Zeile mit einer eindeutigen ID: services, dann pricing, dann contact und so weiter. Speichern Sie die Seite.

Nun zum Menü: Design → Menüs. Erstellen Sie ein neues Menü. Fügen Sie Einträge über Benutzerdefinierte Links hinzu: Geben Sie im URL-Feld #activities ein, im Namensfeld „Activities". Wiederholen Sie dies für jede ID.

Wichtige Nuance: Die Raute # ist in der Menüpunkt-URL zwingend erforderlich (dies ist das HTML-Ankerformat), aber in der Zeilen-ID innerhalb des Page Builders müssen Sie die Raute nicht angeben, der Builder versteht von selbst, dass es sich um eine Kennung handelt.

Weitere Details zum Erstellen von Menüs in WordPress finden Sie in unserem Leitfaden zur Einrichtung der Navigation.

Speichern Sie das Menü, weisen Sie es einem Theme-Anzeigebereich zu und öffnen Sie die Website. Klicken Sie auf einen Menüpunkt, und die Seite scrollt sanft zum gewünschten Abschnitt.

⁉️🤔 Häufig gestellte Fragen

Ist XAMPP zwingend erforderlich oder kann ich direkt mit dem Hosting beginnen?

XAMPP wird für lokale Tests benötigt. Wenn Sie bereits ein Hosting mit WordPress haben, überspringen Sie die Schritte 1 und 2 und beginnen Sie direkt mit Theme und Plugins. Die Ankerlogik funktioniert lokal und auf einem Live-Server auf dieselbe Weise.

Kann ich ein anderes Theme anstelle von SiteOrigin North verwenden?

Ja, fast jedes moderne WordPress-Theme unterstützt die Single-Page-Struktur. Die Hauptsache ist, dass das Theme nicht mit dem SiteOrigin Page Builder in Konflikt steht. Die Page-Builder-Entwickler garantieren die Kompatibilität mit den meisten Themes aus dem WordPress-Repository.

Funktioniert dieses Setup auf Mac oder Linux?

XAMPP ist plattformübergreifend, es gibt Versionen für Windows, macOS und Linux. Auf dem Mac können Sie auch MAMP (kostenlose Version) verwenden. Die Installation von WordPress und Plugins nach dem Einrichten eines lokalen Servers ist auf allen Betriebssystemen identisch.

Was tun, wenn Apache nicht startet?

Die beiden häufigsten Gründe: Port 80 ist durch ein anderes Programm belegt (Skype, IIS, ein anderer Webserver) oder ein Antivirenprogramm blockiert die Netzwerkaktivität. Lösung: Ändern Sie den Apache-Port in httpd.conf auf 8080 oder beenden Sie den störenden Prozess über netstat -ano | findstr :80 in der Befehlszeile.

Kann ich später weitere Abschnitte hinzufügen?

Ja. Gehen Sie jederzeit in den Page Builder, fügen Sie eine neue Zeile hinzu, weisen Sie ihr eine Zeilen-ID zu und erstellen Sie einen Menüpunkt mit demselben Anker. Der Builder begrenzt die Anzahl der Abschnitte nicht.

Was Sie in einer Stunde erreicht haben

Eine funktionierende Single-Page-Website auf WordPress. Mit einem Ankermenü, sanftem Scrollen, Live-Editor und vollständig mit kostenlosen Werkzeugen. Dasselbe XAMPP- und SiteOrigin-Setup funktioniert auch für kommerzielle Projekte: Erstellen Sie eine Landingpage lokal, testen Sie sie und übertragen Sie sie mit einem beliebigen Migrations-Plugin auf das Live-Hosting.

Machen Sie es sich zur Regel: zuerst lokaler Aufbau, dann Produktion. Das spart Geld für Hosting während der Experimentierphase und schont die Nerven, wenn etwas schiefgeht.

Wenn das Material hilfreich war, versuchen Sie noch heute, Ihre erste Single-Page-Website zu erstellen. XAMPP und WordPress sind in fünf Minuten heruntergeladen, und der SiteOrigin Builder übernimmt das gesamte Layout.