Was ist ein Onepager und wie kannst du einen erstellen



Bild eines Onepgers der Marke EQUALS mit einem Mann und einer Frau


Trends gibt es überall – natürlich auch im Webdesign. Und hier gibt es einen Trend, der sich seit längerer Zeit hält, sich ständig neu erfindet und weiterentwickelt. Die Rede ist vom sogenannten Onepager, One Pager oder “Einseiter”. Hiermit ist nicht einfach nur eine langweilige, kurze Website gemeint, sondern ein Webdesign-Trend, den du aufgrund seiner Funktionalität und Eleganz nicht außer acht lassen solltest, wenn du deine eigene Website erstellen willst.



Was ist ein Onepager?


Ein Onepager oder Single Page Website ist eine Website, auf der die Inhalte auf einer einzigen langen Seite angezeigt werden. Die Navigation der einzelnen Seitenabschnitte erfolgt über das Scrollen und die Anker im Menü verlinken zu den einzelnen Abschnitten im Onepager und nicht wie bei anderen Websites zu separaten Unterseiten.



Wie ist ein Onepager gegliedert?


Um die Website zu gliedern, werden die Abschnitte mithilfe von Streifen, Farben oder anderen Designelementen voneinander abgetrennt. Das Design ist meist minimalistisch und gut strukturiert und gegliedert. Onepager sind außerdem in der Regel stark visuell und bildlastiger und enthalten kürzere Textabschnitte.



Die User Experience bei Onepagern


Das lange Scrolling-Design macht das Storytelling sehr kreativ und intuitiv, da du mehr Kontrolle über den Ablauf und die Reihenfolge hast, in der deine Website navigiert wird.


Durch das Parallax Scrolling werden deine Besucherinnen und Besucher linear durch die Inhalte deines Onepagers geleitet, was die User Experience zu etwas Einzigartigem macht. Alle Inhalte sind an einem zentralen Ort zu finden und man verirrt sich nicht auf Unterseiten.



Der Onepager auf mobilen Endgeräten


Das Onepage-Format ist auch für mobile Websites und Tablets gut geeignet und das Scrollen ist auf diesen Geräten besonders dynamisch und macht Spaß. Eine einseitige Website ist außerdem einfach zu warten und benötigt weniger Ressourcen als eine klassische Website.



Ist der Onepager für meine Website geeignet?


Mit einem Onepager kann jedes Geschäft glänzen. Die Voraussetzung ist allerdings, dass sich deine Inhalte in Kurzform präsentieren lassen und nicht zu textlastig sind. Daher eignen sich Onepager besonders gut für Design und Fotografie-Portfolios, Landingpages, Werbekampagnen, Résumés und Lebensläufe. Da Storytelling auf einem Onepager besonders gut zur Geltung kommt, eignet sich dieses Format auch gut für eine Unternehmenspräsentation oder die Neueinführung von Produkten.


Wenn du allerdings viele Informationen in verschiedenen Kategorien und Unterseiten darstellen willst, wie es beispielsweise bei Online-Shops der Fall ist, empfehlen wir dir, eine klassische Website zu erstellen.


In den folgenden Abschnitten erläutern wir, was du beim Erstellen eines Onepagers beachten solltest.



So planst du die Inhalte für einen Onepager


Da sich alle deine Inhalte auf einer einzigen Seite befinden, ist der Ablauf, in dem du sie präsentierst, besonders wichtig und sollte daher gut geplant sein. Plane den Aufbau deiner Inhalte daher strategisch, sodass er intuitiv und logisch ist. Die Reihenfolge deiner Inhalte sollte hier Priorität haben, da sie die User Experience entscheidend beeinflusst.


Beginne damit, die Reihenfolge zu planen, in der deine Website-Besucherinnen und Besucher die Reise auf deiner Website beginnen sollen. Um ihre Aufmerksamkeit gleich zu Beginn zu fesseln, empfehlen wir dir, mit der Hauptbotschaft deines Unternehmens zu beginnen und diese im ersten Abschnitt, also dem ersten Fold zu platzieren.


Jede Website benötigt einen “Über uns”-Abschnitt und Kontaktangaben deines Unternehmens. Je nachdem, welche Inhalte für deine Unternehmen und deine Markenidentität wichtig sind, kannst du diese beiden Abschnitte an den Anfang oder das Ende deiner One Page Website stellen. Dazwischen kannst du dann dein Angebot, eine CTA-Schaltfläche (Call-to-Action), Services und Produkte, Testimonials, ein FAQ-Bereich und eine Fotogalerie einsetzten.


