Was ist ein One Pager und wie kannst du einen One Pager erstellen: mit Beispielen

Lege los mit: Website erstellen → | Domain registrieren → 

Dieser Artikel wurde am 30.03.2023 aktualisiert.

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 Website erstellen willst.

In diesem Artikel zeigen wir dir, wie du einen eigenen Onepager erstellen kannst. Außerdem klären wir die Frage „Was ist ein Onepager?” und zeigen dir schöne Onepager Beispiele als Inspiration.

Ein Onepager, One Pager, Einseiter, 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. Die Anker im Menü verlinken zu den einzelnen Abschnitten im Onepager und nicht wie bei anderen Website Arten zu separaten Unterseiten.

Lesetipp: Eine Schritt-für-Schritt-Anleitung für deine individuelle Website mit Wix 2023

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.

Ein Onepager ist jedoch nicht mit einer Homepage zu verwechseln.

Lesetipp: Was ist eine Homepage?

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 und ein modernes Surferlebnis bietet.

Dieses Format erleichtert die Navigation, da alle Inhalte an einem zentralen Ort zu finden sind und sich User:innen nicht auf Unterseiten verirren.

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.

Lesetipp: 10 Beispiele für eine mobile Website

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 geeignet, wenn du ein Portfolio erstellen willst, wie zum Beispiel ein Design- oder Fotografie-Portfolio. Außerdem kannst du das Onepager-Format verwenden, wenn du eine kostenlose Landingpage erstellen möchtest oder eine Werbekampagne oder ein Kurzprofil Lebenslauf.

Auch eine Hochzeitshomepage, eine Online-Einladung oder eine Coming Soon Website kann gut als Onepager gestaltet werden.

Da Storytelling auf einem Onepager besonders gut zur Geltung kommt, eignet sich der Onepager auch gut für eine Unternehmenspräsentation oder die Neueinführung von Produkten.

Lesetipp: 50 Website Ideen für 2023

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 Website mit klassischem Website Layout zu erstellen.

Lesetipp: Effektiver Website-Aufbau – Must-haves für ein professionelles Website-Layout

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

Die Reihenfolge

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.

Die Bereiche

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.

1. Wähle ein One Pager Template

2. Teile deine Inhalte in Abschnitte auf

3. Füge Parallax Effekte hinzu

4. Verknüpfe die einzelnen Anschnitte mit einem Ankermenü

5. Sorge für gute Navigation auf deiner Onepage Website

6. CTA-Buttons spielen auf Onepagern eine zentrale Rolle

7. Achte besonders auf die Fußzeile

8. Verlinke deine Social-Media-Kanäle

9. Implementiere SEO

10. Optimiere deinen Onepager für Mobilgeräte

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 Onepager Vorlagen, die du vollständig anpassen und individualisieren kannst, sodass sie zu jeder Art von Unternehmen passen.

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:

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.

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:

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:

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.

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.

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.

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.

Lesetipp: 13 Beispiele und Tipps für effektive Website Footer

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.

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:

Wenn du deinen Onepager mit Wix erstellen willst, kannst du auf unsere SEO-Tools zugreifen, die dir dabei helfen, deine Website zu optimieren.

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.

Mit ihrem schicken, modernen und frischen Design kann dieses Onepager-Beispiel für Unternehmen deine Firma zum Glänzen bringen. Besonders praktisch sind Funktionen wie Parallax Scrolling und wunderschöne Mediengalerie, die deine Angebote hervorheben können.

Auf diesem One-Pager mithilfe des prominent platzierten Kontaktformulars neue Leads und Kund:innen gewinnen. Um sicherzustellen, dass es sofort die Aufmerksamkeit deiner Besucher:innen auf sich zieht, wird beim Laden der Seite ein weißer Rahmen hinter dem Formular eingeblendet.

Alle One-Pager-Vorlagen von Wix sehen nicht nur auf dem Desktop gut aus, sondern sind auch für mobile Endgeräte optimiert.

Beispiel einer Onepager Vorlage für ein Immobilienbüro

Wenn du ein trendiges Produkt bewerben willst, kannst du dich an diesem Onepager Beispiel orientieren.

Hier kannst du Neuerscheinungen bewerben und die trendigen Farben werden jedem sofort ins Auge fallen. Du kannst wichtige Daten anzeigen, Videos hinzufügen und einen Abschnitt „Über-uns" schreiben. Auf der rechten Seite befinden sich wichtige Links zu Social-Media-Accounts oder Apps wie Spotify und Apple Music, mit denen du deine Besucher:innen auf dem Laufenden halten kannst.

Beispiel einer Onepager Vorlage für ein neues Album

One-Page-Websites haben den Vorteil, dass sie eine sehr übersichtliche Struktur aufweisen. Für Design-Websites, wie die der Fotografin Pien Geerling, ist dies von besonderem Vorteil.

Auf ihrer Website begrüßt sie Besucher:innen auf eine herzliche Art und Weise und präsentiert eindrucksvolle Beispiele ihrer neuesten Arbeiten. Durch ein effizientes Single-Scroll-Site-Layout werden ihre zahlreichen Produkt- und Einrichtungsfotos mithilfe der Wix Pro Gallery in verschiedene übersichtliche Abschnitte unterteilt. Um zwischen den Abschnitten zu navigieren, steht Besucher:innen ein vertikales Ankermenü auf der rechten Seite zur Verfügung, was die Erkundung der gesamten Website noch vereinfacht.

