Übersicht
Erste Schritte
Hochladen von Bildern
Auflösung und Komprimierung von Bildern
Das Inserter-Werkzeug
Visuelle Bearbeitung
Multimedial
Beitragsbild festlegen
Weitere Links und Hilfestellungen
Erste Schritte
Nach dem Login über http://wp12964331.server-he.de/experimentelles_design/wp-admin/ gelangst du in das Dashboard der WordPress Seite und kannst über den Punkt Beiträge → Erstellen einen Beitrag hinzufügen. In die Titelzeile gibst du den Titel des Beitrags (also deiner Arbeit) ein. Anschließend kannst du in den Editor darunter die Inhalte einfügen.
Bevor es aber richtig losgeht, solltest du den Beitrag als Entwurf speichern.
Das Ziel des Gutenberg Editors ist es, das Hinzufügen von umfangreichen Inhalten in WordPress einfach und angenehm zu gestalten. Dieser ganze Beitrag besteht aus einzelnen Inhalts-Elementen, die LEGO-Steinen ähneln, die man bewegen und mit denen man interagieren kann.
Was du gerade liest befindet sich in einem Text-Block, der einfachste Block von allen. Der Text-Block kann frei im Beitrag positioniert werden und die Textausrichtung lässt sich über die Menüleiste links oben ändern. Überschriften sind selbst separate Blöcke, was bei der Gliederung und Organisation deiner Inhalte hilft.
Drag and Drop
Wähle den Block und dann das linke Symbol aus (je nach Block-Typ sieht es anders aus), um ihn per Drag and Drop zu verschieben.
Der Block lässt sich frei verschieben. Alternativ kannst du die Position durch die ↑ ↓ Pfeil-Symbole verschieben.
Hochladen von Bildern
Der Umgang mit Bildern und Medien ist ein primärer Schwerpunkt des Editors. Beim Hochladen von Bildern solltest du darauf achten, dass sie im Dateinamen
keine Sonderzeichen enthalten (darunter fallen alle deutschen Umlaute wie Ää Üü Öö ß und Sonderzeichen wie ?!%&) und das
keine Leerzeichen bzw. das Wörter durch einem Unterstrich „_“ oder einem Viertelgeviertstrich „-“ getrennt werden.
Björn Schönborn Roßlau.jpg wird in bjoern_schoenborn_rosslau.jpg umbenannt.
Die Dateien sollten grundsätzlich deinen Vor- und Nachnamen enthalten. Der Dateiname sollte folgende Struktur haben:
vorname_nachname_projekttitel_00.jpg
Auflösung und Komprimierung von Bildern
Außerdem sollten die Bilder eine Auflösung von 72 dpi haben. In der Regel haben sie höhere Auflösungen, die sich für den Druck, nicht aber für das Web eignen. Deswegen müssen die Bilder vor dem Upload komprimiert werden.
Durch die Reduktion der Auflösung und ggf. einer Verkleinerung der Größe können die Bilder schneller laden und es wird nicht viel Speicher benötigt. Du kannst dich dabei an den Richtwert 1200px für die lange Seite orientieren, in vielen Fällen reicht aber 800px (Lange Seite) aus.
In Adobe Photoshop gibt es hierfür die Funktion „Für Web speichern“. Hier findest du weitere Infos: https://helpx.adobe.com/de/animate/using/save-for-web-options.html#Webgrafikformate
Das Inserter-Werkzeug
Stell dir vor, alles, was WordPress kann, steht dir direkt auf der Oberfläche zur Verfügung. Keine Notwendigkeit, sich an HTML-Tags, Klassen oder komplizierte Shortcode-Syntax zu erinnern. Das ist der Grundgedanke hinter dem Inserter – der (+)-Button, den du um den Editor herum siehst – mit dem du alle verfügbaren Inhalts-Blöcke suchen und in deinen Beitrag einfügen kannst. Plugins und Themes sind in der Lage, ihre eigenen Blöcke zu registrieren, was alle Arten von Möglichkeiten für eine umfangreiche Bearbeitung und Veröffentlichung eröffnet.
Versuch es, du entdeckst womöglich Dinge, die WordPress bereits in deine Beiträge einfügen kann, von denen du nichts wusstest. Hier ist eine kurze Liste, was du aktuell dort findest:
- Text und Überschriften
- Bilder und Videos
- Galerien
- Einbettungen, wie YouTube, Tweets, oder andere WordPress-Beiträge.
- Layout-Blöcke, wie Buttons, Hero-Bilder, Separatoren, etc.
- Und natürlich Listen wie diese 🙂
Visuelle Bearbeitung
Ein großer Vorteil von Blöcken ist es, dass du sie direkt vor Ort bearbeiten und deinen Inhalt verändern kannst. Anstelle von Feldern, um beispielsweise die Quelle eines Zitats oder den Text eines Buttons zu bearbeiten, kannst du den Inhalt direkt ändern.
Der Editor bietet ein neue Erfahrung beim Erstellen von Seiten und Beiträgen, die das mühelose Schreiben umfangreicher Inhalte ermöglicht. Er hat „Blöcke“, um das Einbetten von Inhalten, die bisher über Shortcodes, individuelles HTML oder „mysteriöse Praktiken“ eingebettet wurden, zu vereinfachen.
Matt Mullenweg, 2017
Die Quellenangabe des Zitats ist ein separates Textfeld, ähnlich wie bei den Bildunterschriften. Somit bleibt die Struktur des Zitats geschützt, auch wenn du die Quelle auswählst, veränderst oder entfernst. Sie kann jederzeit wieder hinzugefügt werden.
Du kannst die Anzahl der Spalten in deinen Galerien ändern, indem du einen Schieberegler im Block-Inspektor in der Seitenleiste bewegst.
Multimedial
Hier oben ist eine Galerie mit nur zwei Bildern. Du kannst die Galerie mithilfe des Block-Umschalters auch wieder zurück in einzelne Bilder konvertieren.
Jeder Block kann sich an diese Ausrichtungen anpassen. Der Einbetten-Block hat sie auch und ist standardmäßig responsiv:
Beitragsbild festlegen
Zum Schluss musst du noch das Beitragsbild festlegen. Den Punkt findest du in der rechten Menüleiste unter Beitrag → Beitragsbild → Beitragsbild festlegen.
Das Bild erscheint auf der Startseite. Das Bildverhältnis kannst du selbst festlegen. Es muss kein GIF sein 🙂 Hier ein Beispiel:
Weitere Links und Hilfestellungen
Der Gutenberg-Editor ist der Standard Editor von WordPress. Er gehört zu den benutzerfreundlichsten und intuitivsten Editoren. Falls Fragen auftreten, findet man schnell Antworten und Hilfestellungen auf verschiedenen Seiten.
Hier findest du ausführliche Dokumentationen:
https://www.wpbeginner.com/beginners-guide/how-to-use-the-new-wordpress-block-editor/