In WordPress Seiten erstellen mit dem Gutenberg-Editor

Worum geht´s?

In diesem WordPress-Tutorial werden wir unsere ersten Seiten mit Hilfe vom Gutenberg-Editor (auch Block-Editor genannt) erstellen. Außerdem wirst du lernen, wie du bereits erstellte Seiten bearbeitest oder löscht.

Als erstes müssen wir uns ins WordPress-Backend begeben. Genauer gesagt in jenen Bereich des Backends, in dem wir neue Unterseiten anlegen können.

1. In den Bereich „Neue Seiten erstellen“ im WordPress-Backend wechseln

Bevor wir loslegen, müssen wir erst wieder in unser WordPress-Backend gelangen und dann in den Bereich, wo du eine neue Unterseite anlegen kannst. Wenn du die Domain deiner Webseite (in meinem Fall vorzeigen.bunterrichten.at) aufrufst, kommst du zum Frontend deiner Webseite (also das, was Besucher sehen können). Von hier aus gibt es nun zwei Möglichkeiten, wie du zu dem Bereich im WordPress-Backend gelangst, in dem du eine neue Seite erstellen kannst:

1.1 Über die Admin-Leiste eine neue Seite erstellen

Falls du immer noch eingeloggt bist, siehst du hier schon die Admin-Leiste. Wenn du mit der Maus über „Neu“ fährst, siehst du einige Optionen, und wählst „Seite“ aus:

Dann kommst du direkt zu dem Bildschirm im Backend, in dem du neue Seiten anlegen kannst.

1.2 Über den WordPress-Backend-Bereich eine Neue Seite erstellen

Wenn du die Admin-Leiste nicht sehen kannst, bedeutet das, dass du nicht (mehr) eingeloggt bist und dich neu einloggen musst. Dazu fügst du zu deiner Domain noch /wp-admin hinzu (also wird aus „vorzeigen.bunterrichten.at“ z.B. „vorzeigen.bunterrichten.at/wp-admin“). Dann solltest du – wenn du eingeloggt bist – sofort zum WordPress-Backend-Bereich gelangen, und falls du noch nicht eingeloggt bist zu einer Möglichkeit, deinen Benutzernamen/deine Mailadresse und dein Passwort einzugeben. Dann solltest du in etwa das hier sehen:

Nun musst du nur noch die Maus im Menü links über die Option „Seiten“ bewegen, dann sollten weitere Optionen auftauchen, nämlich „Alle Seiten“ und „Erstellen“. Wir wollen nun erstmal eine Seite erstellen, nicht alle vorhandenen betrachten oder bearbeiten. Klicke deshalb auf „Erstellen“. Dann solltest du zum Bildschirm gelangen, auf dem man eine neue Seite in WordPress erstellen kann.

2. Eine neue Seite in WordPress erstellen – Einführung in den Gutenberg-Editor

Nun solltest du (beim ersten Mal) diesen Bildschirm sehen können:

Eventuell siehst du auch das kleine blaue Popup nicht, falls du diesen Bereich schonmal angeklickt hast. Es ist eine Art Begrüßungs-Popup, dass dir erklärt, was der Block-Editor ist – den gibts nämlich noch nicht so lange in WordPress.

Vor dem Gutenberg-Editor funktionierte die Bearbeitung von Texten usw. in WordPress eher wie das Textverarbeitungs-Programm Word. Man konnte eben Texte und Bilder einfügen, sie ein wenig stylen und dann über den Vorschau-Button ansehen wie das Ergebnis aussieht. Wollte man spezielle Funktionen von WordPress einfügen (z.B. die 3 nächsten Veranstaltungen aus einem Veranstaltungs-Plugin), so funktionierte das über sogenannte „Shortcodes“. Diese fügt man einfach in den Text ein, und WordPress wandelt sie dann später in passende Webseiten-Bausteine um.

2.1 Was der Gutenberg-Editor in WordPress ist

