WordPress Onepager twenty twenty

Onepager mit WordPress

Autor:

Kategorien: , ,
Beitragsdatum: 12.04.2020 | Letztes Update: 12.11.2024

Onepager mit WordPress am Beispiel „Twenty Twenty“

In diesem Beitrag wollen wir zeigen, dass man an sich mit jedem Standardtheme von WordPress einen Onepager erstellen kann. Hier wollen wir das anhand des aktuellen Standardtheme „Twenty Twenty“ deutlich machen. Dabei nutzen wir ausschließlich den Block-Editor (Gutenberg).

Aber auch bei anderen Standardthemes wie z. B. Twenty Seventeen und Twenty Nineteen haben wir diese Lösung getestet. Diese Lösung funktioniert übrigens auch bei speziellen WordPress-Themes für Onepager z. B. mit dem Theme Onepage Express ohne irgendwelche zusätzlichen Plugins.

Je nach Theme sind dann ein paar kleine Anpassungen notwendig. Das hält sich aber durchaus im Rahmen. Das ist ja das Schöne an WordPress: Wenn man das Theme wechselt, kann man in der Regel je nach Theme mit relativ wenig Aufwand zumindest bei „kleinen“ Webseiten das Outfit ändern. Das funktioniert insbesondere dann ganz gut, wenn man keinen Pagebuilder, sondern den Block-Editor verwendet.

Was ist eigentlich ein Onepager

Zunächst: OnePager sind Webseiten, die in der Regel nur aus einer einzigen Seite bestehen. Alle Inhalte der Webseite sieht man, wenn man runterscrollt. Es kann natürlich auch noch die eine oder andere Seite geben, die separat erstellt wird. Dazu könnte z. B. eine „Über mich“- Seite, ein Kontaktformular oder eine „Anfahrt“-Seite gehören.

Bei OnePagern werden die einzelnen Abschnitte durch grafische Elemente (Bilder, Filme, etc.) abgegrenzt. Über das Menü erreicht man die einzelnen Abschnitte in der Regel durch entsprechend definierte Sprungmarken im Menü.

Onepager sind interessant für „kleine“ Webseiten. Für kleinere Unternehmen oder Freiberufler sind OnePager eine gute Möglichkeit, sich im Internet zu präsentieren und eine Art Visitenkarte zu erschaffen. Außerdem haben Onepager auch in Bezug auf die Usability einen großen Vorteil, weil man nicht endlos in Menüs suchen muss, um entsprechende Informationen zu finden. Aber wie gesagt: Es macht keinen Sinn, einen Onepager als Webseite zu erstellen, wenn die Firma z. B. ein großes Angebot an Produkten hat. Man kann sich übrigens auf einem Onepager durchaus auch verlaufen. Daher ist die Strukturierung der Inhalte sehr wichtig.

Weitere interessante Infos zu dem Thema „Warum und wann Onepager“ finden Sie hier.

Update

14.7.2022: Übrigens gibt es von uns jetzt auch eine Anleitung, wie man mit einem Block Theme wie Twenty Twenty-Two einen Onepager erstellt

Mit twenty twenty in WordPress einen Onepager erstellen? – läuft!

  • Theme einstellen
  • Die Startseite (Einstellung über den Customizer)
  • Ein Video als Cover
  • Der erste Abschnitt: Überschrift, Bild, Text
  • Der zweite Abschnitt: Überschrift, Bild, Text
  • Die Sprungmarken im Menü
  • Wir brauchen einen Abstandhalter
  • SEO und Onepager

Legen wir also los.

Zunächst müssen wir natürlich über Design > Themes das Theme „twenty twenty“ auswählen. In der Regel ist dieses Theme bereits vorinstalliert, so dass eine Installation nicht notwendig ist.

Schon mal vorab: Da nur einige wenige Anpassungen bezogen auf CSS benötigt werden, brauchen wir dafür nicht unbedingt ein childtheme.