Verzichte auf alle überflüssigen Informationen, besonders dann, wenn diese in Textform sind. Hier ist weniger mehr, denn du möchtest dich ja auf das Design konzentrieren. Es macht also Sinn, alles klar zu gliedern und so einfach wie möglich zu halten.


Denke daran, dass du zwar die Reihenfolge bestimmst, in der die User Journey vonstatten geht, doch nicht immer ist deine Logik auch für andere logisch. Versuche dich auch in deine Nutzerinnen und Nutzer hineinzuversetzen und überlege dir, welche Reihenfolge für sie am besten und natürlichsten ist.



Einen One Pager erstellen – So geht’s


1. Wähle ein Template

2. Teile deine Inhalte in Abschnitte auf

3. Parallax Effekt

4. Mit einem Ankermenü kannst du die einzelnen Abschnitte miteinander verknüpfen

5. Die Navigation auf deiner Onepage Website

6. CTA-Buttons spielen auf Onepagern eine zentrale Rolle

7. Achte besonders auf die Fußzeile

8. Social-Media-Kanäle

9. Implementiere SEO

10. Optimale Ansicht auf Mobilgeräten



01. Wähle ein Template


Ein One Pager Template hilft dir dabei deinen One Pager zu planen und zu strukturieren, da die Vorlage bereits alle wichtigen Elemente enthält z. B. Anker im Menü, Streifen und Spalten, eine Leiste für Social Media, eine Fußzeile und mehr. Es gibt eine große Anzahl von One-Page-Vorlagen, die du vollständig anpassen und individualisieren kannst, sodass sie zu jeder Art von Unternehmen passen.



02. Teile deine Inhalte in Abschnitte auf


Nun geht es darum, deine Inhalte, die du ja bereits geplant und strukturiert hast, mithilfe von Streifen auf deiner Website anzeigen. So fügst du einen Streifen zu deiner Website hinzu:


  1. Klicke links im Editor auf “Hinzufügen”.

  2. Klicke auf Streifen.

  3. Wähle den Typ des Streifens. Hier findest du vorgefertigte, vollständig anpassbare Optionen zur Auswahl.

  4. Klicke auf einen Streifen oder ziehe diesen an die gewünschte Stelle auf deiner Seite.


Für jeden Streifen kannst du Texte, Videos, Bilder, ein Kontaktformular, Testimonials und mehr hinzufügen. Füge so viele Streifen hinzu, wie du brauchst und ordne sie in der Reihenfolge an, die für die Präsentation deiner Inhalte logisch erscheint. Normalerweise beginnst du mit einem “Info”-Abschnitt und arbeitest dich nach unten weiter bis hin zur Fußzeile und endest mit dem “Kontakt”-Bereich.



03. Parallax Effekt


In unseren Top 9 Webdesign-Trends für 2021 haben wir den Parallax Effekt bereits vorgestellt und nun ist es an der Zeit diesen Trend einzusetzen.


Parallax Scrolling fällt nicht nur auf, sondern fördert auch das Engagement. Bei diesem Effekt bewegen sich Hinter- und Vordergrund unabhängig voneinander und erzeugen so einen eindrucksvollen 3D-Effekt, der deiner Website Tiefe verleiht. Besonders im Zusammenhang mit den Streifen kommt Parallax Scrolling gut zur Geltung.


Du kannst subtile Animationen zu den Streifen hinzufügen, z. B. Vergrößern, Anzeigen und Ausblenden. Je aufmerksamkeitssteigernder deine Effekte sind, umso eher werden deine Leads auf deiner Website nach unten scrollen.


So kannst du auf deiner Website von Wix Parallax für deinen Streifenhintergrund zu aktivieren:

  1. Klicke im Editor auf den Streifen.

  2. Klicke auf Streifenhintergrund ändern.

  3. Klicke in der Streifenvorschau auf Einstellungen.

  4. Klicke unter Scroll-Effekte auf Parallax.



04. Mit einem Ankermenü kannst du die einzelnen Abschnitte miteinander verknüpfen


Anstelle eines regulären Seitenmenüs kannst du Anker-Links erstellen, mit denen du Menüpunkte verlinkst. Diese Anker kannst du auf verschiedenen Abschnitten deiner Website platzieren. Wenn dann deine Besucherinnen und Besucher auf die Ankerlinks in deinem Menü klicken, werden sie zu dem entsprechenden Seitenabschnitt geführt.