Ca. ab der Version 5.0 hat WordPress jetzt auch den Gutenberg-Editor, oder auch Block-Editor genannt. Mit diesem kannst du anders als beim alten Modus auch ohne Programmier-Kenntnisse sehr einfach per Drag&Drop verschiedene Webseiten-Bausteine wie z.B. Bilder-Galerien etc. einfügen, und siehst das Ergebnis auch sofort. Weil diese Bausteine „Blocks“ genannt werden, heißt der neue Editor auch „Block-Editor“.

Auch wenn der neue Block-Editor einige Vorteile gegenüber dem alten hat (man sieht sofort wie Veränderungen für spätere Besucher aussehen, für Nicht-Programmierer leichter bedienbar, …), hat er in bestimmten Situationen auch Nachteile.

Wenn du eine „kleine“ Webseite haben willst, mit, sagen wir, 10-15 Unterseiten, dann wird dir der Gutenberg-Editor gute Dienste leisten. Du kannst mit dessen Hilfe mit viel weniger Aufwand eine schön aussehende Webseite zusammenbauen.

2.2 Warum ich immer noch den klassischen WordPress-Editor bevorzuge

Meine Webseite www.bunterrichten.com besteht derzeit aus über 400 einzelnen Unterseiten (hauptsächlich Artikel und Geschichten, die im Laufe der Jahre entstanden sind). Wenn ich all diese Unter-Seiten mit Hilfe des Gutenberg-Editors erstellt habe, dann habe ich für jede einzelne Unter-Seite auch ein bestimmtes Layout festgelegt. Gutenberg erlaubt es, Layout-Vorlagen zu erstellen und zu kopieren, um neue Artikel rasch an schon bestehende Layouts anzupassen.

Aber wenn ich nun nachträglich etwas an diesem Layout ändern will, muss ich das – soweit ich das verstanden habe – für jede einzelne Unter-Seite machen. Das ist mir für >400 Unter-Seiten einfach zu viel Aufwand – vor allem wenn ich mit nur ein klein wenig Programmierung das Layout für alle Unter-Seiten auf einmal ändern kann. Man kann sich das ein wenig so vorstellen wie die Format-vorlagen (Überschrift 1, Überschrift 2, …) im Schreib-Programm Word.

Man kann glücklicherweise mit Hilfe eines Plugins den Gutenberg-Editor auch deaktivieren und stattdessen den alten Editor weiterverwenden. Wie wir das installieren und aktivieren, behandeln wir in der nächsten Lektion.

Aber in dieser werden wir uns erst einmal den Gutenberg-Editor ansehen. Wenn du beides ausprobiert hast, kannst du besser entscheiden, was besser zu deinen Bedürfnissen passt 🙂

3. Wie der Gutenberg-Editor funktioniert

Wenn du das kleine X in dem blauen Popup klickst, sollte es verschwinden. Dann siehst du den Gutenberg-Editor:

Möglicherweise kann es sein, dass bei dir links die Leiste noch ausgeklappt ist. Die kannst du verkleinern, wenn du ganz unten auf „Menü einklappen“ klickst.

So, und nun lass uns gleich mal unsere erste Seite in WordPress erstellen!

3.1 Den Titel einer Seite festlegen

Wenig überraschend kann man den Titel der Seite dort eingeben, wo „Titel hier eingeben“ steht. Einfach darauf klicken und einen Titel hinschreiben. In meinem Fall habe ich „Über mich“ hineingeschrieben.

3.2 Den Inhalt einer Seite festlegen

Als nächstes braucht unsere Unterseite Inhalte wie Texte, Bilder, Videos etc. – die kannst du dort einfügen, wo ‚Schreibe etwas oder tippe „/“ zur Blockauswahl‘ steht.

Absätze einfügen

Dort kannst du sehr einfach Texte einfügen, indem du einfach den Text hineinreibst. Absätze erstellst du ganz einfach über die ENTER-Taste. Ein jeder Absatz wird dabei automatisch zu einem sogenannten „Block“ gemacht. Das sind eben Webseiten-Elemente, die du in die jeweiligen Unterseiten einfügen kannst.

Wenn du irgendwo in deinen Textblock hineinklickst, kannst du in der erscheinenden Text-Werkzeugleiste die Text-Ausrichtung mit dem Button mit den drei Strichen ändern. Außerdem fett schreiben (B), kursiv (/),  und wenn du auf den Pfeil nach unten klickst, gibt es noch mehr Optionen, wie hochgestellten Text.

