So erstellen Sie eine einseitige Website mit einem beliebigen WordPress-Thema

Wir bekommen viele Fragen dazu, wie man eine einseitige Website erstellt oder ob wir einseitige WordPress-Themes verkaufen. Lassen Sie mich diese beiden Fragen gleich zu Beginn beantworten. Jedes WordPress-Theme kann eine einseitige Website sein und ich werde Ihnen zeigen, wie einfach es ist.

Was ist eine One-Page-Website?

Eine einseitige Website ist nichts anderes als eine Website mit allen wesentlichen Inhalten auf einer einzigen Seite, normalerweise einer Homepage.

Es wird hauptsächlich von Unternehmen verwendet, die ein einzelnes Produkt oder eine Dienstleistung klar und direkt bewerben möchten . Einige Beispiele sind die Präsentation eines Portfolios für Ihre Kunden, die Organisation einer Veranstaltung oder die Gründung eines neuen Unternehmens.

Wenn Sie sich auf einer einseitigen Website befinden, führt Sie ein Klick auf Navigationslinks nicht zu einer neuen Seite, sondern springt oder scrollt auf derselben Seite nach unten zum Inhaltsbereich, der mit dem Link verbunden ist. Dies kann die Benutzererfahrung viel besser machen und das Benutzerengagement erhöhen.

Es gibt viele einseitige WordPress-Designs, die online verfügbar sind, aber wie ich bereits sagte, können wir jedes Design mit nur ein wenig Arbeit in einen One-Pager verwandeln .

Wie erstelle ich eine einseitige Website mit WordPress?

Ankerlinks

Für eine einfache einseitige Website benötigen wir lediglich ein Menü , Inhalt und Ankerlinks . Ich glaube, Sie alle wissen, was Menüs und Inhalte bewirken, also lassen Sie uns ein wenig über Ankerlinks sprechen. Ankerlinks bestehen aus einem normalen Link, der auf den Anker zeigt, und dem Anker selbst. Links, die auf den Anker verweisen, sind normale Links, die mit dem # -Zeichen beginnen. Und der Anker selbst ist ein bestimmter Ort irgendwo auf Ihrer Seite. Schauen wir uns ein einfaches Beispiel an.

Dies ist unser Link im Menü, der auf den Anker zeigt:

 <a href="#middle">Go to the middle</a>

Und das ist unser Inhalt mit dem Anker selbst:

 <h1>Learning about anchor links</h1> <p> Some lorem ipsum content ….</p> <h2>Middle of the page</h2> <p> Some lorem ipsum content ….</p>

In diesem Fall ist #middle unser Ankerlink und id=”middle” ist unser Anker. Wenn wir auf den Link „Gehe zur Mitte“ klicken, springen wir zu unserem Anker mit dem Titel „Mitte der Seite“. Das ist es! So können wir die einfachste einseitige Website erstellen. Sie können Ihrer Website beliebig viele Anker hinzufügen. Nehmen wir unser neu erworbenes Wissen und verwenden es auf einer WordPress-Seite.

Erstellen Sie Ankerlinks mit dem WordPress-Menü

Zu diesem Zweck habe ich bereits eine einfache einseitige Website mit unserem GrowthPress-Theme erstellt, die unser praktisches Beispiel sein wird. Zunächst habe ich eine neue Seite erstellt und einige Inhalte hinzugefügt. Der Inhalt besteht nur aus einigen Absätzen und Titeln. Wir können fast jedem HTML-Element Anker hinzufügen, aber in unserem Fall fügen wir sie allen Titeln im Inhalt hinzu.

Sie können aus dem Screenshot ersehen, dass wir zum Bearbeiten des HTML-Inhalts den Editor von Visual auf Text ändern müssen. Wir können jetzt alle HTML-Tags in unserem Inhalt sehen. In unserem Fall verwenden alle Titel das <h2> -Tag und wir werden sie zum Hinzufügen von Ankern verwenden. Genau wie im obigen Screenshot müssen Sie diesen Tags eine ID mit dem Anker hinzufügen. Zum Beispiel: <h2 id=”our-anchor”>Some Title</h2> . Beachten Sie, dass Anker ohne # geschrieben werden, aber alle Ankerlinks müssen mit # beginnen. Sobald wir alle Anker in unseren Inhalten hinzugefügt haben, können wir sie mit Ankerlinks verbinden.