Anker erleichtern das Navigieren zu verschiedenen Bereichen deiner Website mit nur einer Seite, indem sie direkt zu einem bestimmten Abschnitt wechseln können. In vielen Vorlagen sind bereits Anker integriert. Du kannst diese jedoch jederzeit umbenennen, verschieben oder löschen.


So fügst du einen Anker zum Seitenmenü hinzu:

  1. Füge einen Anker auf deiner Seite hinzu.

  2. Ziehe den Anker an den Beginn eines Seitenabschnitts.

  3. Benenne den Anker nach dem Inhalt des jeweiligen Seitenabschnitts (z. B. Über mich, Angebote, Kontakt).

  4. Wiederhole die Schritte 1 - 3 für jeden Abschnitt deiner Website.

  5. Klicke links in deinem Editor auf Menüs & Seiten.

  6. Klicke auf Link hinzufügen.

  7. Klicke auf Anker und wähle den richtigen Anker unter “Wo auf der Seite?”.

  8. Klicke auf OK

  9. Ändere den Text des Menü-Buttons dem Inhalt des jeweiligen Seitenabschnitts entsprechend (z.B. Über mich, Angebote, Kontakt). Dies kann der gleiche Name sein, wie der des Ankers (Schritt 3.).

  10. Wiederhole die Schritte 5-9 für jeden Anker.


Sobald du einen Ankerlink hinzugefügt hast, kannst du diesen anhand des Ankersymbols neben dem Namen ganz leicht finden. Dein Ankerlink sieht wie ein normaler Seitenlink in deinem Seitenmenü aus und wenn deine Besucherinnen und Besucher darauf klicken, werden sie direkt zu dem Anker geleitet.



05. Die Navigation auf deiner Onepage Website


Im Langformat der Single Page Websites können deine Leads deine Inhalte voll genießen, sich aber auch schon mal darin verlieren. Um die Navigation zu erleichtern, kannst du die folgenden Punkte beachten.


Die Reihenfolge in deinem Menü: Der Aufbau deines Menüs sollte natürlich dem Aufbau deines Onepagers entsprechen und sich an der Reihenfolge der einzelnen Abschnitte orientieren, die benutzerfreundliche Navigation zu vereinfachen.


Die Anordnung deines Menüs: Da eine Onepage Website ein langes Scrollen erfordert, empfehlen wir dir, dein Menü so anzuordnen, dass es jederzeit sichtbar bleibt, auch denn, wenn nach unten oder oben gescrollt wird. Dazu kannst du das Menü auf deiner Website fixieren. Dies geht auch, indem du ein schwebendes Menü erstellst.


“Zurück nach oben"-Button: Um deinen Leads zu ermöglichen, jeder Zeit wieder an den Anfang deiner Website zu gelangen, kannst du einen "Zurück nach oben"-Button erstellen. Dieser Button wird wie das Menü auf deiner Website fixiert und ist so in jedem Abschnitt sichtbar.



06. CTA-Buttons spielen auf Onepagern eine zentrale Rolle


Da Onpager sehr visuell gestaltet sind und sich alle Informationen an einem Ort befinden, ist es wichtig, deine Leads auf die Intention deiner Website aufmerksam zu machen. Egal, ob “Shoppen”, “Buchen”, “Teilnehmen” oder “Anmelden” – ein CTA-Button (Call-to-Action) hilft dabei, die Aufmerksamkeit deiner Leads auf die richtige Priorität zu lenken.


Wir empfehlen dir, den CTA “above the fold” also im ersten Abschnitt zu platzieren, um die größtmögliche Sichtbarkeit zu gewährleisten. Der Button ist auch eine tolle Gelegenheit, um dein Publikum zu einem der unteren Abschnitte in deiner Website zu leiten. Wenn du beispielsweise Buchungsoptionen als einen der Abschnitte auf deinem One-Pager integriert hast, kannst du den CTA-Button “Jetzt Buchen” am Anfang deiner Website einfügen und ihn zum Buchungsbereich verlinken. Dafür verlinkst du ihn einfach mit einem Anker.



07. Achte besonders auf die Fußzeile


Die Fußzeile ist der Bereich ganz unten auf deiner Website. Die meisten Menschen navigieren dorthin, wenn sie nach wichtigen Informationen suchen, z. B. wie sie ein Unternehmen kontaktieren können. Aus diesem Grund ist es wichtig, dass deine Fußzeile aktuelle Kontaktdaten, Links zu deinen Social-Media-Kanälen, ggf. Öffnungszeiten, deine Datenschutzrichtlinien und die Geschäftsbedingungen enthält. Wenn du ein physisches Geschäft betreibst, kannst du dort auch eine Karte und Wegbeschreibungen hinzufügen.