Pien Geerling verwendet ein sanftes Pastellfarbschema für den Hintergrund, um eine ruhige und entspannte Atmosphäre zu schaffen, welche die Fotos in den Mittelpunkt rückt.

Mit dieser eleganten und stilvollen Onepager-Vorlage für Produkte wird die Werbung für dein neuestes technisches Produkt so einfach wie nie zuvor. Hier kannst du problemlos Informationen wie Vorteile und Produktbewertungen bereitstellen, die Kund:innen vor dem Kauf lesen möchten.

Besonders beim Erstellen eines One-Pagers für Produkte, ist es wichtig, verschiedene Bilder des Produkts zu zeigen, damit potenzielle Kund:innen dein Produkt so erleben können, als ob sie es in einem Ladengeschäft in der Hand halten würden. Dadurch werden sie eher geneigt sein, in deinem Online-Shop auf „Jetzt bestellen“ zu klicken.

Die Vorlage verfügt außerdem über einen integrierten Live Webchat, über Interessent:innen vor dem Kauf Fragen stellen können.

Beispiel einer Onepager Vorlage für Produkte

Robot Genius ist ein Boutique-Filmstudio, das seine Besucher:innen mit einer faszinierenden, bildschirmfüllenden animierten Videoschleife auf seiner Website begrüßt. Diese kluge Webdesign-Entscheidung ermöglicht es dem Unternehmen, seinen Besucher:innen sofort eine Sammlung von Clips aus seinem Arbeitsportfolio zu präsentieren.

Dieses Onepager-Beispiel verwendet schwarz-weiß-graue Farbtöne und Fotos, die eine Verbindung zur Tech-Industrie herstellen und die futuristische Markenpersönlichkeit des Unternehmens stärken. Das Studio zeigt sich von seiner lustigen und schrulligen Seite, indem es die technikorientierten Bilder mit einer animierten Version seines Logos ausgleicht. Sogar Cartoon-Kritzeleien über den Fotos der Mitarbeiter setzen einen lockeren und sympathischen Akzent.

Robot Genius nutzt Ankerlinks, um zu verschiedenen Abschnitten zu gelangen und einen reibungslosen Bildlauf zu ermöglichen. Eine Parallaxenanimation in der Mitte der Seite offenbart auf humorvolle Weise die „geheime Zaubersauce“ des Studios. Falls Sie es beim ersten Mal nicht bemerkt haben sollten, empfehlen wir Ihnen, die Seite noch einmal aufzurufen. Es lohnt sich auf jeden Fall.

Wenn deine Veranstaltung noch eine professionelle Website benötigt, dann ist diese Vorlage ein guter Anfang. Fange an, Interesse zu erzeugen, indem du deine Hauptredner:innen und Informationen über deine Veranstaltung vorstellst. Du kannst sogar eine Option hinzufügen, mit der Teilnehmer:innen mit nur wenigen Klicks Tickets online kaufen können.

Dieses Template nutzt eine Akzentfarbe, um wichtige Elemente wie Überschriften und CTAs hervorzuheben – einen Trick, den wir sehr empfehlen können.

Beispiel einer Onepager Vorlage für Konferenzen

Die Website von Lior Raz, einem Schauspieler, Schriftsteller und Redner, ist ein hervorragendes Onepager-Beispiel für eine persönliche Website. Durch den meisterhaften Einsatz von Bewegung, um unsere Aufmerksamkeit mit einem Action-Video zu erregen, erhält die Seite ein dynamisches, rhythmisches Gefühl. Die auffällige, übergroße, serifenlose Typografie bringt die wilde Präsenz des Schauspielers auf dem Bildschirm zum Leben.

Durch eine Plus-Schaltfläche können Besucher:innen den entsprechenden Abschnitt ganz einfach vergrößern. Diese Schaltfläche befindet sich auch im Hamburger-Menü, das sich in der Kopfzeile ausklappt. Auf diese Weise kann Lior die einzelnen Abschnitte ausführlich darstellen, ohne sich Gedanken über eine endlos scrollende Website machen zu müssen.

Nicht immer sind es Unternehmen, die eine Website benötigen. Auch Selbstständige, Freelancer und Privatpersonen können mit Onepagern eine Onlinepräsenz erstellen und eine persönliche Marke (personal Brand) aufbauen.

Tipp: Möchtest du Schritt für Schritt erfahren, wie du am besten eine Freelancer Website erstellen kannst? Dann wirf gerne einen Blick auf unseren Post zum Thema.

Dieses Onepager-Beispie featured zum Beispiel einen Comedian, der seine Leistungen online anbieten und sein Talent in Szene setzten will. Die leuchtenden Farben der Seite und das Konfetti über dem Porträt, passen zur Branche und vermitteln das gewisse Etwas.

Neben wichtigen Informationen und Kontaktdaten können über dieses Onepager-Beispiel auch Tickets verkauft werden.

Beispiel einer Onepager Vorlage für Komiker:innen

Du möchtest deinen eigenen One Pager erstellen? Das ist eine gute Idee, denn One Pager 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. Wir wümschen dir viel Spaß mit deinem Onepager.

Alexandra Eger

Blog Growth Managerin