Wenn Sie mit WordPress vertraut sind, wissen Sie, dass wir Menülinks im wp-admin -> Appearance -> Menus ändern können und genau hier erstellen wir unsere Ankerlinks.

Auf dem Screenshot können Sie sehen, dass ich benutzerdefinierte Links ausgewählt und anstelle der klassischen URL den #about-us Ankerlink hinzugefügt habe. Ein Klick auf diesen Link springt nun zu unserer Anker id=”about-us” im Inhalt. Sobald wir alle Ankerlinks hinzugefügt haben, ist unsere einfache einseitige Website fertig. Klicken Sie auf die neu erstellten Links und überzeugen Sie sich selbst!

Flüssiges Scrollen

Ja, ich stimme voll und ganz zu, die einseitige Website, die wir bisher gemacht haben, ist großartig, aber diese sofortigen Sprünge sind nicht so großartig wie reibungsloses Scrollen, oder? Um ein reibungsloses Scrollen zu erreichen, müssen wir unserer Website ein wenig Javascript-Code hinzufügen.

Die meisten Premium-Designs haben eine Art Feld zum Hinzufügen von benutzerdefiniertem Code. Zum Beispiel kannst du in unseren Themes zu wp-admin -> Customizer -> Theme Options -> Custom Code gehen, wo du die Felder findest, die du verwenden kannst, um benutzerdefinierten Code hinzuzufügen, wie wir es jetzt tun werden.

Wenn Ihr Thema keinen Platz für den benutzerdefinierten Code hat, können Sie ein geeignetes Plugin verwenden. Ich würde das Plug-in Insert Headers and Footers von WPBeginner empfehlen. Sobald Sie das Plugin aktiviert haben, finden Sie Felder zum Hinzufügen von benutzerdefiniertem Code in wp-admin -> Einstellungen -> Kopf- und Fußzeilen einfügen.