08. Social-Media-Kanäle


Gerade in der heutigen Zeit ist die Präsenz von Unternehmen in Social Media wie Facebook, Instagram und LinkedIn so wichtig wie nie. Daher empfehlen wir dir unbedingt diese Kanäle auf deinem Onepager zu verlinken und so deinen Leads noch mehr visuelle und andere Inhalte bereitzustellen.


Deine soziale Netzwerkleiste verknüpft deine Leads mit deinen Konten in Social Media. Klicken sie dann auf eines der Icons, werden sie von deiner Website weggeleitet und gelangen zu deinem Profil.


Wenn du deine Bilder von Instagram direkt in deine Website integrieren möchtest, kannst du einen Instagram-Feed hinzufügen und einrichten, um so noch mehr interessante visuelle Elemente zu schaffen.



09. Implementiere SEO


Suchmaschinenoptimierung (SEO) ist ein wichtiges Element auf jeder Website – auch bei einem One Page Design. SEO ist der Prozess, Websites und Websiteinhalte so zu optimieren, sodass sie von Suchmaschinen wie Google gut auffindbar und lesbar sind. Ziel ist es, dass deine Website durch diese Optimierung gefunden werden, wenn Leads nach einem Unternehmen wie deinem suchen.


Um deine Website zu optimieren, kannst du mit folgenden Schritten beginnen:

  • Wähle die richtige Domain

  • Melde dich bei Google My Business an

  • Integriere strategische und branchenrelevante Keywords


Wenn du deinen Onepager mit Wix erstellen willst, kannst du auf unsere SEO-Tools zugreifen, die dir dabei helfen, deine Website zu optimieren. Wenn du das Thema SEO vertiefen möchtest, kannst du auf unserem Blog mehr dazu lesen.



10. Optimale Ansicht auf Mobilgeräten


Heutzutage surfen die meisten Menschen auf Smartphones oder Tablets im Internet statt auf einem Desktop Computer. Dies ist auch der Grund, warum die mobile Version einer Website von Suchmaschinen gecrawlt wird, um sie zu indexieren. Websites jetzt zuerst nach ihrer mobilen Version in Bezug auf SEO eingestuft werden (siehe Googles Best Practices für die Mobile First-Indexierung).


Für deine Website bedeutet das, dass sie auf mobilen Endgeräten mindestens genauso gut aussehen sollte, wie auf dem Desktop. Wenn du deine Website mit Wix erstellst, ist sie automatisch für mobile Geräte optimiert. Du kannst sie aber selbstverständlich im Mobile-Editor deiner Website noch weiter anpassen.


Eine Möglichkeit, das mobile Surfen auf deiner Website noch individueller zu gestalten, ist die Integration einzigartiger mobiler Funktionen, wie z. B. die Installation einer Schnellaktionsleiste.



Unser Fazit zum Onepager


Onepager sind nicht nur funktional, sondern bieten auch eine tolle Gelegenheit coole Effekte wie Parallax Scrolling zu integrieren und so ein faszinierendes Website-Design zu schaffen, das zum Ansehen einlädt. Besonders bildreiche Inhalte mit minimalen Textabschnitten können so am besten dargestellt werden.


Bilder, Streifen und Farben sind eine gute Methode, deine Inhalte voneinander abzugrenzen und starke CTA-Buttons richten das Augenmerk auf die Hauptintention deiner Website. Auch die Integration einer informationsreichen Fußzeile und eines schwebenden Ankermenü erleichtern die Orientierung auf deiner Website. Außerdem ist die Verlinkung zu deinen Social-Media-Plattformen eine gute Gelegenheit, für noch mehr Engagement zu sorgen. Daher empfehlen wir dir, nach einem Website-Template Ausschau zu halten, dass all diese Elemente bereits mit sich bringt.


Das Durchscrollen eines Onepagers macht auf den Mobilgeräten besonders Spaß, außerdem ist eine für mobile Endgeräte optimierte Website kritisch für dein Ranking in Suchmaschinen. Wenn du dann auch noch die richtigen Schlüsselwörtern für deinen Onepager auswählst, steht deinem Erfolg nichts mehr im Weg. Also warte nicht länger und erstelle deine eigene Website.




Alexandra Eger

Redakteurin



Erstelle eine Website

Dieser Blog wurde mit Wix Blog erstellt.