Links einfügen

Markiere einfach einen Text in einem Absatz, denn siehst du eine Art „Bearbeitungs-Werkzeugleiste“ über dem Block. Dort wählst du den Button der so ähnlich aussieht: (-), da kannst du Links einfügen. Einfach die URL des Links einfügen, ENTER drücken und du hast einen Link erstellt. In etwa so:

Bilder einfügen

Bilder kannst du auf mehrere Arten in den Gutenberg-Editor einfügen:

• Klicke auf das schwarze Kästchen mit dem + drauf und wähle dann Bild aus
• Klicke links oben auf das blaue Kästchen, scrolle ein wenig herunter bis du „Bild“ findest
• Schreibe / und wähle dann „Bild“ aus

Unabhängig davon auf welchem Weg du einen Bild-Block eingefügt hast, solltest du nun ein Rechteck auf deiner Unterseite sehen können, bei dem du ein Bild auswählen kannst:

Nun kannst du über den Button „Hochladen“ ein Bild hochladen und einügen, aus den schon hochgeladenen Bildern eines auswählen („Mediahek“) oder ein Bild aus einer URL einfügen (z.B. von einer anderen Webseite). Die besonders bequeme Variante ist es, eine Bild-Datei aus dem Windows-Explorer einfach auf den Bild-Block zu ziehen und loszulassen – dann macht der Gutenberg-Editor den Rest automatisch für dich.

Wenn du nun einmal auf den Bild-Block klickst, solltest du oben einige Optionen sehen, wie du den Bild-Block anpassen kannst:

Der Reihe nach, von links nach rechts, kannst du:

• Den Bild-Block in einen anderen Block ändern oder z.B. die Ränder abrunden
• Den Block nach oben oder unten verschieben (über die Pfeile)
• Zwischen linksbündig, rechtsbündig etc. umschalten
• Einen Link einfügen/zum Link machen
• Die Größe anpassen
• Das Bild durch ein anderes ersetzen
• Allgemeine Block-Kommandos wie Block duplizieren, ersetzen, …

Außerdem kannst du unter dem Bild eine Bild-Beschriftung einfügen, wenn du das willst.

Zitate einfügen

Geht sehr ähnlich wie das Einfügen von Bildern – am einfachsten einfach beim Schreiben mit Hilfe des „/“, und dann „Zitat“ auswählen.

Als  nächsten Schritt kannst du das Zitat und den Autor einach hineinschreiben:

Alternativ kannst du auch ein etwas eindrucksvoller aussehendes Zitat einfügen: das Pullquote. Geht ebenso per „/“, dann „Pullquote“ eingeben und auswählen. Sieht dann so aus:

Weitere Blöcke einfügen

Es gibt noch viele weitere Block-Arten, z.B. Überschriften, Cover, … die meisten sind aber eigentlich ohnehin recht selbsterklärend aufgebaut und funktionieren recht ähnlich. So kann man beispielsweise auch Videos einfügen, oder Tweets, etc.

3.3 Unter-Blöcke in Blöcke einfügen (um z.B. mehrer Spalten zu erzeugen)

Was am Gutenberg-Editor spannend ist, ist die Möglichkeit, mehrere Blöcke in andere Blöcke „hineinzupacken“. So kann z.B. ein Spalten-Block verwendet werden, um einen Bild-Block und einen Listen-Block nebeneinander zu haben:

4. Die „Einstellungen“-Spalte im Gutenberg-Editor von WordPress

Wenn du rechts oben auf das kleine Zahnrad klickst, kannst du die Einstellungen-Spalte rechts einblenden oder ausblenden. In dieser kannst du weitere Einstellungen für den jeweils ausgewählten Block vornehmen. Beispielsweise kannst du so einer Überschrift eine andere Farbe oder Schriftgröße verpassen, bei einem Spalten-Block einstellen um wie viele Spalten es sich handeln soll. Je nachdem welche Art von Block du ausgewählt hast, kannst du hier verschiedene Einstellungen für den jeweiligen Block vornehmen.