Fügen Sie den folgenden Code in eines der Felder ein (wir empfehlen die Verwendung von Skripten in der Fußzeileneinstellung) und jetzt können Sie Ihre Ankerlinks reibungslos scrollen. Herzliche Glückwünsche! Sie haben gerade eine einseitige Website mit einem beliebigen WordPress-Thema erstellt!

 <script> ( function( $ ) { $(document).on('click', 'a[href*="#"]:not([href="#"])', function(e) { if (location.pathname.replace(/^\//,'') === this.pathname.replace(/^\//,'') && location.hostname === this.hostname) { var hashStr = this.hash.slice(1); var target = $(this.hash); target = target.length ? target : $('[name=' + hashStr +']'); if (target.length) { $('html, body').animate({ scrollTop: target.offset().top }, 1000); window.location.hash = hashStr; return false; e.preventDefault(); } } }); }(jQuery)); </script>

Der obige Code animiert den Bildlaufeffekt, wenn Sie auf einen Ankerlink klicken, und aktualisiert auch die aktuelle Browser-URL, um den angeklickten Ankerlink widerzuspiegeln. Überprüfen Sie unser Endergebnis auf der fertigen einseitigen Website.

Wie stelle ich den Offset für reibungsloses Scrollen ein?

Falls Sie ein festes Sticky-Menü haben, würde ich empfehlen, auch Offset einzustellen, damit der Beginn des Inhalts unterhalb Ihres Sticky-Menüs beginnt. Um dies zu erreichen, müssen Sie diese Codezeile bearbeiten:

 $('html, body').animate({ scrollTop: target.offset().top}, 1000);

Das einzige, was wir hier tun müssen, ist, einen Wert unseres Offsets hinzuzufügen. Es sollte mindestens so groß sein wie die Höhe Ihres fixierten Sticky-Menüs.

 $('html, body').animate({ scrollTop: target.offset().top - 180 }, 1000);

Damit vermeiden wir ein Problem, bei dem sich der Anfang Ihres Inhalts hinter dem Menü versteckt.

Vorteile von One-Page-Websites

Nachdem Sie nun wissen, wie Sie eine einseitige Website erstellen, gehen wir die Vorteile einer einseitigen Website durch.

One-Page-Websites bieten eine bessere mobile Benutzererfahrung

One-Page-Websites bestehen aus einer einzelnen, lang scrollenden Seite, die sich perfekt für die Anzeige auf Mobilgeräten eignet. Denken Sie an Facebook und seinen News Feed. Sie kommen nicht umhin, immer weiter im Kaninchenbau zu scrollen. Eine einseitige Website ist genau dafür konzipiert und das kontinuierliche Scrollen eignet sich perfekt für mobile Geräte.

Angesichts der begrenzten Bildschirmfläche auf Mobilgeräten ist es viel einfacher, weiter nach unten zu scrollen, als herauszufinden, wo sich das Menü versteckt, und dann auf den richtigen Link zu klicken, um zur nächsten Seite Ihrer Website zu gelangen. Mit anderen Worten, eine One-Page-Website bietet jedem, der Ihre Website auf seinem Mobilgerät besucht, ein großartiges Benutzererlebnis.

Einseitige Websites benötigen weniger Text

Eine traditionelle, mehrseitige Website erfordert viel Text, damit sie nicht zu leer oder, schlimmer noch, unfertig aussieht. Vergleichen Sie das mit einseitigen Websites, die unübersichtlich und überwältigend aussehen, wenn Sie zu viel Inhalt haben. Daher sollten Sie Ihren Text auf ein Minimum beschränken und kurze Sätze und Absätze verwenden, um die wichtigsten Informationen zu vermitteln.

Ein weiterer Vorteil dieses Ansatzes ist die Tatsache, dass das Schreiben von Texten eine der entmutigenderen Aufgaben sein kann, die mit dem Start einer Website verbunden sind. Eine einseitige Website könnte eine gute Wahl sein, wenn Sie Ihre Website-Kopie nicht vollständig ausgearbeitet haben.

One-Page-Websites funktionieren gut mit Bildern

Bilder können Wunder für jede Art von Website bewirken, einschließlich One-Page-Websites. Wenn Sie Bilder zusammen mit dem Parallax-Effekt verwenden, können Sie sogar einen optisch ansprechenden Effekt auf Ihrer Website erzielen.

Auch wenn Sie sich entscheiden, den Parallax-Effekt nicht zu verwenden, können Sie Bilder dennoch effektiv auf einer einseitigen Website verwenden. Sie können sie verwenden, um zwischen verschiedenen Abschnitten zu unterscheiden, ganz zu schweigen von Fotogalerien oder Portfoliobildern.

Sie können auch Bilder nutzen, um die SEO Ihrer Website zu verbessern, da Bilder dazu neigen, in Suchmaschinenergebnissen zu erscheinen, wenn sie richtig optimiert sind. Achten Sie daher darauf, Ihre Bilder mit aussagekräftigen Titeln zu benennen und Alt-Tags zu jedem Bild hinzuzufügen, das Sie Ihrer Website hinzufügen.

One-Page-Websites können das Engagement und die Conversions der Benutzer steigern

Einer Studie zufolge kann eine einseitige Website im Vergleich zu ihrem mehrseitigen Gegenstück zu höheren Conversions führen. Der Grund dafür ist einfach: Eine einseitige Website ist normalerweise sehr fokussiert und darauf ausgelegt, Besucher zum Handeln zu bewegen.

Es hat eine fokussiertere Botschaft und es ist für Ihre Besucher einfacher zu verstehen, was sie tun sollen, wenn sie das Ende der Seite erreichen.

Wenn Sie nur eine Wahl haben, klicken Sie einfach auf diese Schaltfläche oder rufen Sie zum Handeln auf, anstatt von Seite zu Seite zu blättern und sich zu fragen, was Sie als Nächstes tun sollten.

One-Page-Websites sind einfacher zu navigieren

Erwähnenswert ist auch, dass One-Page-Websites einfacher zu navigieren sind. Da sich alles auf einer Seite befindet, ist es sehr schwer, sich zu verirren und den Weg zurück zum Anfang zu finden, insbesondere auf mobilen Geräten.

Während Sie Ankerlinks verwenden können, um zu verschiedenen Abschnitten der Seite zu springen (wie in diesem Artikel gezeigt), ist es genauso einfach, nach oben oder unten zu scrollen und den gewünschten Abschnitt zu finden.

Darüber hinaus führt eine gut gestaltete einseitige Website den Besucher auf eine Reise, die die Geschichte Ihres Unternehmens oder Ihrer Marke auf logische Weise erzählt.

One-Page-Websites machen es einfacher, eine bestimmte Zielgruppe anzusprechen

Wie bereits erwähnt, sind Single-Page-Websites so konzipiert, dass sie Besucher zum Handeln anregen. Sie können dies zu Ihrem Vorteil nutzen und eine ganz bestimmte Zielgruppe ansprechen, die bereit ist, den nächsten Schritt zu tun. Indem Sie sie durch die verschiedenen Bereiche Ihrer Website führen, können Sie Ihr Produkt oder Ihre Dienstleistung präsentieren, ihnen zeigen, wie sie ihr Problem lösen, und ihnen die Lösung in Form eines Aufrufs zum Handeln anbieten.

Dieser Ansatz funktioniert hervorragend, wenn Sie ein sehr spezifisches Keyword oder eine Zielgruppe ansprechen, die bereits weiß, dass sie ein bestimmtes Problem haben und nach einer Lösung suchen.

Nachteile der Verwendung einer One-Page-Website

Nachdem die Profis aus dem Weg geräumt sind, werfen wir einen Blick auf einige der Nachteile der Verwendung einer einseitigen Website.

Es wird schwieriger, Google Analytics-Daten zu analysieren

Inzwischen wissen Sie wahrscheinlich, dass Google Analytics Ihnen jede Menge nützlicher Informationen über Ihre Website-Besucher liefern kann. Nach der Installation auf Ihrer Website können Sie sehen, welche Seiten beliebt sind, welche Beiträge neue Besucher anziehen und welche Seiten optimiert werden müssen, damit die Besucher länger auf Ihrer Website bleiben.

Bei einer einseitigen Website sind Sie auf nur eine Seite beschränkt. Ihre Besucher landen auf derselben Seite und steigen auf derselben Seite wieder aus, was es schwieriger macht zu erkennen, welche Teile Ihrer Website verbessert werden müssen. Wenn Sie sich für die One-Page-Website-Route entscheiden, melden Sie sich unbedingt für ein Tool wie Hotjar an, um eine visuelle Heatmap darüber zu erhalten, wie die Leute Ihre Website nutzen.

Das Teilen Ihrer Website in sozialen Medien ist schwieriger

Bei einer einseitigen Website haben Sie nur eine URL, die Sie in sozialen Medien teilen können. Dies kann sich schnell wiederholen, ganz zu schweigen davon, dass es nicht viele Möglichkeiten bietet, Leute zu verschiedenen Teilen Ihrer Website zu schicken, um Antworten auf ihr Problem zu finden. Sobald Sie Ihre Haupt-URL teilen, wird Ihre gesamte Website geteilt und nicht nur eine bestimmte Seite oder ein Abschnitt, wie Sie es bei einer mehrseitigen Website tun können.

Eine einfache Problemumgehung wäre die Einbindung eines Blogs auf Ihrer Website, in dem Sie nützliche und hilfreiche Inhalte teilen können, die Ihr Publikum anziehen. Dies macht es einfacher, Ihre Website in sozialen Medien zu teilen, während der Großteil der Informationen weiterhin auf einer Seite komprimiert bleibt .

Das Laden einer Seite kann länger dauern

Je nach Größe Ihrer einseitigen Website und der Art der Inhalte, die Sie teilen, sollten Sie sich bewusst sein, dass das Laden Ihrer Website länger dauern kann.

Im Allgemeinen neigen One-Page-Websites dazu, ziemlich dünn zu sein, aber wenn Sie viele Bilder haben, die nicht für das Web optimiert sind, werden Sie langsame Ladezeiten erleben. Dasselbe gilt, wenn Sie viele Videoinhalte auf Ihrer Website haben.

Daher ist es wichtig, dass Sie Ihre Bilder im geeigneten Format speichern und ihre Größe komprimieren, bevor Sie sie Ihrer Website hinzufügen. Eine weitere zu berücksichtigende Sache ist die Verwendung von Lazy Loading für Bilder und Videos, damit sie geladen werden, wenn der Benutzer zu diesem bestimmten Abschnitt Ihrer Website herunterscrollt, anstatt sie sofort zu laden.

Sie sind mit Keyword-Targeting begrenzt

Eine einseitige Website bietet Ihnen nicht viele Möglichkeiten, mehrere Keywords gezielt anzusprechen. Bei einer mehrseitigen Website können Sie für jedes Keyword, auf das Sie abzielen möchten, eine separate Seite haben. Eine einseitige Website funktioniert nicht auf die gleiche Weise.

One-Page-Websites, wie im Abschnitt „Profis“ erwähnt, sind für einen bestimmten Zweck und eine bestimmte Zielgruppe konzipiert. Das bedeutet normalerweise, dass Sie auf ein bestimmtes Schlüsselwort und seine Variationen abzielen, was bedeutet, dass Sie besser dran sind, eine mehrseitige Website zu erstellen, wenn Sie auf mehrere, unterschiedliche Schlüsselwörter abzielen müssen.

Es gibt zwar keine Regel, die besagt, dass Sie nicht mehr als ein bestimmtes Schlüsselwort pro Seite einbauen können, aber Sie werden Ihre Seite nicht angemessen optimieren können, insbesondere wenn Sie bedenken, dass Light Copy bei One-Page-Websites besser funktioniert.

Sie können keine fortgeschrittenen SEO-Taktiken anwenden

Apropos SEO, eine einseitige Website erlaubt es Ihnen nicht, fortgeschrittene SEO-Taktiken, die als Siloing bekannt sind, anzuwenden. Siloing bezieht sich auf die Praxis, Ihre Website in Hauptinteressenbereiche zu strukturieren, damit Sie Ihre Autorität in diesen Bereichen demonstrieren können. Laienhaft ausgedrückt ist es die Praxis, Kategorien und Unterkategorien zu erstellen, um Ihre Inhalte zu organisieren.

Der Hauptvorteil von Siloing besteht darin, dass es Möglichkeiten zum Ranking für eine Vielzahl von Schlüsselwörtern und Schlüsselwortphrasen eröffnet, die fast alle Fragen eines interessierten Besuchers abdecken und alle möglichen Einwände abdecken.

Während sich mehrseitige Websites darin auszeichnen, werden einseitige Websites schnell zu überwältigend und unübersichtlich, was Ihr Publikum frustriert zurücklässt.

Auf einseitigen Websites kann es an Details mangeln

Schließlich können One-Page-Websites aufgrund von kurzen und prägnanten Texten und Nachrichten möglicherweise nicht in der Lage sein, Ihren Besuchern alle erforderlichen Details bereitzustellen. Dies kann dann zu einer erhöhten Anzahl von E-Mails führen, in denen um Klarstellungen gebeten wird, oder Ihre Besucher verwirrt zurücklassen.

Sie können dieses Problem lösen, indem Sie Ihrer einseitigen Website einen Blog hinzufügen und den Besuchern detailliertere Inhalte zur Verfügung stellen und Fragen beantworten, sobald sie auftreten.

Sollten Sie eine One-Page-Website verwenden?

Wie Sie sehen können, gibt es sicherlich Vor- und Nachteile bei der Verwendung einer One-Page-Website. Woher wissen Sie also, ob eine One-Page-Website die richtige Wahl für Ihr Unternehmen ist?

Wenn Sie gerade erst mit Ihrem Unternehmen anfangen und viel Geschäft durch Mundpropaganda generieren, ermöglicht Ihnen eine einseitige Website, Ihr Unternehmen online zu stellen, ohne zu viel Zeit für Design und Entwicklung aufwenden zu müssen.

Wenn Sie sich hingegen darauf konzentrieren möchten, mehr organischen Traffic zu erzielen, indem Sie sich auf SEO konzentrieren, und wenn Sie Ihre Geschäftstätigkeit erweitern, ist eine mehrseitige Website besser für Sie geeignet.

Am Ende ist es eine Frage der persönlichen Vorlieben und Ihrer Geschäftsziele. Bewerten Sie, wo Sie mit Ihrem Unternehmen stehen, und notieren Sie sich, was Sie zu erreichen versuchen. Berücksichtigen Sie dann die oben genannten Vor- und Nachteile, bevor Sie die endgültige Entscheidung treffen.

Fazit

Wir bekommen wirklich viele Fragen, ob wir eine Art One-Page-Theme haben, und ich glaube, die Situation ist bei anderen Theme-Autoren die gleiche. Dieser Artikel soll verdeutlichen, dass alle WordPress-Themes auch als One-Pager-Websites verwendet werden können und wenn Sie möchten, können Sie Ihre aktuelle Website im Handumdrehen in einen One-Pager umwandeln. Wir haben auch die Vor- und Nachteile von einseitigen Websites behandelt und Ihnen mitgeteilt, wie Sie entscheiden können, ob dies die richtige Wahl für Ihre Website ist.

Lassen Sie mich wissen, ob der Artikel Ihnen geholfen hat , Websites mit einer Seite besser zu verstehen, und hinterlassen Sie mir einen Kommentar, wenn Sie weitere Fragen haben.