Onepager twenty twenty WordPress

Die Startseite

Zunächst brauchen wir eine Startseite, die wir ganz normal über den Block-Editor erstellen. Es reicht zunächst, wenn wir die Seite anlegen und als H1-Überschrift „Startseite“ schreiben.Die Seite wird gespeichert und steht dann zur Verfügung. Auf unserer Beispielseite haben wir noch ein wenig zusätzlichen Text eingegeben:

Onepager twenty twenty Startseite WordPress

Jetzt müssen wir die Startseite auch als Startseite in WordPress eintragen. Das machen wir im linken Menü unter Einstellungen > Lesen.

Onepager twenty twenty Startseite WordPress

Eine andere Möglichkeit wäre auch über Design > Customizer > Startseiteneinstellungen.

Der erste Abschnitt: Überschrift, Bild, Text

Über die Reihenfolge der Inhaltselemente im Onepager kann man durchaus geteilter Meinung sein: Bild, Überschrift, Text oder Überschrift, Bild, Text. Die Reihenfolge sollte aber einheitlich sein. Sehr schön ist auch ein Video als Grafik auf der Startseite. Wie das geht, werden wir in einem folgenden Beitrag erläutern.

Zunächst fügen wir eine Überschrift ein. Dazu wählen wir den Block „H“ (Überschrift)

Danach wählen wir als Block den Cover-Block. Günstig ist in dem Fall bei den Einstellungen für den Block als Option die Einstellung „Gesamte Breite“ zu nutzen. Muss aber nicht sein. Rechts bei den Einstellungen für den Block können neben vielen Einstellungen auch die Overlay-Einstellungen geändert werden. Interessant ist dabei die Einstellung für die Hintergrunddeckkraft. Einfach mal probieren.

Block Cover WordPress

Unter dem Bild können wir anschließend einen entsprechenden Text eingeben: In der Regel reicht es, wenn man einfach den Text eingibt. Ansonsten kann man oben links auf das (+) klicken und einen Absatz-Block wählen.

Sprungmarken

Kommen wir jetzt zum Menü. Bevor wir loslegen, brauchen wir Sprungmarken. Sprungmarken benötigen eine eindeutige Bezeichnung. Diese wird durch das Attribut id=“bezeichnung“ innerhalb eines HTML-Befehls verwendet.

Das hört sich jetzt kompliziert an, ist aber über den Block-Editor einfach zu lösen. Man klickt auf die Überschrift der ersten Seite und trägt rechts bei „Erweitert“ unter „HTML-Anker“ z. B. „erste“ ein.

Block Link WordPress

Ähnlich verfahren wir bei den folgenden Abschnitten für die Startseite: Eingabe einer Überschrift mit dem Anker, sowie Bild und Text darunter einfügen.

Eintrag im Menü beim Onepager

Beim Menü müssen die Sprungmarken berücksichtigt werden. Da wird es jetzt ein wenig schwierig, weil hier als Menüpunkt individuelle Links angegeben werden müssen.

  • Wir gehen also folgendermaßen vor: Design > Menüs
  • Anschließend wählen wir „Individuelle Links“
  • Dann tragen wir unter der URL die Sprungmarke nach folgendem Muster ein:
    https://example.com/#erste
    Die Sprungmarke wird also mit einem # hinter der URL angegeben.
  • Anschließend klicken wir auf den Button „Zum Menü hinzufügen“.
  • Auf diese Art verfahren wir bei den folgenden Seiten genauso.
  • Zum Schluss muss das Menü noch gespeichert werden. Dazu geben wir oberhalb der Menüpunkte den Namen des Menüs an, z. B. „Hauptmenü“.
  • Abschließend klicken wir rechts oben auf Button „Menü speichern“.
Menü Indivdueller Link WordPress

Das fertige Menü für den Onepager

Und hier jetzt das fertige Menü:

