Einführung
Heute schauen wir uns den WordPress-Block-Editor als wichtigstes Werkzeug zur Inhaltserstellung an, und wie man ihn einsetzt, um damit Beiträge und Seiten zu erstellen.
Lernziele
Die Lernziele dieser Lektion:
Du kannst Blöcke, Vorlagen und die Listenansicht verwenden
- Du verstehst, was der Block-Editor ist.
- Du kannst in der Benutzeroberfläche des Block-Editors navigieren.
- Du kennst den Unterschied zwischen dem Bereich zur Bearbeitung von Inhalten und der Seitenleiste mit den Einstellungen.
- Du kannst eine Seite und einen Beitrag erstellen.
Was ist der Block-Editor?
Mit dem WordPress-Block-Editor kannst du deine Website ganz einfach mit Blöcken – also ohne Programmierkenntnisse – erstellen. Als erstes meldest du dich in deinem WordPress-Dashboard an, um einen Beitrag oder eine Seite zu erstellen. Du kannst im Menü auf der linken Seite entweder zu „Beiträge“ oder zu „Seiten” navigieren. Wir erstellen nun eine neue Seite und betrachten dabei die Benutzeroberfläche des Block-Editors. Sobald wir eine neue Seite hinzugefügt haben, können wir einen passenden Titel für die Seite vergeben. Wenn du nun auf den Inserter klickst, kannst du eine Reihe von Blöcken hinzufügen, um deine Seite zu erstellen.
Blöcke können alles Mögliche sein, von Absätzen über Bilder, Spalten und Galerien bis hin zu Preistabellen und vielem mehr. Block-Vorlagen sind eine weitere großartige Funktion. Dabei handelt es sich um festgelegte Gruppen von Blöcken oder vorgefertigte Blöcke, die du schnell hinzufügen kannst, um ganze Abschnitte zu erstellen. Die Vorlagen kannst du dann wiederum an deine Bedürfnisse anpassen.
Rechts neben den Vorlagen können wir Medien hinzufügen. Zunächst aus unserer Mediathek oder aus Openverse. Openverse bietet lizenzfreie Medien, die kostenlos genutzt werden können.
Wie man Blöcke hinzufügt
Es gibt mehrere Möglichkeiten, einen Block hinzuzufügen. Du kannst erstens auf den Inserter oben links oder zweitens auf den Inserter innerhalb der Seite klicken. Die sechs Blöcke, die unter dem Suchfeld angezeigt werden, sind die zuletzt verwendeten Blöcke. Eine dritte Variante ist der Schrägstrich-Befehl. Beispielsweise gibst du „/Bild“ ein und fügst dann ein Bild aus deiner Mediathek hinzu, das du bereits hochgeladen hast. Als Nächstes kannst du die Eingabetaste drücken und dann etwas Text zu deinem Absatzblock hinzufügen. Danach kannst du einen weiteren Absatz hinzufügen.
Die drei Hauptbereiche der Benutzeroberfläche des Block-Editors
Die Benutzeroberfläche ist in drei Hauptbereiche unterteilt: erstens den Bereich zur Bearbeitung von Inhalten, zweitens die linke Seitenleiste mit einer Listenansicht der Blöcke und drittens die Seitenleiste mit den Einstellungen auf der rechten Seite. Die Seitenleiste rechts bietet zusätzliche Einstellungen und Optionen für den ausgewählten Block, mit denen du ihn weiter gestalten kannst. Natürlich stehen für jeden Block unterschiedliche Einstellungen zur Verfügung.
Wenn du einen Block auswählst, wird auch die Werkzeugleiste für diesen Block angezeigt. In unserem Fall die Werkzeugleiste für den Absatzblock. Von links beginnend kannst du mit der Werkzeugleiste diesen Block in einen anderen Block umwandeln, einen Block per Drag-and-drop an eine neue Position verschieben oder mit den Pfeilen einen Block neu positionieren. Du kannst auch die Ausrichtung des Textes ändern, Fettdruck oder Kursivschrift auswählen oder einen Link hinzufügen. Über den Dropdown-Pfeil kannst du Text hervorheben, Fußnoten hinzufügen und andere Formatierungsoptionen auswählen. Wenn du auf die drei vertikalen Punkte klickst, werden weitere Optionen angezeigt.
Als Nächstes ist es wichtig, die Listenansicht genauer unter die Lupe zu nehmen. In diesem Beispiel wirst du feststellen, dass ich eine ganze Seite mit verschiedenen Blöcken erstellt habe. Wenn wir nach oben scrollen und oben links auf die drei waagerechten Striche klicken, können wir die Listenansicht öffnen. Die Listenansicht hilft dir beim Navigieren zwischen Inhaltsebenen und verschachtelten Blöcken. Sie ist eine unverzichtbare Funktion des WordPress-Editors, die dir die Arbeit mit den Blöcken auf deiner Website erleichtert. Du kannst die genaue Reihenfolge und Struktur jedes Blocks auf der Seite anzeigen, was besonders hilfreich ist, wenn du eine Seite mit vielen Inhalten hast. Du kannst Blöcke auswählen, in denen andere Blöcke verschachtelt sind. Du kannst Blöcke anklicken und ziehen, um sie an eine andere Stelle auf der Seite zu verschieben. Und wenn du auf die drei Punkte neben einem Block in der Listenansicht klickst, stehen dir eine Vielzahl hilfreicher Optionen zur Verfügung.
Eine Seite erstellen
Kehren wir zu unserer ursprünglichen Seite zurück. Fahren wir fort mit der Erstellung der Seite mit Blöcken, um den Block-Editor in Aktion zu sehen. Wir fügen zunächst einen Galerie-Block hinzu und wählen drei Bilder aus unserer Mediathek aus. Nach dem Einfügen wähle ich den Galerie-Block aus, klicke auf die drei vertikalen Punkte und wähle „Danach hinzufügen“ aus. Dann klicke ich oben links auf den Inserter und füge eine Vorlage, also eine vorgefertigte Gruppe von Blöcken, hinzu. Und ich wähle eine der Vorlagen aus, in unserem Fall “Einen Besuch planen”. Dann öffne ich meine Listenansicht, wähle den Gruppenblock aus und ändere die Ausrichtung des Textes. Als Nächstes sehen wir uns die Einstellungen in der Seitenleiste an. Sobald wir einen Block ausgewählt haben, können wir die Einstellungen in der Seitenleiste verwenden, um den Block weiter zu gestalten. In diesem Fall können wir unserem Bild einen Rundungseffekt hinzufügen. Ich wähle meinen zweiten Absatz aus und verwende die Block-Werkzeugleiste, um den Text fett zu formatieren. Dann wähle ich meine Listenansicht aus, um sicherzustellen, dass ich meinen übergeordneten Galerie-Block auswähle. In den Einstellungen der Seitenleiste ändere ich die Anzahl der Spalten von drei auf zwei. Zuletzt wähle ich den Button-Block aus und ändere die Hintergrundfarbe in Grün.
Ich hoffe, du verstehst nun, wie die Puzzleteile des Block-Editors zusammenpassen: Mit Blöcken fügst du Inhalte hinzu, über die Einstellungen in rechten Seitenleiste kannst du deine Inhalte formatieren und bearbeiten, und über die Listenansicht navigierst du durch deine Inhalte.
Erstellen und Bearbeiten von Seiten im Site-Editor
Bitte beachte, dass du Seiten auch im Site-Editor erstellen und bearbeiten kannst. In dem Fall gehen wir zu „Design“ und klicken auf „Website-Editor. Nach einem Klick auf den Punkt “Seiten” wird eine Übersicht der bereits angelegten Seiten angezeigt. Um eine bestehende Seite zu bearbeiten, fährt man einfach mit der Maus über den entsprechenden Listeneintrag und ein Stift-Symbol wird sichtbar. Klicke dort drauf, um die Seite zu bearbeiten. Die Bearbeitung erfolgt genauso, wie bereits beschrieben. In diesem Fall füge ich einen „YouTube-Einbettung“-Block hinzu, trage meine URL ein und binde so das Video in meine Seite ein.
Beiträge erstellen und bearbeiten
Zum Schluss: Das Erstellen eines Beitrags funktioniert genauso wie das Erstellen einer Seite. Wir verwenden Blöcke, um die Struktur unserer Inhalte aufzubauen. Bitte beachte, dass wir das Hinzufügen von Kategorien, Tags und einem Beitragsbild in einer anderen Lektion behandeln.
Fazit
Ich gehe davon aus, dass du jetzt ein besseres Verständnis für den Block-Editor hast und du mit der Verwendung von Blöcken, der rechten Seitenleiste für die Einstellungen und der Listenansicht besser vertraut bist.