{"id":1112,"date":"2019-09-03T00:05:48","date_gmt":"2019-09-02T22:05:48","guid":{"rendered":"https:\/\/quantenfrosch.at\/blog\/?p=1112"},"modified":"2023-10-19T02:24:59","modified_gmt":"2023-10-19T00:24:59","slug":"anleitung-fuer-wordpress-gutenberg-editor","status":"publish","type":"post","link":"https:\/\/quantenfrosch.at\/blog\/anleitung-fuer-wordpress-gutenberg-editor\/","title":{"rendered":"Anleitung f\u00fcr den Wordpress Gutenberg Editor"},"content":{"rendered":"
<\/div>\n

Mit der Ver\u00f6ffentlichung von WordPress 5 sind viele Ver\u00e4nderungen und Neuerungen einhergegangen. Die wohl Wesentlichste ist dabei die Einf\u00fchrung des neuen Gutenberg Editors<\/strong>, mit dessen Hilfe selbst Einsteiger nun besser zurechtkommen sollten. Dennoch bringt der Editor eine Vielzahl an \u00c4nderungen mit sich, an die es sich zun\u00e4chst zu gew\u00f6hnen gilt. Wer sich jedoch ein wenig mit dem neuen Gutenberg Editor vertraut macht, der wird schnell die Vorteile von WordPress 5 gegen\u00fcber seinen Vorg\u00e4ngern erkennen.<\/p>\n

Was ist der Gutenberg Editor?<\/h2>\n

Hinter dem ber\u00fchmten Namen verbirgt sich ein neuer Content Editor<\/a> f\u00fcr WordPress, welcher den bisherigen TinyMCE Editor aus den Vorg\u00e4ngerversionen abgel\u00f6st<\/strong> hat. Benannt nach dem Erfinder des Buchdrucks, wurde das neue Tool bereits 2017 beim WordCamp vorgestellt und Ende 2018 ver\u00f6ffentlicht. Ziel ist es, die Contenterstellung zu vereinfachen und das Programm auch unerfahrenen Nutzern zug\u00e4nglich zu machen.<\/p>\n

Verglichen mit den bisherigen Editoren basiert Gutenberg auf Bl\u00f6cken. Diese werden als Drag-and-Drop-Einheiten<\/strong> dargestellt und k\u00f6nnen somit als Ganzes erstellt, verschoben oder bearbeitet werden. Nach einem \u00e4hnlichen Prinzip funktionieren auch Page Builder Plugins in WordPress<\/a>. Was den Erfolg des neuen Editors angeht, so sind sich die Benutzer bislang allerdings noch uneins. W\u00e4hrend einige glauben, dass damit eine neue \u00c4ra der Contenterstellung begonnen hat, sehen andere darin das Ende von WordPress und \u00e4u\u00dfern sich teils negativ. Festzuhalten ist, dass es noch einige Bugs gibt. Dieser sollen jedoch nach und nach behoben werden, sodass es nur eine Frage der Zeit ist, bis sich Gutenberg letztlich wohl doch durchsetzen d\u00fcrfte.<\/p>\n

Warum sollten Nutzer auf Gutenberg zur\u00fcckgreifen?<\/h3>\n

Wenn Sie regelm\u00e4\u00dfig neuen Content auf Ihrer Website erstellen oder Ihren Onlineshop bearbeiten m\u00fcssen, nimmt dies meist viel Zeit in Anspruch. Dank der neuen Inhaltsbl\u00f6cke<\/strong> lassen sich diese Aufgaben zuk\u00fcnftig viel schneller erledigen. Dar\u00fcber hinaus war es bislang eher ein leidiges Thema, mit dem Editor komplexe Landingpages<\/a> sowie Layouts zu kreieren. Auch dieses Problem wurde nun mithilfe der Inhaltsbl\u00f6cke behoben. Das Blocksystem k\u00f6nnen Sie sich dabei \u00e4hnlich dem Spielen mit Legosteinen vorstellen. Die Gr\u00f6\u00dfe eines jeden Blocks kann simpel definiert und somit an andere benachbarte Bl\u00f6cke angeschlossen werden. Ob nun reine Texte, Bilder, Videos oder Buttons – alle Inhalte werden im Editor nun als Bl\u00f6cke dargestellt und k\u00f6nnen frei bewegt und angepasst werden. Entsprechend geht Anwendung leicht von der Hand.<\/p>\n

So funktioniert das Blocksystem<\/h3>\n

Wenn Sie mithilfe von Gutenberg einen neuen Beitrag oder eine neue Seite erstellen wollen, \u00f6ffnet sich zun\u00e4chst ein Fenster. Dort k\u00f6nnen Sie je nach Belieben einen Text oder anderweitige Medien aus der Mediathek<\/a> einf\u00fcgen. Ein Dr\u00fccken der Enter-Taste reicht im Folgenden bereits aus, um den Block zu genieren. Auf diese Weise werden im Editor nun auch Abs\u00e4tze erstellt, da ein Zeilenumbruch automatisch einen neuen Absatz generiert. Somit k\u00f6nnen die einzelnen Textpassagen sp\u00e4ter bei Bedarf gel\u00f6scht, bearbeitet oder ausgetauscht werden, ohne dass ein gro\u00dfer Aufwand f\u00fcr diese Schritte notwendig w\u00e4re.<\/p>\n

Wer etwas pr\u00e4ziser mit dem Gutenberg Editor arbeiten m\u00f6chte, der kann auf unterschiedliche Blockarten<\/strong> zur\u00fcckgreifen. Neben dem regul\u00e4ren Block, der als Absatz bezeichnet wird, gibt es auch spezielle Blocktypen. Diese k\u00f6nnen unter anderem f\u00fcr Bilder, Codes oder ganze Listen genutzt werden. Dabei hat jeder Blocktyp wiederum spezifische Eigenschaften, durch die er sich von den anderen Typen unterscheidet. Sofern ein komplettes Dokument aus mehreren Bl\u00f6cken desselben Typs besteht, bietet die Konfiguration die M\u00f6glichkeit, einen jeden Block unabh\u00e4ngig von den anderen zu bearbeiten. Auf diese Weise l\u00e4sst sich beispielsweise ein Text, der auf mehreren Absatzbl\u00f6cken basiert zu konfigurieren, dass ein jeder Absatz in einer anderen Schriftart oder Schriftfarbe erscheint.<\/p>\n

\"Allgemeine<\/a><\/p>\n

Selbst einem bestehenden Dokument lassen sich weitere Bl\u00f6cke hinzuf\u00fcgen. Hierf\u00fcr m\u00fcssen Sie lediglich mit der Maus an den oberen Rand eines der Bl\u00f6cke fahren. Anschlie\u00dfend erscheint am oberen Rand des ausgew\u00e4hlten Blocks ein kleines Plus-Zeichen. Mit einem weiteren Klick auf dieses Zeichen wird bereits ein neuer Block generiert, den Sie anschlie\u00dfend bearbeiten k\u00f6nnen. Dabei wird Ihnen zun\u00e4chst eine Auswahl an m\u00f6glichen Bl\u00f6cken pr\u00e4sentiert. Sie k\u00f6nnen nun frei w\u00e4hlen, ob Sie im n\u00e4chsten Block einen Text, eine Mediendatei, eine Liste oder einen Code integrieren wollen. Die Auswahl wird dabei nach den am meisten genutzten Bl\u00f6cken sortiert. An dieser Stelle wird besonders deutlich, warum WordPress 5 deutlich einfacher zu handhaben ist, als die vorherigen Versionen.<\/p>\n

Gutenberg Bl\u00f6cke formatieren und umwandeln<\/h3>\n

Der neue blockorientierte Aufbau des Gutenberg Editors bringt noch weitere Vorteile mit sich. So ist es ein Kinderspiel, bereits erstellte Bl\u00f6cke zu formatieren oder Blocktypen ineinander umzuwandeln. Wer einen Block formatieren m\u00f6chte, muss hierf\u00fcr lediglich den gew\u00fcnschten Block anklicken. Anschlie\u00dfend wird ein Kontextmen\u00fc am oberen Rand es ausgew\u00e4hlten Blocks angezeigt, mit dessen Hilfe die Formatierung vorgenommen werden kann. Dank dieses Men\u00fcs lassen sich Schriftstile einstellen oder Passagen des Textes mit einem Hyperlink unterlegen. Die jeweiligen Optionen sind dabei allerdings abh\u00e4ngig von der Art des jeweiligen Blocks.<\/p>\n

Dar\u00fcber hinaus k\u00f6nnen Sie mit WordPress nun auch ganz Bl\u00f6cke umwandeln. Linksseitig in Men\u00fc wird ein spiegelverkehrtes P eingeblendet. Dieses Zeichen zeigt zun\u00e4chst an, dass es sich bei diesem Block um einen Absatz-Block handelt. Sofern Sie dieses Symbol anklicken erscheint dar\u00fcber hinaus ein Dialogfenster, welches die Option bietet, den aktuellen Block in einen anderen Blocktypen umzuwandeln. Wie auch beim Formatieren ist auch dieses Men\u00fc kontextbezogen. Es werden im Gutenberg Editor also nur die Optionen angezeigt, die f\u00fcr den jeweiligen Blocktypen infrage kommen.<\/p>\n

Wollen Sie hingegen einen Block aus einem Dokument entfernen, so m\u00fcssen Sie zun\u00e4chst das Symbol mit den drei untereinander angebrachten Punkten im oberen Men\u00fc ausw\u00e4hlen. Anschlie\u00dfend k\u00f6nnen Sie den Block mit einem Klick auf den Men\u00fcpunkt „Block entfernen“ bequem l\u00f6schen.<\/p>\n

Die Einstellungen ganzer Dokumente bearbeiten<\/h3>\n

Dank des Blocksystems lassen sich einzelne Bl\u00f6cke im neuen Gutenberg Editor ohne viel Aufwand bearbeiten oder l\u00f6schen. Doch auch f\u00fcr die Bearbeitung ganzer Dokumente stehen zahlreiche Optionen zur Verf\u00fcgung. Unter dem Reiter Dokument, welcher sich im Einstellungsmen\u00fc befindet, finden sich administrative Konfigurationsoptionen, die keinen Einfluss auf das jeweilige Layout eines Dokuments haben. Hier k\u00f6nnen Sie unter anderem Einstellen, ob das Dokument auf der Website bereits \u00f6ffentlich einsehbar ist oder einen Termin festlegen, zu dem das Dokument auf der Website erscheinen soll.<\/p>\n

\"Dokument-Einstellungen<\/a><\/p>\n

Informationsanzeige zu den Dokumenten wurde \u00fcberarbeitet<\/h3>\n

Wer bereits zuvor mit WordPress und den dazu geh\u00f6rigen Editoren gearbeitet hat, der kennt die Informationsanzeige bez\u00fcglich der geschriebenen W\u00f6rter innerhalb eines Dokuments. Diese befand sich bislang am unteren Ende des Textes, wodurch sie schnell zu finden war. Im Gutenberg Editor ist dies nun nicht mehr der Fall. Aber keine Sorge, auch hier m\u00fcssen Sie nicht auf die gew\u00fcnschten Informationen verzichten. Mithilfe zweier unterschiedlicher Methoden lassen sich die Informationen auch im neuen Editor anzeigen. Die einfachste Variante ist ein Klick auf das kleine „i“ im oberen linken Men\u00fc, das von einem Kreis umgeben wird.<\/p>\n

Sofern Sie diesen Men\u00fcpunkt anklicken, bekommen Sie eine umfangreiche Informationsausgabe zum aktuellen Dokument. Diese beinhaltet neben der Anzahl der geschriebenen W\u00f6rter auch die Anzahl der \u00dcberschriften, Abs\u00e4tze sowie die Summe aller Bl\u00f6cke innerhalb des Dokuments. Weiterhin l\u00e4sst sich \u00fcber das Men\u00fc die Gliederung des Dokuments einsehen und auf einzelne Bl\u00f6cke zugreifen, ohne dass Sie hierf\u00fcr durch das gesamte Dokument scrollen m\u00fcssen.<\/p>\n

Diese Werkzeuge sollten Sie ebenfalls kennen<\/h2>\n

Im oberen rechten Bildrand des Editors erscheint eine weitere Neuerung in WordPress. Der Gutenberg Editor ist mit einer Vielzahl an Optionen und Werkzeugen ausgestattet, die sie zus\u00e4tzlich bei der Erstellung Ihres Contents unterst\u00fctzen k\u00f6nnen. Das Men\u00fc ist zun\u00e4chst grob in die drei Kategorien Ansicht, Editor sowie Werkzeuge unterteilt.<\/p>\n

Im Ansichtsmen\u00fc k\u00f6nnen Sie festlegen, an welchen Stellen des Dokuments die Werkzeugleiste<\/strong> zu finden sein soll. Somit k\u00f6nnen Sie Ihren „Arbeitsplatz“ im Dokument individuell einrichten. Dar\u00fcber hinaus ist auch der Spotlight Modus<\/strong> eine sinnvolle Erg\u00e4nzung. Wird dieser Modus ausgew\u00e4hlt, so werden alle anderen Bl\u00f6cke, mit Ausnahme des aktiven Blocks, ausgegraut. Somit ist es deutlich einfacher, sich auf den aktuell zu bearbeitenden Block zu konzentrieren. Weiterhin k\u00f6nnen Sie mithilfe der Ansicht auch einen Vollbildmodus aktivieren und diesen auf Wunsch wieder deaktivieren.<\/p>\n

Der Men\u00fcpunkt Editor dient hingegen nur einem Zweck. Hier k\u00f6nnen Sie festlegen, ob Sie im visuellen Editor oder im Codeeditor<\/strong> arbeiten wollen. Um sich unn\u00f6tige Klicks zu sparen, l\u00e4sst sich der Modus auch mit der Tastenkombination Ctrl+Shift+Alt+M<\/em> \u00e4ndern.<\/p>\n

\"Werkzeugleiste<\/a><\/p>\n

Die Werkzeuge wirken auf den ersten Blick \u00fcberschaubar, jedoch k\u00f6nnen sie richtig eingesetzt wertvolle Zeit sparen. Besonders interessant ist dabei der Men\u00fcpunkt Tastaturk\u00fcrzel. Hier k\u00f6nnen Sie sich auf Wunsch alle K\u00fcrzel anzeigen lassen, mit denen Sie Befehle im Gutenberg Editor geben k\u00f6nnen. Dies ist insbesondere f\u00fcr Einsteiger hilfreich, die Ihre F\u00e4higkeiten im Umgang mit WordPress 5 erweitern wollen. Noch wichtiger ist aber der Men\u00fcpunkt „Kompletten Inhalt kopieren“<\/strong>. Sofern Sie diesen Punkt ausw\u00e4hlen, besteht die M\u00f6glichkeit, den kompletten Inhalt des Dokuments inklusive aller Medien als HTML-Code in andere WordPress Dokumente einzuf\u00fcgen.<\/p>\n

 <\/p>\n

Zu guter Letzt k\u00f6nnen Sie mithilfe des Editormen\u00fcs auch bereits bestehende und gespeicherte Bl\u00f6cke verwalten<\/strong>. Die Optionen zur Verwaltung finden Sie unter dem Men\u00fcpunkt „Alle wiederverwendbaren Bl\u00f6cke verwalten.“ Dort werden Ihnen alle Bl\u00f6cke angezeigt, die Sie irgendwann gespeichert haben. Auf diese Weise l\u00e4sst sich wertvolle Zeit sparen, da die Bl\u00f6cke nicht neu geschrieben werden m\u00fcssen und binnen weniger Sekunden in andere Dokumente eingef\u00fcgt werden k\u00f6nnen.<\/p>\n

Fazit<\/h5>\n

Mit WordPress 5 hat der Gutenberg Editor nicht nur Einzug gehalten, sondern die Art und Weise ver\u00e4ndert, wie Websites und Onlineshops k\u00fcnftig bearbeitet werden k\u00f6nnen. Auch wenn es aufgrund der bisherigen Bugs vereinzelt zu Kritik kommt, macht der Editor genau das, wof\u00fcr er konzipiert wurde. Er l\u00e4sst sich ohne weitere Vorkenntnisse nutzen und erm\u00f6glicht so eine schnelle und dennoch flexible sowie komplexe Contenterstellung. Das neue Blocksystem tr\u00e4gt zudem dazu bei, dass bestehender Content schnell und einfach ausgetauscht oder bearbeitet werden kann. Wer sich etwas intensiver mit WordPress 5 und dem Gutenberg Editor besch\u00e4ftigt und sich mit dem Programm vertraut macht, der kann k\u00fcnftig wertvolle Zeit bei der Contenterstellung einsparen und seiner Internetpr\u00e4senz ein ganz neues Aussehen verleihen.<\/p>\n","protected":false},"excerpt":{"rendered":"

Mit der Ver\u00f6ffentlichung von WordPress 5 sind viele Ver\u00e4nderungen und Neuerungen einhergegangen. Die wohl Wesentlichste ist dabei die Einf\u00fchrung des neuen Gutenberg Editors, mit dessen Hilfe selbst Einsteiger nun besser<\/p>\n","protected":false},"author":6,"featured_media":1115,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","rank_math_title":"Gutenberg Editor - die neue M\u00f6glichkeit Content f\u00fcr Wordpress zu erstellen","rank_math_description":"Verglichen mit dem bisherigen Editor in WordPress basiert Gutenberg auf Bl\u00f6cken, die als Drag & Drop Einheiten erstellt, verschoben oder bearbeitet werden.","rank_math_focus_keyword":"gutenberg"},"categories":[12],"tags":[19],"class_list":["post-1112","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","tag-cms"],"_links":{"self":[{"href":"https:\/\/quantenfrosch.at\/blog\/wp-json\/wp\/v2\/posts\/1112","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/quantenfrosch.at\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/quantenfrosch.at\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/quantenfrosch.at\/blog\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/quantenfrosch.at\/blog\/wp-json\/wp\/v2\/comments?post=1112"}],"version-history":[{"count":2,"href":"https:\/\/quantenfrosch.at\/blog\/wp-json\/wp\/v2\/posts\/1112\/revisions"}],"predecessor-version":[{"id":1756,"href":"https:\/\/quantenfrosch.at\/blog\/wp-json\/wp\/v2\/posts\/1112\/revisions\/1756"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/quantenfrosch.at\/blog\/wp-json\/wp\/v2\/media\/1115"}],"wp:attachment":[{"href":"https:\/\/quantenfrosch.at\/blog\/wp-json\/wp\/v2\/media?parent=1112"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/quantenfrosch.at\/blog\/wp-json\/wp\/v2\/categories?post=1112"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/quantenfrosch.at\/blog\/wp-json\/wp\/v2\/tags?post=1112"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}