Kompatibilität:

WebSite X5 Evo | Pro | Agency

Eine Website muss nicht unbedingt aus vielen Seiten bestehen. In manchen Fällen kann eine einfache, direkte Struktur, die Besucher durch einen einzigen Ablauf führt, deutlich wirkungsvoller sein.


One-Page-Websites verfolgen genau dieses Ziel: Alle wichtigen Inhalte werden auf einer einzigen Seite gesammelt und in Abschnitte gegliedert, die über das Navigationsmenü leicht erreichbar sind.


Diese Lösung eignet sich besonders für:

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


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


Mit WebSite X5 können Sie ganz einfach eine One-Page-Website erstellen, indem Sie die Inhalte in Abschnitte gliedern, jedem Abschnitt einen Anker zuweisen und die Menüeinträge mit den jeweiligen Ankern verknüpfen.


Die wichtigsten Schritte sind:


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


So erstellen Sie Schritt für Schritt eine One-Page-Website

Der erste Schritt besteht darin, eine für eine One-Page-Website geeignete Struktur vorzubereiten. 


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


So richten Sie die Struktur ein:

  • Öffnen Sie ein neues Projekt und gehen Sie zu Schritt 3 - Sitemap-Erstellung.
  • Löschen Sie alle standardmäßig vorhandenen Seiten und behalten Sie nur die Startseite bei.
  • Verwenden Sie Ebenen, um die Einträge des Navigationsmenüs zu erstellen.


Sie können beispielsweise eine Website mit diesen Abschnitten erstellen:

  • Willkommen
  • Leistungen
  • Kontakt


Gehen Sie dazu wie folgt vor:

  • Klicken Sie auf die Schaltfläche Neue Ebene.
  • Benennen Sie die Ebene mit dem Namen des ersten Eintrags, zum Beispiel „Willkommen“.
  • Wiederholen Sie den Vorgang für „Leistungen“ und „Kontakt“.

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


Nachdem Sie die Struktur fertiggestellt haben:

  • Wählen Sie die Startseite aus.
  • Klicken Sie auf Weiter, um zu Schritt 4 - Seitenerstellung zu wechseln.


#tip - Bei One-Page-Websites empfiehlt es sich, das Menü einfach zu halten und nur wenige Einträge zu verwenden, damit die Navigation möglichst unmittelbar bleibt.


2. Erstellen Sie die Abschnitte der Seite

Jetzt können Sie die Inhalte der Startseite erstellen und in den verschiedenen Abschnitten der Website organisieren.


In unserem Beispiel: 

  • „Willkommen“ ist der einleitende Abschnitt; 
  • „Leistungen“ stellt Ihr Angebot vor; 
  • „Kontakt“ enthält Kontaktdaten und ein Kontaktformular. 


So organisieren Sie die Seite:

  • Fügen Sie im ersten Abschnitt die für die Inhalte von „Willkommen“ erforderlichen Objekte ein.
  • Verwenden Sie am Ende dieser Inhalte den Befehl Neuer Abschnitt, um den Abschnitt „Leistungen“ zu beginnen.
  • Fügen Sie die Objekte für Ihre Leistungen ein.
  • Erstellen Sie auf die gleiche Weise einen neuen Abschnitt für „Kontakt“ und fügen Sie die entsprechenden Inhalte ein.


Jeder Abschnitt kann eine eigene Zeilen- und Spaltenstruktur haben. Sie können daher das Layout auswählen, das am besten zu den jeweiligen Inhalten passt, ohne die Struktur der anderen Abschnitte zu beeinflussen.


#tip - Weitere Informationen finden Sie unter Seitenabschnitte. Wie erstellt man Layouts mit unterschiedlichen Strukturen?


3. Weisen Sie jedem Abschnitt einen Anker zu

Damit das Menü direkt zu den einzelnen Abschnitten führen kann, müssen Sie die entsprechenden Anker erstellen.


Anker sind Verweise, die bestimmte Punkte auf der Seite kennzeichnen und als Ziel eines Links verwendet werden können.