Menü Indivdueller Link WordPress

Ein Problem und die Lösung

Sie sind zufrieden mit Ihrer Onepage-Seite unter WordPress? – Es geht noch schöner.

Wenn man die Seite aufruft, wird das Menü oben gezeigt. So weit, so gut. Aber: Klickt man auf einen Menüpunkt, z. B. „erste Seite“, dann könnte es sein, dass man die Überschrift nicht sieht. Scrollt man ein wenig nach oben, erscheint die Überschrift. Das sieht natürlich nicht so schön aus.

Erste Alternative über Abstandhalter

Und hier kommt die Lösung, die allerdings nicht so ganz einfach ist: Oberhalb der Überschrift bauen wir über den Block-Editor einen „Abstandshalter“ ein. Diesen Block findet man unter „Layoutelemente“.

Rechts sind wieder die Eigenschaften für den Block zu sehen. Unter „Erweitert“ gibt es leider keinen HTML-Anker. Daher müssen wir das etwas anders machen:

  • Wir klicken rechts oberhalb des Abstandshalters auf die drei senkrechten Punkte.
  • Dort klicken wir auf die Option „Als HTML bearbeiten“.
  • Wir sehen dann den HTML-Code für den Abstandhalter.
  • Hier fügen wir nach <div
    den folgenden Text ein:
    id="erste".
  • Anschließend sollte der folgende HTML-Code in dem Feld stehen:
    <div id="erste" style="height:100px" aria-hidden="true"
    class="wp-block-spacer">
  • Genau so verfahren wir bei den anderen Abschnitten.
Block Abstandhalter
Block Abstandhalter

Nicht erschrecken, wenn dann die folgende Meldung erscheint: „Dieser Block enthält unerwarteten oder ungültigen Inhalt“. Das funktioniert trotzdem. Diese Meldung ist in der Tat etwas seltsam, weil der HTML-Block auf jeden Fall ok ist.

Block Abstandhalter

Abschließend sollte man allerdings die HTML-Anker unter „Erweitert“ bei den Überschriften löschen.

Zweite Alternative über CSS

Alternativ zu den Abstandshaltern kann man auch den Innenabstand (padding) entsprechend ändern. Dazu muss man unter Design > Customizer > zusätzliches CSS die nebenstehenden CSS-Regeln eintragen. Die Höhe (hier angegeben mit 150px) kann natürlich individuell geändert werden.

Außerdem kann man per CSS dafür sorgen, dass die Überschrift nicht gezeigt wird („display: none;“) Das ist vielleicht sogar die einfachere Lösung. In diesem Fall dürfen natürlich die Anker bei den Überschriften nicht gelöscht werden.

/* Überschrift nicht zeigen */
h1.entry-title {
    display: none;
}


/* Abstand nach oben vergrößern */
h2 {
    padding-top:150px
}

Die komplette CSS-Datei mit diesen CSS-Regeln und sozusagen als Bonus mit dem sticky header befindet sich hier. Die entsprechenden CSS-Regeln können per Cut&Copy unter Design > Customizer > zusätzliches CSS eingetragen werden.

Man kann das natürlich auch mit einer eigenen Klasse verbinden, z. B. anker_h2.
In dem Fall muss man rechts in den Eigenschaften bei dem Überschriften-Block (H2) die entsprechende Bezeichnung für den HTML-Anker (hier: „zwei“) und zusätzlich diese spezielle Klasse für den Anker („anker_h2) unter zusätzliche Klassen erfassen.

Der Vorteil besteht darin, dass nur bei Ankern mit der Überschrift H2 ein entsprechend großer Platz nach oben („padding-top“) definiert ist. Bei allen anderen H2-Überschriften wird der Platz oben davon nicht berührt.

OnePager mit WordPress: Anker mit CSS-Klasse
Grafik: haurand.com

Und das ist die CSS-Klasse dazu:

