Show
Onepager – Was ist das und welche Vor- und Nachteile hat er?Onepager, oder Onepage Websites, bei denen sich alle Inhalte direkt auf einer Seite befinden, haben in den letzten Jahren enorm an Beliebtheit gewonnen. In diesem Blogartikel möchte ich dir den Trend genauer vorstellen – was genau man unter einem Onepager versteht, was die Vor- und Nachteile sind, wann du ihn nutzen solltest und wie du das Menü für einen Onepager einrichtest.
Was ist ein Onepager?Auf den meisten Websites sind die Inhalte auf klar definierte Unterseiten verteilt: Es gibt eine Startseite, auf der du dir einen Überblick verschaffen kannst, dann eine Angebotsseite, eine Über Mich Seite und so weiter. Bei einem Onepager sind die Inhalte nicht auf Unterseiten verteilt, sondern befinden sich auf einer (entsprechend langen) Startseite. Die Seite ist dabei klar unterteilt in die verschiedenen Abschnitte: Oben meist ein Banner, Angebote, Über Mich etc. Also fast so wie auf einer Standard Website, allerdings oft wesentlich komprimierter. Ein Onepager hat ebenfalls ein Menü – statt auf die Unterseite springst du jedoch mit einem Klick auf den Menüpunkt direkt zum jeweiligen Abschnitt auf der einen langen Seite. Wichtig: Denke daran, dass du trotzdem jeweils eine Seite für das Impressum und für die Datenschutzerklärung brauchst! Du kannst sie im Footer (Fußbereich unten) verlinken. Wann macht ein Onepager Sinn?Onepager sind optimal, wenn du nicht allzu viele Informationen „kurz & knackig“ auf einer Seite präsentieren möchtest. Du stellst dich und dein Angebot kurz vor in klar abgetrennten Abschnitten. Im Idealfall bietest du nur einen „Call to Action“ – also eine Handlungsaufforderung – für deine Besucher an, wie z.B. ein Kennlerngespräch buchen oder sich in den Newsletter eintragen. Gerade wenn es dir auch so geht, dass du dich schnell verzettelst, alles perfekt machen willst und dich eeewig lange mit den Website Texten und der Bildersuche aufhältst, könnte ein Onepager für dich optimal sein: Du bist hier wirklich gezwungen, auf den Punkt zu kommen. Und bleibst natürlich flexibel: Weitere Unterseiten lassen sich ja noch jederzeit anlegen und von der Startseite aus verlinken, wenn dein Business weiter wächst und du deine Angebote noch genauer beschreiben möchtest. Wie ist ein Onepager aufgebaut?Natürlich steht es dir auch hier frei, die Seite so aufzubauen, wie es dir beliebt. Optimalerweise versuchst du aber, deine Besucher*innen zu führen, sie abzuholen und zu einer einzigen Handlung zu bewegen – sich z.B. in deinen Newsletter einzutragen, ein Kennlerngespräch zu buchen o.Ä. Es ist also wichtig, hier mit klaren Buttons zu arbeiten und am besten auch von oben nach unten das Interesse zu wecken, ausreichend zu informieren und zu überzeugen. Ein möglicher Aufbau eines Onepagers könnte so aussehen: Was die einzelnen Abschnitte bedeutenHero SectionHier kommt klassischerweise ein aussagekräftiges Foto zur Geltung. Darüber oder daneben schreibst du möglichst kurz und präzise, worum es bei dir geht oder wobei du helfen kannst. Am besten fügst du auch direkt einen Button ein, mit dem sich deine Besucher*innen in den Newsletter eintragen können, ein Kennlerngespräch buchen können – je nachdem, was das Hauptziel deiner Website sein soll. Super wichtig: Klarheit und Kürze ist hier King! Da die Aufmerksamkeitsspanne durch ständige Unterbrechungen leider mehr und mehr sinkt, fällst du am besten direkt mit der Tür ins Haus. Kein nichtssagendes Foto mit einem „Herzlich Willkommen“ bitte! Ilga von endlichzuckerfrei.de macht es prima:
Kund*innen (emotional) abholenFalls du es in der Hero Section noch nicht getan hast, hast du hier die Möglichkeit, noch etwas genauer zu werden. Du kannst hier z.B.:
Wichtig ist, dass danach auch wirklich jeder weiß, was ihn hier erwartet, worum es geht und ob er bei dir erstmal generell richtig ist. Angebot / Leistung vorstellenHier präsentierst du – auch wieder kurz und knapp – was deine besten Angebote oder Leistungen sind. Ob mit oder ohne Preis entscheidest du (ich bin ja immer für mit, da weiß man gleich Bescheid). Falls deine Website es unterstützt, könntest du hier auch mit sogenannten Akkordeons arbeiten – da sind aufklappbare Bereiche, in denen du noch weitere Informationen unterbringen kannst. Dabei wird die Seite nicht zu lang und unübersichtlich, wer sich für mehr Infos interessiert, wird aber trotzdem fündig. Idealerweise bringst du auch hier gleich Buttons unter, über die man die Angebote oder Leistungen buchen kann, oder mit dir ein Vorgespräch vereinbaren kann (z.B. über calendly.de – ein teilweise kostenloses Buchungstool). Über michWie auch als Unterseite auf einer „normalen“ Website ist der Über mich Bereich mit der wichtigste auf der ganzen Seite! Zeig dich hier – nicht nur mit einem Foto (super wichtig!), sondern auch mit einem authentischen Text über dich. Hierbei ist keine Auflistung deiner Zertifikate gefragt (*gähn*), sondern ein Vertrauen und Nähe schaffen. Wie überzeugst du deine potentiellen Kund*innen, dass du die Richtige bist? Warst du in einer ähnlichen (Problem-)situation wie sie früher und konntest das für dich lösen? Warum bietest du an, was du tust? Was ist deine Leidenschaft? Was macht dich und deine Persönlichkeit aus? Die Kunst ist hierbei, die richtige Mischung zu finden aus nicht langweilen durch zu viele uninteressante Detailinfos und zu überzeugen mit Gemeinsamkeiten, Schmunzlern oder anderen Dingen, die dich besonders machen. KundenstimmenNicht zu unterschätzen – der sogenannte „Social Proof“. Gerade wenn wir jemanden noch nicht kennen, wollen wir gern wissen, was andere über ihn denken. Falls du online was bestellst: Liest du auch erst die Rezensionen? Und kaufst viel eher mit gutem Gewissen, wenn alle schreiben „Mega! Toll“ Beste Entscheidung ever“? Genau diese Wirkung erreichst du mit – bitte authentischen – Testimonials, also Kundenstimmen deiner ehemaligen Kund*innen. 3-4 Testimonials sind an dieser Stelle genug. Falls dein WordPress Theme es erlaubt, kannst du auch einen sogenannten Testimonial Slider einbauen, mit dem man viele Kundenstimmen platzsparend nach rechts weiterblättern kann. Blog / Podcast / Videos einbindenIm nächsten Abschnitt macht es Sinn, deinen regelmäßig veröffentlichten Content zu zeigen. Wenn deine Website nicht. nur als Visitenkarte dienen soll, die du ab und zu jemandem weiterleitest, solltest du unbedingt auf ein oder mehrere Formate setzen, um deinen Expert*inneninhalt zu teilen. Dadurch gewinnst du unter anderem:
Du kannst hier gezielt auf die Wünsche deiner (potentiellen) Kund*innen eingehen und echten Mehrwert schaffen. In diesem Blogartikel zeige ich dir, wie du einen Blog einrichten kannst. Kontakt(formular)An dieser Stelle solltest du ein Kontaktformular einbauen oder einen Button, mit dem man ein Kennlerngespräch buchen kann. Notfalls kannst du auch nur die E-Mail-Adresse oder Telefonnummer an dieser Stelle angeben, aber sei dir bewusst, dass sich in der Regel wesentlich weniger Menschen melden werden, je umständlicher es für sie wird. Wenn du gar keine 1:1 Dienstleistungen anbietest und z.B. nur deine E-Mail Liste aufbauen möchtest, könntest du statt einer Kontaktmöglichkeit auch einfach nochmal ein Newsletter Eintragsformular einbauen. Optional: Video / Bekannt aus Leiste, …Falls du noch Promotionmaterial von dir hast, wie z.B. ein Video, in dem du dich vorstellst oder eine „Bekannt aus“ Leiste die zeigt, wo schonmal von dir berichtet wurde, bring dies gern noch am Ende unter. Links einfügen beim OnepagerGanz klassisch fügst du in WordPress deine Seiten ins Menü ein, in dem du im Dashboard auf Design ➞ Menüs klickst und die jeweiligen Seiten in gewünschter Reihenfolge in dein Menü einfügst. Doch was macht man, wenn jeder Menülink nicht zu einer extra Seite, sondern zu einem Abschnitt auf der gleichen Seite verlinken soll? Schritt 1: Du richtest zunächst für jeden Abschnitt einen eindeutigen Anker ein (ich nenne das auch gern Sprungmarke). Schritt 2: Du verlinkst das Menü händisch zu dem jeweiligen Ankerpunkt. Wie das genau geht beschreibe ich dir in den nächsten Abschnitten: Anker mit Elementor einrichtenIn Elementor gehst du im Bearbeitungsmodus zum entsprechenden Bereich, z.B. dem Über mich Abschnitt, auf den du später verlinken möchtest. (Du kannst theoretisch auch einfach das Bild markieren oder die Überschrift – einfach das, wohin deine Website später springen soll, wenn man auf den Menülink klickt.) Als nächstes suchst du im Reiter Erweitert den Punkt CSS ID und vergibst hier einen eindeutigen Namen – also einen, den du noch nirgendwo sonst als CSS ID eingetragen hast. Hierbei darfst du keine Sonderzeichen oder Leerzeichen verwenden. Was geht:
Was nicht geht:
Wichtig: Du musst dir den exakten Namen in der exakten Schreibweise merken, inkl. der gewählten Groß- und Kleinschreibung. Ich empfehle dir, den entsprechenden Namen klein und zusammengeschrieben zu verwenden, z.B. kontakt, uebermich, angebot … Video: Anker / Sprungmarke mit Elementor einrichtenIm folgenden Video zeige ich dir nochmal im Detail wie du die Sprungmarken und das Menü einrichtest: Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube. Video laden YouTube immer entsperren Anker mit Divi einrichtenAuch bei Divi musst du wie beim Elementor eine CSS ID für den gewünschten Abschnitt vergeben. Hierzu rufst du im Bearbeitungsmodus zunächst die entsprechenden Einstellungen des Abschnitts auf: Hier findest du im 3. Reiter den Punkt „CSS ID“. Wie im vorherigen Abschnitt beschrieben vergibst du nun einen eindeutigen Namen ohne Sonderzeichen und Leerzeichen. Anker im Menü hinzufügenIn deinem WordPress Dashboard rufst du jetzt Design ➞ Menüs auf. This is where the magic happens. Falls noch nicht geschehen, legst du ein neues Menü an, nennst es z.B. Hauptmenü und wählst ganz unten als Position im Theme „Primäres Menü“ oder „Hauptmenü“ (oder etwas Ähnliches – die genaue Bezeichnung hängst vom jeweiligen Theme ab). Um die einzelnen Menüpunkte hinzuzufügen, klickst du nun links auf „Individuelle Links“. Dort trägst du dann bei URL deine komplette Webadresse inkl. einem Hashtag # und dem Ankertext ein, z.B. https://stefaniemotiwal.de#angebot und bei „Angezeigter Name“ das, was für diesen Abschnitt im Menü erscheinen soll: Theoretisch reicht es auch, bei URL nur den Ankertext mit # davor einzutragen, also z.B. #angebot Allerdings funktionieren diese Ankerlinks dann nur, wenn sich der Besucher auf der Startseite befinden. Ist er auf einem Blogartikel gelandet oder auf der Impressumsseite, funktionieren die Links dann nicht mehr. Daher würde ich empfehlen, immer den vollständigen Link inklusive deiner Webadresse einzutragen. Vorteile von Onepage WebsitesWas sind die größten Vorteile von Onepagern?
Fallen dir noch mehr Vorteile ein? Lass es mich gern unten in den Kommentaren wissen! Nachteile von Onepage WebsitesNachteile von Onepagern sind zum Beispiel:
Tipps für die Verwendung von OnepagernWenn du trotzdem eine Onepage Website erstellen willst, solltest du Folgendes berücksichtigen:
FazitFür kleinere Websites mit wenigen, klaren Angeboten können Onepage Websites, solange sie noch einen Bereich für Inhalte wie z.B. Blog verlinken, eine klassische Website ersetzen. Gerade wenn du dich erschlagen fühlst von der ganzen Arbeit, die eine Website inkl. aller Inhalte bedeutet, ist ein Onepager ein großartiger erster Schritt, um überhaupt erst einmal „online“ zu sein. In den meisten Fällen empfehle ich weiterhin, Unterseiten wie „Start/Home“, „Angebot“, „Über mich“, „Kontakt“ etc. zu erstellen, um das Angebot besser zu strukturieren, mehr Infos unterzubringen und bei den Suchmaschinen zu punkten. Falls du beim Erstellen deines Onepagers Hilfe benötigst, schau dir gern meine Angebotspakete an oder schreib mir eine Nachricht. Hey, ich bin Stefanieund unterstütze dich dabei, deine Website mit WordPress selbst zu erstellen und dabei nicht an der Technik zu verzweifeln. Mut machen und eine große Portion Motivation ist inklusive. Was macht einen guten OnePager aus?OnePager eignen sich hervorragend für Webseiten, die eine überschaubare Menge an Informationen haben, sowie für Nischen-Webseiten mit eingegrenztem und klar fokussiertem Thema. Zum Beispiel eignen sich OnePager sehr gut um einzelne Kampagnen, Projekte oder Events vorzustellen.
Was ist ein One Page?Als Onepager werden Websites bezeichnet, die aus einer einzigen HTML-Seite bestehen. Der Begriff „Onepager“ ist somit die Kurzform des Begriffs „Onepage-Website“. Auf einer Onepage-Website werden alle Inhalte auf einer langen, nach unten laufenden Seite präsentiert.
Warum One Pager?Da es keine Unterseiten gibt, hat ein One-Pager entweder keine Navigation oder die Navigation dient als Sprungmarke zu den einzelnen Sektionen auf der Unterseite. Dabei eignet sich eine One-Pager Website für Inhalte mit weniger Komplexität, bzw. für die Image Präsentation.
Was muss alles auf einen One Pager?Als OnePager werden Websites bezeichnet, die im Single Page Webdesign dargestellt werden, also aus nur einer einzigen HTML-Seite bestehen. Der Inhalt dieser Website wird vertikal aufgebaut und die Navigation erfolgt hierbei größtenteils durch herunterscrollen der Seite.
|