Bei einer One-Page-Website weisen Sie den Anker einem Objekt in der ersten Zeile des Abschnitts zu, den Sie erreichen möchten.


Zum Beispiel:

  • Wählen Sie ein Objekt in der ersten Zeile des Abschnitts „Willkommen“ aus;
  • Klicken Sie auf Anker > Anker einfügen.
  • Geben Sie dem Anker einen leicht erkennbaren Namen, zum Beispiel „Willkommen“.
  • Wiederholen Sie denselben Vorgang in der ersten Zeile der Abschnitte „Leistungen“ und „Kontakt“ und verwenden Sie jeweils unterschiedliche Namen.


Wenn sich das Objekt, dem der Anker zugewiesen ist, in der ersten Zeile des Abschnitts befindet, führt der Link zum Anfang des Abschnitts selbst. Wenn Besucher auf einen Menüeintrag klicken, gelangen sie so direkt zum Anfang des entsprechenden Bereichs.


#tip - Weitere Informationen finden Sie unter Anker. Wie erstellt man Links zu bestimmten Punkten einer Seite?


Jetzt müssen Sie die Menüeinträge mit den entsprechenden Ankern verknüpfen.


Durch diesen Schritt führt das Menü die Besucher automatisch zum richtigen Abschnitt der Seite.


So verknüpfen Sie zum Beispiel den Eintrag „Willkommen“:

  • Gehen Sie zurück zu Schritt 3 - Sitemap-Erstellung.
  • Wählen Sie die Ebene „Willkommen“ aus.
  • Klicken Sie auf die Schaltfläche Eigenschaften.
  • Klicken Sie im Fenster Eigenschaften der Ebene auf Link. 
  • Wählen Sie im Fenster Link den Eintrag Seite der Website.
  • Wählen Sie die Startseite.
  • Wählen Sie im Feld Interner Anker der Seite den Anker „Willkommen“ aus.
  • Bestätigen Sie mit OK.

Wiederholen Sie dieselben Schritte, um auch die Ebenen „Leistungen“ und „Kontakt“ mit den entsprechenden Ankern zu verknüpfen.


Ihre One-Page-Website ist jetzt fertig. Wenn Besucher auf einen Menüeintrag klicken, scrollt die Seite automatisch zum entsprechenden Abschnitt.


#tip - Sticky Bar. 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. Weitere Informationen finden Sie unter: Sticky Bar. Wie erstellt man eine Navigationsleiste, die beim Scrollen immer sichtbar bleibt? 


#tip - Full Height. Wenn Sie eine Navigation im Folien-Stil erstellen möchten, können Sie auch die Funktion Full Height verwenden. Weitere Informationen finden Sie unter: Full Height. Wie erstellt man einen folienartigen Seiten-Scroll?).


Praktische Tipps

Eine One-Page-Website funktioniert 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 Überschriften;
  • ordnen Sie die Inhalte in einer logischen Reihenfolge an;
  • halten Sie das Menü einfach;
  • fügen Sie gut sichtbare Handlungsaufforderungen ein;
  • verwenden Sie leichte und optimierte Bilder;
  • sorgen Sie für eine klare visuelle Trennung zwischen den verschiedenen Abschnitten;
  • prüfen Sie immer das Verhalten auf Smartphones.


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

  • Kontakt mit Ihnen aufnehmen;
  • Informationen anfordern;
  • eine Dienstleistung buchen;
  • ein Unternehmen oder ein Produkt kennenlernen.


Zusammenfassung

Mit WebSite X5 können Sie ganz einfach eine One-Page-Website erstellen, indem Sie nur eine Startseite verwenden, diese in Abschnitte gliedern und das Menü über Anker mit den verschiedenen Bereichen verknüpfen.


Jeder Abschnitt kann eine für seine Inhalte geeignete Struktur haben, und Besucher können ihn direkt über die entsprechenden Navigationseinträge erreichen.


Auf diese Weise können Sie eine Website erstellen, die einfach zu erkunden ist und sich besonders für Projekte eignet, bei denen eine begrenzte Menge an Informationen entlang eines einzigen Ablaufs präsentiert werden soll.