/* für Anker */
h2.anker_h2 {
	padding-top: 150px; 
}

Und so könnte der Onepager mit Twenty Twenty aussehen

Hier klicken, um den Inhalt von YouTube anzuzeigen.
Erfahre mehr in der Datenschutzerklärung von YouTube.

In dem folgenden Video wird gezeigt, dass der Onepager unter twenty twenty auch auf einem iPhone oder allgemein auf mobilen Geräten funktioniert. Allerdings gibt es dabei ein Problem in der aktuellen Version von Twenty Twenty (Stand Mai 2020). Für dieses Problem gibt es eine Lösung, die man hier findet.

Hier klicken, um den Inhalt von YouTube anzuzeigen.
Erfahre mehr in der Datenschutzerklärung von YouTube.

Twenty Twenty Version 1.5

In den Kommentaren wurde darauf hingewiesen, dass es Probleme mit dem Onepager auf mobilen Geräten gibt. Dabei wurde ein Workaround genannt (Änderung der index.js).

Diese Änderung ist nicht mehr nötig. Am 15.5.2020 ist die neue Version 1.3 von twenty twenty freigegeben worden. In dieser Version ist der Fehler behoben. Eine genaue Information über die Änderungen erhält man z. B. auf der folgenden Webseite.

Beispiele für einen Onepager

Fazit

Ich denke, wir haben hier gezeigt, wie man mit dem Block-Editor ohne Nutzung eines Pagebuilders auf relativ einfache Weise einen Onepager erstellt. Der Block-Editor bietet mit den genannten Blöcken, u. a. „Cover“ alle Möglichkeiten für eine attraktive Gestaltung mit einem schlanken Theme.

Die Optik lässt sich übrigens noch schöner gestalten. Wir haben im Zusammenhang mit dem Beitrag „twenty twenty: Sticky header“ CSS-Regeln vorgestellt. Wenn man diese CSS-Regeln unter Design > Customizer > Zusätzliches CSS kopieren, sollte das noch netter aussehen. Außerdem hat man dann einen Sticky Header. Aber das steht alles in dem o. g. Beitrag.

Außerdem bietet WordPress ab der Version 5.5 noch die Möglichkeit von Block Patterns, so dass man auch Blöcke zusammenfassen und bei dem Onepager einbauen kann.

Zusätzlich kann man den Bildern, die man über den Block-Editor eingebunden hat, einen Parallax-Effekt verpassen. In dem Fall sieht das so aus, als wenn das Bild im Hintergrund stehen bleibt, während man hoch und/oder runter srcrollt. Auch das ist mit relativ wenigen Mitteln zu realisieren und wird in einem weiteren Beitrag beschrieben.

Grundsätzlich kann man nach diesem „Rezept“ bei den WordPress-Standtard-Themes wie twenty seventeen oder twenty nineteen oder eben mit twenty twenty einen Onepager erstellen. Allerdings sind in diesen Fällen noch einige kleinere Anpassungen notwendig. Das hat man in der Regel aber relativ schnell erledigt.

Auch bei vielen anderen Themes, die auf wordpress.org gelistet sind, dürfte das unproblematisch sein. Mittlerweile haben wir einen Onepager in ähnlicher Form auch mit dem sehr empfehlenswerten Theme Generatepress realisiert.

Weitere Beiträge zum Thema (Block Neueste Beiträge)

Wir freuen uns über eine Kontaktaufnahme

Was hältst du davon?

Wir hoffen, dieser Beitrag hat dir gefallen und wir würden uns über einen Kommentar freuen. Auch über Erweiterungen, Korrekturen, Hinweise oder sonstige Anmerkungen freuen wir uns sehr.

  • Auf der folgenden Seite findest du weitere interessante Beiträge sortiert nach Kategorien und Schlagwörtern.
  • Wenn du über unsere neuesten Beiträge informiert werden möchtest, kannst du dich gerne bei unserem Newsletter anmelden.

