Eine Single-Page-Website zeigt alle Inhalte auf einer einzigen Seite an. Nach dem Laden wird die gesamte Website angezeigt. Klickt der Besucher auf die Menüpunkte im Header, werden nacheinander verschiedene Abschnitte der Seite eingeblendet.
Diese Art von Websites bietet viele Vorteile, wie z. B. einfache und intuitive Navigation, mobile Optimierung, gesteigerte Besucherinteraktion, höhere Konversionsraten sowie einfache Erstellung und Pflege. Sie eignen sich ideal für Landingpages , Event-Websites und die prägnante Präsentation Ihres Portfolios.
Dies kann mithilfe eines wichtigen Elements namens Abschnitts-ID erreicht werden, das in den Abschnittseinstellungen angegeben werden kann.
Dieser Artikel erklärt Ihnen, wie Sie mithilfe der Menüpunkte „Abschnitts-ID“ und „Link“ eine einseitige Website erstellen.
In diesem Artikel:
- Erstellen Sie eine Seite und fügen Sie Abschnitte hinzu
- Geben Sie die Abschnitts-ID an
- Seite als Startseite festlegen
- Erstellen Sie Link-Menüelemente mithilfe der Abschnitts-ID
- Aktivieren Sie die Zurück-nach-oben-Schaltfläche
- Sticky-Navigation aktivieren
Erstellen Sie eine Seite und fügen Sie die Abschnitte hinzu
- Der erste Schritt ist zu eine neue Seite erstellen und fügen Sie Ihre gewünschten Abschnitte hinzu verbunden.
- Sie müssen alle Abschnitte erstellen, die mit den jeweiligen Menüpunkten (wie Über uns und Kontaktseiten) verknüpft werden sollen.
Geben Sie die Abschnitts-ID an
- Nachdem Sie die Abschnitte zur Seite hinzugefügt haben, besuchen Sie die Abschnittseinstellungen aller hinzugefügten Abschnitte und Geben Sie die Abschnitts-ID an zu jedem von ihnen.
Seite als Startseite festlegen
Als nächstes gehen Sie zum Abschnitt „Website“ , legen die Seite als Startseite fest (1) und blenden sie im Website-Menü/in der Navigation aus (2).
Erstellen Sie Link-Menüelemente mithilfe der Abschnitts-ID
Erstellen Sie nun die Link-Menüpunkte wie Startseite, Über uns, Arbeit, Kontakt usw.
Um einen neuen Link-Menüpunkt hinzuzufügen, geben Sie „Link hinzufügen“ (1) in das Suchfeld ein und klicken Sie auf die Aktion „Link hinzufügen“ (2).
Gehen Sie wie folgt vor, um das Verknüpfungsmenüelement mit einem Abschnitt der Seite zu verbinden:
- Von dem Website Bewegen Sie den Mauszeiger über den Link-Menüpunkt und klicken Sie auf den Symbol mit drei vertikalen Punkten (1) daneben.
- Wähle aus Einstellungen Option (2) aus der Dropdown-Liste.
- Scrollen Sie als Nächstes nach unten zu Linkziel Abschnitt (3), wählen Sie die aus Seitenabschnitt Registerkarte (4), und geben Sie die an Abschnitts-ID (5) des Abschnitts, den Sie verlinken möchten.
- Die Abschnitts-ID sollte die gleiche sein wie im Seitenabschnitt ohne Leerzeichen angegeben.
- Schließlich schlagen Sie die Gespeichert Taste (6).
Aktivieren Sie die Zurück-nach-oben-Schaltfläche
Es ist hilfreich, eine Schaltfläche zu haben, die eingeblendet wird, wenn Sie nach unten scrollen, und am unteren Rand des Browsers schwebt. Sie können ganz einfach nach oben scrollen, indem Sie darauf klicken.
- Um die Zurück-nach-oben-Schaltfläche zu aktivieren, gehen Sie zu Technologie Abschnitt und klicken Sie auf die Fußzeile Tab oder einfach tippen nach oben im Suchfeld so:
- Scrollen Sie als Nächstes nach unten zu Nach oben-Taste Abschnitt und aktivieren Sie die Schaltfläche.
Sticky-Navigation aktivieren
Sie können auch die fixierte Navigation über Ihrer Kopfzeile aktivieren, um das Erscheinungsbild Ihrer Website zu verbessern. Mehr erfahren.
Schauen Sie sich eine Demoseite mit fixierter Navigation an.
Voilà! Ihre einseitige Website ist nun fertig. Klicken Sie einfach auf den Button „Website ansehen“ oben, um Ihre Website zu öffnen.
Im Artikel „Erstellen Sie Ihre Website mit Pixpa – Der vollständige Leitfaden“ erfahren Sie mehr über weitere Anpassungsmöglichkeiten für Ihre Website.
- Bei der Abschnitts-ID wird zwischen Groß- und Kleinschreibung unterschieden.
- Verwenden Sie für Abschnitts-IDs nur Buchstaben, Zahlen und Bindestriche. Verwenden Sie keine #, Leerzeichen oder Sonderzeichen.
- Verwenden Sie Bindestriche, um Wörter innerhalb der Abschnitts-ID zu trennen.
Hier sind ein paar Demo-Single-Page-Websites: