5. WordPress Website bearbeiten – So füllst du deine Page mit Inhalt
Beim Inhalt gibt es eine ganze Flut von Möglichkeiten, wie du deine Website befüllst. Ich gebe dir hier deshalb einen kompakten Überblick, über die Tools, die du unbedingt kennen solltest.
Das WordPress Dashboard im Überblick
Der erste Blick ins WordPress-Dashboard kann ziemlich überfordernd sein. Aber keine Bange: Von den vielen kleinen Knöpfen, die du siehst, brauchst du definitiv nicht alle.
Ich stelle dir hier ein paar der wichtigsten Features und Funktionen von WordPress vor, damit du dich in das System einarbeiten kannst. Den Rest findest du dann vermutlich (genau wie ich am Anfang) mit etwas Experimentieren heraus.
Der erste Blick in das Dashboard kann einschüchternd sein. Aber du kriegst das schon hin!
Screenshot: trusted.de
Quelle: wordpress.org
Schauen wir uns zuerst die wichtigsten Punkte im linken Seitenmenü (deiner Hauptnavigation) an:
Seiten erstellen und Seitennavigation
Unter dem Punkt “Seiten” findest du die einzelnen Seiten, die gemeinsam deine Website ausmachen. Dazu zählen etwa deine Startseite, Teamseite, Seite zur Kontaktaufnahme und so weiter. Die musst du allerdings erst anlegen.
Die Seiten bestimmen die Grundstruktur deiner Website
Screenshot: trusted.de
Quelle: wordpress.org
Tipp: Wenn du meinen Punkt zur Planung befolgt hast, bist du bei der Erstellung deiner Seitennavigation besonders flott. Du weißt ja schließlich schon ungefähr, welche Seiten du benötigst.
Erstelle mit dem Knopf “Neue Seite erstellen” alle Seiten, die du benötigst. Wenn du eine neue Website anlegst, landest du im Gutenberg-Editor, den ich dir gleich vorstelle. Hier bearbeitest du dann die jeweiligen Inhalte deiner einzelnen Seiten. Klicke auf “Veröffentlichen” und deine Website ist gespeichert.
Hinweis: “Veröffentlichen” heißt aber auch, dass deine Website online ist! Ohne “Coming-Soon”-Seite dazwischen können User ab diesem Moment deine Inhalte sehen.
Du kannst Seiten (und Beiträge) auch als Entwurf speichern, dann sind diese Inhalte jedoch nicht im Frontend, also der fertigen Website, sichtbar.
Befülle deine Seiten mit den passenden Inhalten
Screenshot: trusted.de
Quelle: wordpress.org
Ein Tool, das du unbedingt kennen solltest: der Quick-Edit. Diesen findest du in der Seitenübersicht am unteren Rand der jeweiligen Seite. Klickst du hier auf den Quick-Edit, kannst du das Veröffentlichungsdatum, den Seitentitel, Veröffentlichungsstatus und mehr festlegen.
Lege im Quickedit unter “Reihenfolge” eine Abfolge für deine Seiten fest. Dabei lohnt es sich, deine Seiten in Zehnerschritten zu nummerieren. Also 10 für die Startseite, 20 für die Kontaktseite, 30 für die Teamseite und Co. Das hat zwei Vorteile.
Das hat zwei Gründe: So werden dir die Seiten nach einem Refresh in der entsprechenden Reihenfolge in der Übersicht angezeigt. Das sorgt für mehr Übersicht. Der Vorteil der Zehner-Schritte liegt hingegen darin, dass du im späteren Verlauf noch Seiten einfügen kannst, ohne alles nochmal von vorn nummerieren zu müssen.
Der Quick-Edit hilft dir, Seiten zügig auf deine Bedürfnisse anzupassen
Screenshot: trusted.de
Quelle: wordpress.org
Die zwei Wege der Startseite
Normalerweise erhältst du mit der Installation eines Themes auch automatisch eine Startseite. Und hier zeigt sich, dass WordPress ursprünglich als Blogging-System entwickelt wurde, denn: Auf der Startseite tauchen alle neuen Beiträge (z. B. Blogartikel) auf, die du veröffentlichst.
Praktisch für einen Blog oder eine Newsseite, eher nicht so für Seiten wie Portfolios oder Shops, die gar keine Blogs sein wollen.
Das kannst du aber ändern. Lege hierfür eine eigene Seite an und benenne sie am besten auch “Startseite” oder “Home”. Wichtig: Du musst die Seite über den entsprechenden blauen Knopf veröffentlicht haben. Wechsle dann zu “Einstellungen” und “Lesen”.
Wähle eine statische Seite als deine Startseite aus
Screenshot: trusted.de
Quelle: wordpress.org
Ändere dann im Punkt “Deine Homepage zeigt” die Option zu “Eine statische Seite” und wähle im Dropdown deine Startseite aus. Nicht vergessen: “Änderungen speichern” klicken!
Tipp: Das funktioniert übrigens auch, wenn du einen Blog als Zusatz zu deiner Website nutzen willst, statt als Startseite. Erstelle eine Seite mit dem Titel “Blog” o. Ä. und wähle diese in der “Lesen”-Ansicht als Beitragsseite aus. Wenn User nun auf deine Blogseite klicken, finden sie dort eine automatisch erstellte Auflistung aller deiner Beiträge.
Anpassungen im Customizer
Jetzt, wo du mindestens eine Startseite hast, lohnt sich ein Blick in den Customizer. Mit diesem Tool bestimmst du den Look deiner Website wie Logo, Farben und Co. Du erreichst den Customizer im Dashboard über den Reiter “Design” und “Customizer” oder “Design” und “Website-Editor”.
Mit dem Customizer bestimmst du globale Einstellungen wie Farben, Schriftarten, etc. Du bearbeitest damit keine einzelnen Seiten, sondern den Look deiner gesamten Page. Anpassungen an einzelnen Seiten nimmst du mithilfe des Block-Editors oder eines Pagebuilders vor; dazu kommen wir gleich!
Hinweis: Was der Customizer genau kann, ist von deinem Theme abhängig. Während Themes wie Divi dir einen ganzen Pagebuilder zur Verfügung stellt, geben dir andere Themes weniger Anpassungsoptionen an die Hand. Ich habe dir als Beispiele mal den Customizer des Themes ”Neve” und den Customizer des WordPress-Themes “Twenty Twenty-Two” abgebildet:
Hier der Customizer aus “Neve”
Screenshot: trusted.de
Quelle: wordpress.org
Weil die Customizer so unterschiedlich sind, kann ich dir hier leider nicht im Detail weiterhelfen oder dir zeigen, was du genau tun musst.
In diesem Schritt gilt: Probieren geht über Studieren! Spiele einfach mal mit dem Customizer deines Themes herum und schau dir ein paar Sachen an. So machst du dich schnell damit vertraut.
Wenn du genug ausprobiert hast und mit den Einstellungen zufrieden bist, klicke oben links auf das X bzw. das WordPress-Logo. So kehrst du wieder zu deinem Dashboard zurück.
Kurze Einführung in den Gutenberg-Editor
Kommen wir zum wirklich spannenden Part: Der Erstellung deiner Seiteninhalte! Am einfachsten geht das – zumindest für Einsteiger:innen – mit dem “Gutenberg-Editor”, bzw. “Block-Editor”. Der ist in WordPress bereits vorinstalliert.
Mit dem Block-Editor stellst du dir deine Seiteninhalte mithilfe von “Blöcken” zusammen.
Um deine Beiträge oder Seiten mit per Gutenberg zu editieren, wechselst du zu den jeweiligen Übersichten, fährst über das gewünschte Element und klickst im Kontextmenü auf “Bearbeiten”. Dann landest du im Editor. Vergib deinen Seitentitel und fange dann an, Blöcke zu kombinieren.
In WordPress stellst du dir deine Inhalte mit Blöcken zusammen
Screenshot: trusted.de
Quelle: wordpress.org
Du findest die Blöcke bei einem Klick auf das schwarze Plus, das auf deiner Seite oder im Beitrag erscheint. Alternativ wählst du das blaue Plus in der oberen linken Ecke.
Alle Blöcke zu erklären würde hier den Rahmen sprengen, daher habe ich dir nur ein paar der wichtigsten hier aufgelistet:
- Absatz (für das Erstellen eines neuen Fließtext-Abschnitts)
- Überschrift
- Bild bzw. Galerie
- Video
- Spalten (zur vertikalen Einteilung deiner Website)
- Abstandshalter
- “Mehr”-Tag (um einen längeren Text ausklappbar zu machen)
Mit diesen kannst du bereits deine Inhalte gut strukturieren. Probiere aber gern noch mehr der Blöcke und ihrer Möglichkeiten aus!
Inspiration für coole Layouts kannst du dir beispielsweise bei deinen Lieblingsblogs, in YouTube-Tutorials und bei Anbieter-Themes holen. Ich persönlich mag auch diesen Beitrag von Borlabs, der weitere Tipps und Tricks zum Gutenberg-Editor wie etwa Shortcuts beinhaltet.
Du brauchst Hilfe beim Texten, um deine Seite mit Inhalten zu füllen? Dann schau doch mal in meinem Test der besten KI-Textgeneratoren vorbei.
In den Blöcken findest du auch einige Widgets. Diese sind nicht nur zur Strukturierung deiner Website gedacht, sondern sind vollständige Funktionen. Zu den Widgets gehören beispielsweise:
- Archive
- Kalender
- Kommentar-Sektion
- Suchen-Funktion
- Social Icons
Mit diesen Features gestaltest du deine Website interessanter und machst sie für deine User besser navigierbar.
Mache deine Website mit Widgets interaktiver
Screenshot: trusted.de
Quelle: wordpress.org
Nutze einen Pagebuilder
Dir ist der Gutenberg-Editor zu starr? Oder bevorzugst du Anpassungen direkt im fertigen Produkt zu sehen, anstatt zwischen Back- und Frontend (als deiner fertigen Website) hin und her zu wechseln?
Dann könnte ein Pagebuilder was für dich sein. Diese erlauben dir, Anpassungen direkt in deiner Frontend-Ansicht vorzunehmen. So platzierst du Texte und Bilder direkt per Drag-and-Drop.
Info: Es gibt auf dem Markt ganz unterschiedliche Pagebuilder. Beispielsweise das Theme Divi, das du extern erwirbst oder Elementor, Beaver Builder und Brizy, die du als Plug-in aus dem WordPress-Store installierst.
Ein Pagebuilder erlaubt dir einen etwas intuitiven Bau deiner Website
Screenshot: trusted.de
Quelle: wordpress.org
Beim Vergleich der Pagebuilder gibt es keinen klaren Favoriten; alle Builder haben ihre Stärken und Schwächen. Welchen du am Ende bevorzugst, ist eher eine Frage deiner Anforderungen und der Gewöhnung.
Nochmal der Hinweis: Es gibt eine Hierarchie beim Design deiner Website. Während du mit dem Customizer globale Anpassungen an deiner Website vornimmst, passt du mit dem Gutenberg-Editor und den Pagebuildern nur individuelle Seiten und Beiträge an.
Verwalte deine Mediendateien wie Bilder und Videos
Um Bleiwüsten zu vermeiden, sollte deine Webseite mindestens mit ein paar Bildern und oder Videos daherkommen. Für die Verwaltung dieser Mediendateien hat WordPress ein eigenes Mediendepot im Angebot, in das du deine Files hochlädst. Du findest dieses in deinem Dashboard im Reiter “Medien”
Verwalte deine Medien im entsprechenden Reiter
Screenshot: trusted.de
Quelle: wordpress.org
Info: Wenn du deine Medien anklickt, kannst du genauere Einstellungen zu diesen vornehmen. Zum Beispiel hinterlegt du so einen Alternativ-Text. Dieser dient als Beschreibung des Mediums, wenn es im Browser nicht angezeigt werden kann.
Zu den Medien gibt es ein paar Grundregeln, die dich in Sachen SEO und Pagespeed nach vorne bringen:
- Medien mit Alternativ-Texten werden von Google bevorzugt
- Benenne deine Bilder sauber. So findest du sie im Medienpool besser wieder
- Nutze für das Web optimierte Medien
Hinweis: verwende Medien nur in der notwendigen Auflösung. Sieht man ein Bild beispielsweise nur als kleine Briefmarke irgendwo auf der Page, braucht es dafür keine 4K-Auflösung. Außerdem nehmen dir nicht optimierte Dateien viel Speicherplatz weg.
Wenn du alle deine Seiten fertig hast, sollte ein Webseiten-Menü her. Wichtige Voraussetzung: Alle Seiten, die im Menü sichtbar sein sollen, müssen veröffentlicht worden sein.
Hier wird es ein bisschen unintuitiv; du findest die Menüoption nämlich im Abschnitt “Design” deines Dashboards. Finde dort den Unterpunkt “Menüs”. Sollte der dort nicht auftauchen (das kann mit bestimmten Themes passieren) dann wirf mal einen Blick in den Customizer; manchmal ist die Einstellung auch dort versteckt.
Baue dir für eine einfachere Navigation ein Hauptmenü zusammen
Screenshot: trusted.de
Quelle: wordpress.org
Für diesen Überblick baue ich die Menüs im Design-Abschnitt. Benenne zunächst dein Menü, beispielsweise “Hauptmenü”. Wähle hier einen Namen, den du einfach von anderen Menüs unterscheiden kannst. Gebe noch die Position an und klicke dann auf “Menü erstellen”.
Ab jetzt hast du die Möglichkeit, dein Menü mit den passenden Unterpunkten zu verknüpfen. Wähle dazu links in der Box unter Seiten, Beiträge und Co. alle Elemente aus, die du in das Menü aufnehmen willst. Klicke auf “Zum Menü hinzufügen”.
Beispiel: Ich möchte zum Beispiel die Services meines IT-Unternehmens, die Kontakt- und die Teamseite einbinden.
Wähle alle Elemente aus, die in deinem Menü auftauchen sollen
Screenshot: trusted.de
Quelle: wordpress.org
Jetzt kannst du via Drag-and-Drop die Reihenfolge deiner Menüpunkte anpassen. Wenn, du Menüpunkte einrückst und ablegst, generierst du für dein Menü sogar noch Untermenüs.
Beispiel: Diese Funktion ist praktisch, wenn du etwa auf deiner Modeseite eine Kategorie wie “Schuhe” hast und diese feiner in “Stiefel”, “Sandalen” und Co. unterteilen willst.
Klicke noch einmal auf “Menü speichern” und freue dich über deine neu gebaute Website-Navigation!
Lege für deine Menüpunkte eine Reihenfolge und eine Hierarchie fest
Screenshot: trusted.de
Quelle: wordpress.org
So könnte deine fertige Page aussehen
Ich habe mich ein bisschen durch meine Themes gewühlt und mich für meine Website für das WordPress-Theme “Twenty Twenty-One” entschieden. Das ist simpel und überfordert nicht mit zu vielen Customizer-Optionen.
Die Seite, die ich für meinen Guide gebaut habe, siehst du hier:
Ich mag große Header für den AHA-Effekt
Screenshot: trusted.de
Quelle: wordpress.org
Achtung beim Urheberrecht
Für alle deine Inhalte gilt: Du musst sie entweder selbst erstellt haben oder zumindest die Nutzungsrechte dafür besitzen. Sorge also beim Befüllen deiner Website dafür, dass du alle Bildrechte, Rechte am Videomaterial und für die Texte hältst. Sonst kann dir eine Abmahnung ins Haus flattern.
Tipp: Es gibt Portale mit kostenlosen “Free-for-all”-Inhalten wie Pixabay, Unsplash und Co. Aber bedenke: Eigene Aufnahmen sind deutlich besser für deine CI und für dein SEO! Erkennt Google nämlich hundertfach verwendete Medien auf deiner Website, leidet im schlimmsten Fall dein Ranking.