Kompatibilität:

WebSite X5 Evo und Pro

Eine Website muss nicht zwangsläufig aus vielen Seiten bestehen. In einigen Fällen kann eine einfache und unmittelbare Struktur, die Besucher entlang eines einzigen Pfads führt, deutlich effektiver sein.


„One-Page“- oder einseitige Websites wurden genau mit diesem Ziel entwickelt: alle wichtigen Inhalte auf einer einzigen Seite zu sammeln, die in Abschnitte unterteilt ist und über das Navigationsmenü leicht erreicht werden kann.


Diese Lösung eignet sich besonders für:

  • einfache Präsentations-Websites;
  • Landingpages;
  • Portfolios;
  • Unternehmenspräsentationen;
  • Veranstaltungen;
  • lokale Unternehmen;
  • Freiberufler und Selbstständige.


Dank der Scroll-Navigation können Besucher schnell von einem Abschnitt zum nächsten wechseln, ohne die Seite zu wechseln, wodurch die Nutzung flüssiger und unmittelbarer wird.


Auch mit WebSite X5 können Sie ganz einfach eine One-Page-Website erstellen, indem Sie Anker-Menüs und eine interne Navigationsstruktur innerhalb der Seite verwenden.


Mehrere Templates von WebSite X5 nutzen bereits diesen Ansatz, wie zum Beispiel GeenoPanino, PetsVet oder CV Power. 


Die wichtigsten Schritte sind:


#tip - Eine One-Page-Website kann eine sehr effektive Lösung sein, wenn Sie wenige Informationen klar, schnell und auch auf Smartphones leicht zugänglich präsentieren möchten.


Wie erstellt man Schritt für Schritt eine One-Page-Website?

Der erste Schritt besteht darin, eine für eine einseitige Website geeignete Struktur vorzubereiten. 


Bei dieser Art von Projekt gibt es nur eine echte Seite: die Home Page. Die Menüeinträge dienen stattdessen dazu, zwischen den verschiedenen Abschnitten derselben Seite zu wechseln.


So richten Sie die Struktur ein:

  • Öffnen Sie ein neues Projekt und wechseln Sie zu Schritt 3 - Erstellung der Sitemap.
  • Löschen Sie alle standardmäßig vorhandenen Seiten und lassen Sie nur die Home Page bestehen.
  • Verwenden Sie Ebenen, um die Einträge des Navigationsmenüs zu erstellen.


Zum Beispiel können Sie eine Website mit folgenden Abschnitten erstellen:

  • Willkommen
  • Dienstleistungen
  • Kontakte


Gehen Sie dazu wie folgt vor:

  • Klicken Sie auf die Schaltfläche Neue Ebene.
  • Benennen Sie die Ebene mit dem Namen des Abschnitts, den Sie erstellen möchten („Willkommen“).
  • Wiederholen Sie den Vorgang für alle Menüeinträge.

Auf diese Weise erstellen Sie die Navigationsstruktur der One-Page-Website.


Sobald die Struktur fertig ist:

  • Wählen Sie die Home Page aus.
  • Klicken Sie auf Weiter, um zu Schritt 4 - Erstellung der Seite zu gelangen.


#tip - Bei One-Page-Websites empfiehlt es sich, das Menü einfach und mit wenigen Einträgen zu halten, damit die Navigation möglichst direkt bleibt.


2. Erstellen Sie die Seitenabschnitte

An diesem Punkt können Sie die Inhalte Ihrer einzigen Seite erstellen. 


In unserem Beispiel: 

  • „Willkommen“ wird ein einleitender Abschnitt sein; 
  • „Dienstleistungen“ beschreibt das Angebot; 
  • „Kontakte“ enthält Kontaktdaten und ein Kontaktformular.  


Mit WebSite X5 können Sie diese Abschnitte ganz normal innerhalb der Home Page erstellen, indem Sie Textobjekte, Bilder, Galerien, Kontaktformulare usw. verwenden. Der wichtigste Teil besteht jedoch darin, die Anker einzufügen.


Anker sind interne Verweise, die bestimmte Punkte auf der Seite kennzeichnen und es dem Menü ermöglichen, Besucher beim Scrollen automatisch zum richtigen Abschnitt zu führen.


Sie müssen daher für jeden Abschnitt der Website einen Anker erstellen.


