Gutenberg Editor für Einsteiger – Alles über Gutenberg Blöcke

Gutenberg Editor für Einsteiger - Alles über Gutenberg Blöcke 2

Auch als Einsteiger kannst du mit dem Gutenberg Editor deine Website mit WordPress und deinen WooCommerce Onlineshop ohne Programmierkenntnisse mit den unterschiedlichen Gutenberg Blöcken gestalten.

Jeder Block lässt sich individuell konfigurieren und alle Blöcke lassen sich kopieren, verschieben, als Vorlage abspeichern und natürlich wieder löschen.

Die Blöcke können z.B. Texte, Überschriften, Bilder, Videos oder auch Produkte des Onlineshops enthalten. In unserem Beitrag Lass dich vom Gutenberg Editor überzeugen, zeigen wir die Vorteile des WordPress Editors.

In dieser Gutenberg Editor Anleitung für Einsteiger erklären wir, wie du Blöcke mit dem Gutenberg Editor einfügen und konfigurieren kannst.

Tipp: Informiere dich über die zahlreichen Möglichkeiten der Individualisierung, die unser modernes Gutenberg WooCommerce Theme Atomion zur Verfügung stellt.

Inhaltsverzeichnis Gutenberg Editor – Blöcke

Blöcke mit dem Gutenberg Editor einfügen

Gutenberg Editor für Einsteiger - Alles über Gutenberg Blöcke 3
Du kannst die Blöcke über das Pluszeichen links oben und rechts neben der Zeile sowie mit einem Schrägstrich (/) in der jeweiligen Zeile aufrufen. Die Blöcke sind in Kategorien unterteilt und lassen sich durch Klicken auf das jeweilige Blocksymbol in der betreffenden Zeile einfügen.

Gutenberg Editor – Aufbau

Aufbau-Gutenberg-Block-
Jeder Block besteht aus einer Werkzeugleiste, einer rechten Seitenleiste und dem Block Inhalt. Der Aufbau verändert sich nicht, die Inhalte und die Optionen passen sich den jeweiligen Blöcken an. 

Tipp: Mit unserem Cookie Cracker erhältst du eine DSGVO konforme Cookie Opt-in Lösung, mit welcher du Cookies und externen Content rechtskonform auf deiner Website integrieren kannst.
Weitere Informationen findest du hier.

Gutenberg Editor – Inhalt

Gutenberg Block Inhalt

Aktuell gibt es über 30 Standardblöcke, die in die Bereiche Text, Medien, Design, Widgets und Einbettungen eingeteilt sind. Nach der Installation von WooCommerce kommen noch weitere Blöcke hinzu. Über diese Blöcke kannst du unterschiedliche Inhalte auf deiner Seite einfügen.
Eine Auflistung aller Blöcke findest du z.B. in der Gutenberg-Fibel.

Gutenberg Editor – Werkzeugleiste

Gutenberg Werkzeugleiste
Die Werkzeugleiste erscheint automatisch nach der Aktivierung eines Blocks. Die Optionen in der Werkzeugleiste passen sich dem jeweiligen Block an.

Gutenberg Editor – Erweitertes Menü

Gutenberg Editor Erweitertes Menü

Über die „kleinen drei“ Punkte gelangst du zum Erweiterten Menü.

Erweitertes Menü

Weitere Einstellungen ausblenden

Über diese Option kannst du die rechte Menüleiste ausblenden. Durch Klicken auf das Zahnrad rechts oben lässt sich ebenso die Seitenleiste ein und ausblenden.

Kopieren

Du kannst den Block in die Zwischenablage kopieren und anschließend an einer anderen Stelle oder auf einer anderen Seite wieder einfügen.

Tipp: German Market macht deinen WooCommerce Shop fit für den deutschsprachigen Markt und die gesamte EU. Inklusive rechtlich relevanter Inhalte, integrierter Rechnungserstellung, Anbindung an dein Buchhaltungssystem, Bearbeitung von Stornos und vielem mehr. Weitere Informationen findest du hier.

Duplizieren

Dieser Menüpunkt dupliziert den ausgewählten Block und fügt ihn automatisch direkt darunter wieder ein.

Davor einfügen & Danach einfügen

Diese Optionen fügen vor oder nach dem ausgewählten Block einen zusätzlichen Absatz ein.

Verschieben nach

Nach dem Drücken des Menüpunktes Verschieben nach erscheint eine blaue Linie. Diese lässt sich mit den Pfeiltasten der Tastatur nach oben oder unten verschieben. Nach Bestätigen der Position mit Enter wird der zuvor gewählte Block eingefügt.

Als HTML bearbeiten

Über diesen Menüpunkt kannst du dir den HTML-Quellcode des jeweiligen Blocks anzeigen lassen und gegebenenfalls anpassen.

Zu wiederverwendbaren Blöcken hinzufügen

Einzelne Blöcke oder Gruppierte Blöcke lassen sich als wiederverwendbare Blöcke abspeichern und später auf jeder beliebigen Seite einfügen. Anpassungen, die du bei wiederverwendbaren Blöcken durchführst, wirken sich auf alle anderen (verknüpften) wiederverwendbaren Blöcke aus.