Mehr erfahren auf dieser Webseite

Grafik: haurand.com


Zum Blog

Mehr erfahren auf unserer Webseite

7 Antworten zu „Onepager mit WordPress“

  1. Avatar von Matthias
    Matthias

    Hallo Hans,

    eine sehr schöne Schritt-für-Schritt Anleitung. Vielen Dank dafür. Leider sehen die Abstände/Lücken zwischen den einzelnen Abschnitten nach Verwendung des Abstandshalters nicht wirklich schön aus. Gibt es hier einen Workaround der dafür sorgt, dass man die Überschriften trotzdem sofort sieht, wenn man auf einen Menüpunkt klickt?

    Liebe Grüße
    Matthias

    1. Avatar von hgg
      hgg

      Hallo Matthias,
      ich habe mir das gerade angesehen. Mich stört das persönlich nicht. Aber man kann natürlich auch einen Abstandhalter z. B. durch den Block „Trennzeichen“ ersetzen. Den Block könnte man im Prinzip auch noch etwas anders gestalten. Wenn man den Block in HTML umwandelt und als style den folgenden Code zufügt: style="height:100px", hat der Block eine Höhe von 100px.
      Aber vielleicht schreibst Du mal, wie Du Dir das genau vorstellst, dann schaue ich mir das mal an.
      Liebe Grüße
      Hans-Gerd

  2. Avatar von Lukas
    Lukas

    Hallo Hans-Gerd
    Danke für die gute Anleitung. Genau was ich gesucht habe. Müsste das auch aus dem mobilen Menu heraus funktionieren? Bei mir tut es dies nicht.

    1. Avatar von hgg
      hgg

      Hallo Lukas,
      das sollte funktionieren. In dem folgenden Link habe ich das im Firefox auf einem iPhone simuliert. Sonst musst Du hier mal die Seite posten, wo es Probleme gibt. Ich habe das Video übrigens in den Beitrag integriert.
      Hier eine Testseite von uns, auf der ich das gerade eingerichtet habe: http://test3.haurand.com/
      Viele Grüße
      Hans-Gerd

      1. Avatar von hgg
        hgg

        Es gibt ein Problem mit dem Onepager mobile menue beim Theme twenty twenty, das aber wie folgt gefixt werden kann:

        Danke auch für den Hinweis von Lukas, der den dritten Link beigetragen hat.

  3. Avatar von Marktplatz
    Marktplatz

    Ich finde deinen Beitrag echt spannend! 😊 Es ist beeindruckend zu sehen, wie vielseitig das Standardtheme „Twenty Twenty“ in WordPress genutzt werden kann. Ich hätte nie gedacht, dass man mit diesem Theme so einfach einen Onepager erstellen kann besonders, wenn man den Block-Editor verwendet!

    Die detaillierte Schritt-für-Schritt-Anleitung ist super hilfreich. Ich habe mich immer gefragt, wie man die Sprungmarken richtig einrichtet und den Abstandshalter effektiv nutzt. Die Tipps, wie man das Menü anpasst und mögliche Probleme mit der Darstellung löst, sind echt Gold wert.

    Besonders gut finde ich, dass du die verschiedenen Alternativen für den Abstandshalter und das CSS ansprichst. Das gibt einem die Flexibilität, je nach Bedarf die beste Lösung zu wählen. Die Möglichkeit, CSS anzupassen, um das Design noch weiter zu verfeinern, ist für mich ein echtes Plus.

    Vielen Dank für diesen aufschlussreichen Beitrag, ich werde deine Tipps definitiv beim nächsten Projekt ausprobieren!

    Viele Grüße Emma

    1. Avatar von hgg
      hgg

      danke für deinen Kommentar.
      Allerdings würde ich aktuell ein Block Theme wie z. B. das Theme Twenty Twenty-Four vorziehen, um einen Onepager zu erstellen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert