So erstellst du eine One-Page-Website mit Squarespace
Für einen Kunden, der mit dem klaren Wunsch eines One-Pager zu mir kam, habe ich seine Squarespace Website folgendermaßen gelöst. Wenn du gerade erst anfängst und nur wenig Angebot oder Inhalte anbietest, kann eine One-Page-Website eine echte Erleichterung sein, da sie auf den Punkt kommt. Ich zeige dir, wie du deine Navigationsleiste mit jedem Abschnitt auf deiner One-Page-Website verknüpfen kannst, damit deine Besucher nicht mehr hin und her scrollen müssen, um einen Abschnitt zu finden.
Du kannst dir hier anschauen, was ich meine: https://ra-zitzelsberger.de.
Ich zeige euch hier meine Vorgehensweise, wie ich den One-Pager umgesetzt habe für diesen Kunden:
Schritt 1: Erstelle eine Squarespace Website
Melde dich bei Squarespace an, falls du noch kein Konto hast. Gehe danach zu deinem Dashboard in Squarespace und klicke auf „Website erstellen“. Gib deiner Website einen Namen, den du dir gut merken kannst.
Als Nächstes füge verschiedene Abschnitte auf deiner Website hinzu und gestalte diese entsprechend. Abschnitte können sein: Über uns, Services, Kontakt usw. Das, was du dir als Inhalt für deine Website wünscht und brauchst.
Schritt 2: Füge den Code ein
Da nun deine Website bereit ist, musst du nur noch jeden Abschnitt mit deinem Navigationsmenü verknüpfen. Obwohl dazu ein kleiner Code erforderlich ist, ist es super einfach.
Beginnen wir mit dem Code. Gehe zu deiner erstellten Seite und fahre mit der Maus über den oberen Teil jedes Abschnitts, um einen Einfügepunkt, d. h. ein Pluszeichen, zu finden. Wähle das Pluszeichen aus, und es wird ein Menü angezeigt. Wähle „Code“ aus. Ein Platz, an dem du deinen Code einfügen kannst, wird angezeigt. Füge diesen Code ein:
<a name ="NameAbschnitt"></a>
Ersetze "NameAbschnitt" durch den Namen des Abschnitts (Name Navigationsmenü), den du hinzufügen möchtest. Wiederhole dies für alle Abschnitte, die du verknüpfen möchtest.
Schritt 3: Verknüpfe das Navigationsmenü mit jedem Abschnitt
Der letzte Schritt ist die Verknüpfung deines Navigationsmenüs mit jedem Abschnitt. Gehe zu „Seiten“, klicke auf das Pluszeichen neben „Nicht verknüpft“ und wähle „Link“. Gib den Namen des Abschnitts ein und füge den entsprechenden Code in den Linkbereich ein. Wiederhole den Vorgang für jeden Abschnitt.
Da hast du es! Eine funktionierende One-Page-Squarespace-Website, die es Besuchern ermöglicht, zu wichtigen Abschnitten zu springen.
Bei „Website Tools“ und dann „Benutzerdefiniertes CSS“ habe ich diesen Code hinzugefügt, damit die Bewegung zu dem Abschnitt weicher ist:
html {
scroll-behavior: smooth;
}
Dann habt ihr es geschafft! Es ist wirklich einfacher, als es klingt.
Hier liste ich euch einige Punkte, die ich bei meiner Recherche gesammelt habe, die für oder gegen eine One-Pager-Website sprechen.
Pro:
Einfacher zu verwalten und zu pflegen
Bessere Interaktion, da Besucher länger auf der Website bleiben
Der Inhalt ist klar und einfach zu erfassen
Kontra:
SEO ist schwieriger, aber nicht unmöglich
Die Analytik der Website ist schwer zu ermitteln, da der meiste Inhalt auf einer Seite ist
Ich hoffe, diese Anleitung ist hilfreich für euch!
Falls du wünschst, ich solle deine Website umsetzen, dann melde dich gerne bei mir: https://www.alejandrateixeira.com/contact
Stand Februar 2024
