![](https://artif.com/blog/wp-content/uploads/2021/02/Screenshot-2021-01-15-145852.png)
Standard Theme: WordPress twenty twenty als Basis.
Mit der Startseite beginnen:
- Theme twenty twenty 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
![](https://artif.com/blog/wp-content/uploads/2021/02/Screenshot-2021-01-15-100703-1024x615.png)
Ganz einfach Schritt für Schritt:
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 Child Theme erstellen.
![](https://artif.com/blog/wp-content/uploads/2021/02/Screenshot-2021-01-15-101243-1024x466.png)
Wir fangen mit der Startseite an, 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. wir haben noch ein wenig zusätzlichen Text eingegeben:
![](https://artif.com/blog/wp-content/uploads/2021/02/Screenshot-2021-01-15-101452-1024x606.png)
Jetzt müssen wir die Startseite auch als Startseite in WordPress eintragen. Das machen wir im linken Menü unter Einstellungen > Lesen.
![](https://artif.com/blog/wp-content/uploads/2021/02/Screenshot-2021-01-15-102330-1024x577.png)
Eine andere Möglichkeit besteht über
Design > Customizer > Startseiteneinstellungen.
![](https://artif.com/blog/wp-content/uploads/2021/02/logo-1024x699.png)
Das Logo und Website-Icon einfügen
Der erste Abschnitt: Überschrift, Bild, Text
![](https://artif.com/blog/wp-content/uploads/2021/02/Screenshot-2021-01-15-144525-1024x497.png)
Über die Reihenfolge der Inhaltselemente im Onepager kann man durchaus geteilter Meinung sein: Bild, Überschrift, Text oder Überschrift, Bild, Text. Die Reihenfolge sollte aber innerhalb einer Website einheitlich sein.
Zunächst fügen wir eine Überschrift ein. Dazu wählen wir den Block „H“ (Überschrift)
![](https://artif.com/blog/wp-content/uploads/2021/02/Screenshot-2021-01-15-144552-1024x691.png)
Danach wählen wir als Block den Cover-Block. Rechts in 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.
![](https://artif.com/blog/wp-content/uploads/2021/02/Screenshot-2021-01-15-145720-1024x691.png)
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.
Genau so gehen wir auch wieder bei den folgenden Abschnitten vor: Überschrift notieren, Bild als Cover-Bild einfügen, Text erfassen.
Das Ergebnis:
![](https://artif.com/blog/wp-content/uploads/2021/02/Screenshot-2021-01-15-145852-1024x483.png)
Sprungmarken
![](https://artif.com/blog/wp-content/uploads/2021/02/Screenshot-2021-01-15-150851-1024x698.png)
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.
Eintrag im Menü beim Onepager
![](https://artif.com/blog/wp-content/uploads/2021/02/Screenshot-2021-01-15-150851-1-1024x698.png)
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/#uberschrift
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ü beim Onepager erstellen
![](https://artif.com/blog/wp-content/uploads/2021/02/menu1-1024x516.png)
- Design/Menüs wählen.
- Name des Menüs angeben, z.B. Hauptmenü
- Position im Theme die Hacken bei Horizontales Desktop-Menü und Mobil-Menü lassen.
- Menü erstellen – klicken.
![](https://artif.com/blog/wp-content/uploads/2021/02/menu2-1024x581.png)
- Anschließend wählen wir Startseite und „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 oberhalb der Menüpunkte den Namen des Menüs eingeben, z. B. „Hauptmenü“.
- Abschließend rechts oben auf Button „Menü speichern“ klicken.
![](https://artif.com/blog/wp-content/uploads/2021/02/menu3-1024x755.png)
Footer Menü erstellen
![](https://artif.com/blog/wp-content/uploads/2021/02/menu6-1024x617.png)
- Erstellen ein neues Menü – klicken.
- Name des Menüs in den Fall Footer angeben.
- Welche Seiten in Footer Menü angezeigt werden sollen , auswählen.
- Menü Einstellungen Footer Menü auswählen.
- Abschließend klicken wir rechts oben auf Button „Menü speichern“.
Galerie erstellen
![](https://artif.com/blog/wp-content/uploads/2021/02/gallery1.png)
- Auf „+“ und Alle durchsuchen – klicken.
- Medien / Galerie auswählen.
- Dateien hochladen oder wenn schon vorher geladen wurden , aus der Mediathek die Bilder auswählen.
- Anschließend Ausrichtung ändern klicken und Weite Breite oder Gesamte Breite wählen.