Gruppieren

Über diesen Menüpunkt kannst du mehrere Blöcke zu einem Block zusammenfügen. Die Gruppierung lässt sich jederzeit wieder aufheben. Für das Gruppieren der Blöcke werden die jeweiligen Blöcke markiert und anschließend über den Menüpunkt Gruppieren zusammengefügt.

Gutenberg Editor – Seitenleiste

Gutenberg-Block-Seitenleiste

In der rechten Seitenleiste (Block) finden sich die spezifischen Einstellungen des aktivierten Blocks. An oberster Stelle steht eine kleine Beschreibung. Im Bereich Erweitert (ganz unten) kannst du zusätzliche CSS-Klassen eingeben und einen HTML-Anker festlegen, um den jeweiligen Block zu verlinken.

Gutenberg Editor: Tipps und Tricks

Tipp: Verkaufe gleichzeitig an B2B und B2C. Mit individuellen Preisen für unterschiedliche Kunden, Prüfung der USt-ID, Staffelpreisen, erweiterten Rabatten und vielem mehr. Weitere Informationen findest du hier.

Zusätzliche Blöcke direkt von Drittanbietern laden

Bloecke-Gutenberg-Editor-Drittanbieter-1

Über das Pluszeichen (links oben) kannst du Externe Blöcke von Drittanbietern über das Suchfeld aufrufen. So kannst d z. B. mit dem Wort „Team” den Block „Team Member“ finden und auf deiner Seite einfügen.

Block mit der Maus verschieben

Gutenberg-Block-verschieben

Wenn du mit der Maus (linke Maustaste) die kleinen sechs Punkte auf der Werkzeugleiste klickst, kannst du den Block auf jede beliebige Position auf der Seite verschieben. Während der Aktion erscheint eine blaue Linie, die dir zeigt, wo du den Block ablegen kannst.

Block mit der Tastatur löschen

Du kannst jeden Block mit der Backspace-Taste (Rücklöschtaste) deiner Tastatur löschen, ohne die Maus zu verwenden.

Block Gruppieren

Gutenberg-Block-Kopieren

Du kannst einen Block mit dem Namen Gruppe auf deiner Seite hinzufügen und in diesem Block weitere Blöcke hinzufügen. So lassen sich Gruppierte Blöcke einfach erstellen und müssen nicht später über das erweiterte Menü zusammengefügt werden.

Wiederverwendbare Blöcke verwalten

Wiederverwendbare Blöcke

Wurden Wiederverwendbare Blöcke erstellt, kannst du oben über das Pluszeichen auf die Bibliothek zugreifen und die gespeicherten Blöcke aufrufen und anpassen.

Gutenberg Blöcke nebeneinander einfügen

Bloecke-Gutenberg-nebeneinander

Über den Block mit dem Namen Spalten kannst du mehrere Blöcke nebeneinander einfügen. Die Spaltenanzahl und Spaltenbreite lässt sich nach dem Einfügen noch individuell anpassen.

Block Vorlagen (Block Patterns)

Gutenberg Block Patterns

Der Gutenberg Editor verfügt auch über eine kleine Anzahl an Vorlagen (Block Patterns). Diese kannst du über das Pluszeichen links oben aufrufen und mit einem Klick einfügen. Neben den internen Vorlagen bieten auch externe Anbieter zusätzliche Blockvorlagen an.

Video-Tutorial

 

Mit dem Laden des Inhalts akzeptierst du die Datenschutzerklärung von YouTube.

 

Du hast Fragen zu diesem Beitrag? Stelle diese gerne in den Kommentaren. Du willst über zukünftige Tipps zu WooCommerce informiert werden? Dann folge uns auf Twitter, Facebook oder über unseren Newsletter.

Newsletter abonnieren

Harald

Harald ist WooCommerce-Experte und unterstützt Kunden bei der Umsetzung ihrer Onlineshops. Wenn er nicht vor dem Computer sitzt, macht er lange Spaziergänge und zitiert schlaue Sprüche.

Das könnte dich auch interessieren

Lass dich vom Gutenberg Editor überzeugen

Der Gutenberg Editor ist einfach zu verstehen, bietet umfangreiche Funktionen und lässt sich durch zusätzliche Plugins erweitern. Dieser Blogbeitrag ist ...

Mehr erfahren

Atomion 1.1.2: Update veröffentlicht

Mit Version 1.1.2 wird unser Gutenberg WooCommerce Theme Atomion noch besser und bietet neue interessante Optionen. Dieser Blogbeitrag mit Video-Tutorial ...

Mehr erfahren

Die besten WooCommerce Themes 2019

Welches Theme darf es denn sein? Das fragen uns unsere Onlineshop-Kunden immer wieder. Wir haben eine Auswahl für dich: Klassiker, aber auch an unbekannte ...

Mehr erfahren

Schreibe eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Du kannst folgende HTML Tags verwenden: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>