Du kannst aber hier nicht nur Einstellungen für einzelne Blöcke vornehmen, sondern auch für die gesamte Unterseite. Dazu musst du in der Einstellungs-Spalte ganz oben auf „Dokument“ klicken. Nun kannst du einige Einstellungen vornehmen, die ich hier kurz erklären werde:

4.1 Status und Sichtbarkeit

Hier kannst du festlegen, ob deine Seite nur ein Entwurf bleiben oder schon veröffentlicht werden soll. Im Letzteren Fall kannst du entweder „sofort“ auswählen oder ein Datum, zu dem die Veröffentlichung stattfinden soll.

„Ausstehende Überprüfung“ ist dann sinnvoll, wenn mehrere Autoren etwas veröffentlichen können und es so etwas wie ein Lektorat gibt, dass nochmal auf Fehler etc. kontrollieren soll.

„In den Papierkorb verschieben“ ist vermutlich selbsterklärend: Du löscht die Seite.

4.2 Permalink

Ein Permalink ist eine eindeutige, nur einmal verwendete Web-Adresse für die Seite die du gerade anlegst/bearbeitest. Wenn man die in den Broswer eingibt, kommt eben diese Seite.

Grundsätzlich erzeugt WordPress dir normalerweise aus dem Seiten-Titel einen Permalink. Das funktioniert so, dass WordPress alle Großbuchstaben im Titel zu Kleinbuchstaben macht, alle Leerzeichen zu Bindestrichen und Sonderzeichen wie Umlaute anders schreibt oder ganz entfernt. Den so veränderten Titel hängt WordPress dann an die Domain dran.

Ich habe z.B. einen Artikel auf dieser Webseite mit dem Titel „Schneller arbeiten am Computer mit Shortcuts (Windows)“ verfasst. WordPress erzeugt mir daraus den Permalink „https://www.bunterrichten.com/schneller-arbeiten-am-computer-mit-shortcuts-windows/“.

Aber Achtung: WordPress erzeugt den Permalink basierend auf dem ersten Titel, den du wählst. Wenn du nachträglich den Titel änderst, wird der Permalink nicht automatisch mitgeändert – deswegen heißt er auch Permalink (von „permanent“, dauerhaft). Das hat den Sinn, weil andere Webseiten/Suchmaschinen ja womöglich Links zu dieser Seite gesetzt haben, und wenn du den Permalink zeigen diese Links nun ins Nirvana, also ins Leere. Du kannst Permalinks über die Einstellungen hier auch „händisch“ abändern, und manchmal ist das auch sinnvoll und wichtig. Aber du solltest wissen, was du tust 😉

4.3 Beitragsbild

Hier kannst du ein Bild festlegen, dass mit dieser Unterseite verknüpft ist. Das kann z.B. dann Sinn machen, wenn du auf einer anderen Unterseite eine Übersicht über alle Artikel hast, die dann jeweils Beitragsbilder zum Artikel anzeigt.

4.4 Diskussion

Unter „Diskussion“ kannst du Kommentare erlauben oder verbieten.

Wenn du sie erlaubst, kann dir das Vorteile in der Suchmaschinen-Optimierung bringen, und es kann auch interessant sein, Rückmeldungen zu Seiten und Beiträgen zu bekommen.

Der Nachteil kann sein, dass Seiten, bei denen Kommentare erlaubt sind, die aber noch keine Kommentare erhalten haben, uninteressanter wirken („Offensichtlich interessiert das niemanden!“). Außerdem kann es natürlich auch sein, dass Besucher unsinnige oder sogar illegale Kommentare hinterlassen, oder du von Spam-Kommentaren zugemüllt wirst. Aber zumindest für letzteres Problem gibt es hilfreiche Plugins.

Normalerweise ist es üblich, bei Seiten („Über mich“, „Angebot“, …) eher keine Kommentare zuzulassen, bei Artikeln und Beiträgen zu bestimmten Themen eher schon.

4.5 Seiten-Attribute

Hier kannst du sogenannte „Templates“ für diese Seite auswählen, dass sind gewissermaßen „Vorlagen“.