So fügen Sie den ersten Anker ein:

  • Wählen Sie das erste Objekt des Abschnitts aus.
  • Klicken Sie auf Anker > Anker einfügen.
  • Vergeben Sie einen Namen für den Anker, zum Beispiel „Willkommen“.
  • Wiederholen Sie denselben Vorgang für die Abschnitte „Dienstleistungen“ und „Kontakte“.


Am Ende haben Sie eine einzelne Seite, die in mehrere über Anker navigierbare Abschnitte unterteilt ist.


Versuchen Sie, visuell klar unterscheidbare Abschnitte mit unterschiedlichen Farben, Abständen und Bildern zu erstellen: Dadurch wird Besuchern die Orientierung beim Scrollen erleichtert.


#tip - Alles Wissenswerte zur Erstellung und Verwaltung von Ankern finden Sie in der Anleitung Wie richtet man einen Link zu einem Anker ein?


Nun müssen Sie die Menüeinträge mit den jeweiligen Ankern verknüpfen.


Dieser Schritt ermöglicht es dem Menü, Besucher automatisch zum richtigen Abschnitt der Seite zu führen.


So verknüpfen Sie einen Menüeintrag:

  • Gehen Sie zurück zu Schritt 3 - Erstellung der Sitemap.
  • Wählen Sie die Ebene „Willkommen“ aus.
  • Klicken Sie auf die Schaltfläche Eigenschaften.
  • Klicken Sie im Fenster Eigenschaften der Ebene auf das Symbol Verknüpfung. 
  • Wählen Sie im Fenster Verknüpfung den Eintrag Seite der Website aus.
  • Um die Verknüpfung abzuschließen, wählen Sie zuerst die Home Page aus und legen anschließend den internen Anker der Seite fest, indem Sie „Willkommen“ auswählen.
  • Bestätigen Sie mit einem Klick auf Ok.
  • Wiederholen Sie dieselben Schritte, um auch die Ebenen „Dienstleistungen“ und „Kontakte“ mit den entsprechenden Ankern zu verknüpfen.


Jetzt ist Ihre One-Page-Website fertig. Wenn Besucher auf einen Menüeintrag klicken, scrollt die Seite automatisch und der entsprechende Abschnitt wird direkt erreicht. Dadurch wird die Navigation flüssig und unmittelbar.


#tip - Wenn die Website besonders lang ist, können Sie die Navigation zusätzlich verbessern, indem Sie eine Sticky Bar verwenden, damit das Menü beim Scrollen immer sichtbar bleibt (siehe: Sticky Bar. Wie erstellt man eine Navigationsleiste, die beim Scrollen immer sichtbar bleibt?). 


#tip -  Um modernere und ansprechendere Scroll-Effekte zu erstellen, können Sie auch die Funktion Full Height verwenden (siehe: Wie verwendet man die Eigenschaft Full Height, um ein kartenbasiertes Scrollen der Seite zu erstellen?).


Praktische Tipps

Eine One-Page-Website funktioniert besonders gut, wenn die Inhalte klar, kompakt und leicht zugänglich organisiert sind.


Für bessere Ergebnisse:

  • begrenzen Sie die Anzahl der Abschnitte;
  • verwenden Sie kurze und leicht erkennbare Titel;
  • halten Sie das Menü einfach;
  • fügen Sie gut sichtbare Call-to-Actions ein;
  • verwenden Sie leichte und optimierte Bilder;
  • überprüfen Sie das Verhalten immer auch auf Smartphones;
  • erstellen Sie ein flüssiges und geordnetes Scroll-Erlebnis;
  • organisieren Sie die Inhalte in einer logischen Reihenfolge.


Im Allgemeinen ist eine One-Page-Website besonders effektiv, wenn Besucher schnell ein bestimmtes Ziel erreichen sollen, wie zum Beispiel:

  • Sie zu kontaktieren;
  • Informationen anzufordern;
  • einen Service zu buchen;
  • ein Unternehmen oder ein Produkt kennenzulernen.


Zusammenfassung

Mit WebSite X5 können Sie ganz einfach eine One-Page-Website erstellen, indem Sie eine einzelne Seite verwenden, die in über Anker verbundene Abschnitte unterteilt ist.


Dank der Scroll-Navigation können Besucher schnell zwischen den Inhalten wechseln, ohne die Seite zu ändern, und erhalten so ein einfaches, modernes und unmittelbares Nutzungserlebnis.


Diese Art von Struktur eignet sich ideal für Landingpages, Portfolios, kleine Unternehmenswebsites und Projekte, die wenige Informationen schnell und effektiv vermitteln möchten.