Außerdem die übergeordnete Seite, falls du eine hierarchische Struktur erstellen willst (also Menü->Untermenü). Aber das machst du am besten (und übersichtlicher) an anderer Stelle, sobald es um Menüs geht. Dasselbe gilt für die Reihenfolge.

Aber mal angenommen, wir sind fertig mit unserer Seite – wie können wir sie eigentlich veröffentlichen, oder zwischenspeichern?

5. Speichern, Vorschau und Veröffentlichen im Gutenberg-Editor

Du findest die Optionen zum Speichern, der Vorschau und dem Veröffentlichen neben dem Zahnrad, das wir vorher angeklickt haben:

An sich sind die Optionen ohnehin recht selbsterklären:

• „Speichern“ speichert den aktuellen Entwurf. Er ist aber noch nicht für andere sichtbar.
• „Vorschau“ zeigt dir, wie die Webseite für spätere Webseiten-Besucher aussehen wird.
• „Veröffentlichen“ macht sie grundsätzlich auch für andere Besucher sichtbar, und fügt sie gleich ins Menü der Webseite ein.

So, das wars – du kannst nun eine eigene Seite erstellen und veröffentlichen. Aber wie bearbeitest du eine schon veröffentlichte oder gespeicherte Seite später wieder?

6. In WordPress Seiten bearbeiten

Wenn du die Seite als Administrator (eingeloggter Benutzer, der Seiten bearbeiten darf) ansiehst, findest du in der Admin-Leiste jetzt die zusätliche Option „Seite bearbeiten“. So kommst du direkt zur Seite.

Alternativ kannst du auch ins WordPress-Backend gehen (du erinnerst dich: /wp-admin zur Domain hinzufügen!) und dort auf „Seiten“ klicken (oder über „Seiten“ fahren und dann auf „Alle Seiten“). Im zweiten Fall siehst du dann eine Liste aller bestehenden Seiten, die z.B. so aussehen könnte:

Wenn du nun auf einen Seitentitel klickst, kommst du direkt zum Bearbeiten. Alternativ kannst du auch mit der Maus darüberfahren, dann kommen die Optionen:

• Bearbeiten: Bringt dich zum Bearbeiten-Bildschirm
• Quick Edit: Du kannst einige Einstellungen rasch ändern, z.B. ob Kommentare erlaubt sein sollen
• Papierkorb: Verschiebt die Seite in den Papierkorb
• Vorschau: Zeigt dir eine Vorschau der Seite

Weil du einiges an Zeit mit dem Gutenberg-Editor verbringen wirst, ist nun der Moment gekommen, in dem du am besten all das, was wir heute gelernt haben, in der Praxis anwendest:

7. Deine Aufgabe: Erstelle eine Über-mich-Seite!

Fast jede Webseite hat eine Über-mich-Seite oder eine Über-uns-Seite, wo mehr über die Person oder das Unternehmen zu finden ist. Es ist auch statistisch gesehen eine der am häufigsten angeklickten Seiten.

Nimm dir etwas Zeit und erstelle eine kleine Über-mich-Seite über dich und dein (gerne auch erfundenes!) Unternehmen. Du musst keine ewig langen Texte verfassen, es geht dabei hauptsächlich darum, dich mit dem Gutenberg-Editor vertraut zu machen.

Im nächsten Tutorial werden wir nämlich den alten Classic-Editor „besuchen“, und uns am Ende an der gleichen Aufgabe versuchen. Einfach damit du einen direkten Vergleich hast, und dich gut entscheiden kannst welche Variante du persönlich bevorzugst.

In weiterer Folge werden wir uns dann genauer damit beschäftigen, wie wir gute Menüs aufbauen, und auch noch detaillierter am Aussehen der Webseite feilen. Wenn du also etwas noch nicht genau so hinbekommst wie du es gerne haben willst, dann ist das ganz normal und kein Grund zur Sorge.

So, aber nun geht’s an die Praxis! Erstelle deine Über-mich-Seite und speichere/veröffentliche sie, damit du sie auch „in echt“ ansehen kannst.

Wenn du das geschafft hast, sind wir auch schon wieder am Ende dieses WordPress Tutorials angekommen. Auf Wiedersehen in der nächsten 🙂

Diskussion zum Tutorial