[Was sind] WordPress Gutenberg Blocks & wie man sie gut verwendet

Der WordPress Gutenberg-Editor kam im Dezember 5.0 mit WordPress 2018 auf den Markt. Die neue Funktion, besser bekannt als „Block-Editor“, wechselt bei der Seiten- und Beitragserstellung vom einfachen Box-Design früherer Versionen zu einem Erlebnis, das eher einem Seitenersteller ähnelt.

Gutenberg blocks bieten jetzt einen modularen Ansatz für die Inhaltserstellung. Anstatt Code zu verwenden, um ein anderes Element auf einer Seite hinzuzufügen, können Sie stattdessen einen Block austauschen. Beispielsweise können Sie einen Textblock durch einen Videoblock oder eine Tabelle ersetzen, ähnlich wie beim Erstellen einer Seite in Beaver Builder oder Elementor. Diese Entwicklung hat lange auf sich warten lassen, aber jetzt ist sie da, und Sie werden sich schnell fragen, wie Sie jemals Seiten ohne sie erstellt haben!

{autotoc}

Gutenberg blocks

Wenn Sie auf WordPress 5.0 oder höher aktualisieren (und das sollten Sie inzwischen tun), werden Sie bemerkt haben, dass sich die Benutzeroberfläche etwas weiterentwickelt hat. Sie sehen weiterhin das traditionelle Seitenmenü links und das Inhaltsmenü rechts, aber in der Mitte hat sich alles geändert.

Vor dem Update sahen Sie beim Erstellen Ihrer Seite oder Ihres Beitrags ein leeres Titel- und Inhaltsfeld. Jetzt sehen Sie in der Mitte einen leeren Bereich mit bereits ausgefülltem Titel- und Textblock. Das rechte Menü ändert sich dynamisch, je nachdem, was Sie gerade tun. Zunächst werden die traditionellen Optionen für Kategorie, Tag und Featurebild wie zuvor angezeigt, jetzt gibt es aber einen neuen Reiter für Blöcke.

Auf der Registerkarte „Block“ können Sie einzelne Blöcke bearbeiten, ähnlich wie bei Seitenerstellern, die viel Gestaltungsfreiheit bieten. Was Sie auf der Registerkarte „Block“ sehen, hängt vom jeweiligen Block ab, aber alle bieten die Möglichkeit, benutzerdefiniertes CSS hinzuzufügen.

Gutenberg blocks Wir führen einen modularen Ansatz für die Seitengestaltung ein. Sie haben die Möglichkeit, die Dinge so zu gestalten, wie Sie es gewohnt sind, oder tiefer einzutauchen. Sie können jeden Block so anpassen, dass er subtil oder deutlich anders aussieht, oder alle Blöcke als nahtloses Ganzes funktionieren lassen. Es ist ein sehr leistungsstarkes und fehlerverzeihendes System.

Wie man den Dienst nutzt Gutenberg blocks

Das Tolle am WordPress-Redesign ist, dass es der bisherigen Benutzeroberfläche so ähnlich ist, dass sie Ihnen vertraut ist. Auch wenn Sie die neuen Blöcke noch nicht kennen, können Sie Ihren Seitentitel, Ihre Inhalte, Codes und Widgets wie gewohnt hinzufügen und veröffentlichen. Es sieht vielleicht etwas anders aus, funktioniert aber weitgehend gleich.

Das ist ideal für Gelegenheitsblogger oder WordPress-Neulinge. Da die Benutzerfreundlichkeit ein Schlüsselelement des CMS ist, ist es den Entwicklern gelungen, erweiterte Funktionen hinzuzufügen, ohne die Bedienung des Gesamtsystems zu erschweren.

Sie können mit den Standardoptionen immer noch in wenigen Minuten eine Seite erstellen, aber jetzt können Sie viel tiefer gehen, ohne eine einzige Codezeile lernen oder überhaupt wissen zu müssen, wie ein Shortcode aussieht.

Es sind diese Dinge, die Gutenberg blocks so nützlich.

Sie können entweder verwenden Gutenberg blocks oder nicht.

Mit der Standardeinstellung für Seiten und Beiträge können Sie Ihren Seiteninhalt weiterhin an anderer Stelle vorformatieren und einfach kopieren und auf der Seite einfügen. Fügen Sie den Titel in den Titelblock und den Seiteninhalt in den Textblock ein. Wenn das alles ist, was Sie benötigen, ist der Erstellungsprozess so einfach wie zuvor. Wenn Sie noch weitere Schritte unternehmen möchten, können Sie dies tun.

Wenn Sie tiefer in die Funktionsweise des Block-Editors eintauchen möchten, werden Ihnen einige weitere Optionen angezeigt:

• Wählen Sie das kleine „+“-Symbol neben dem mittleren Block, um einen neuen Block hinzuzufügen.
• Wählen Sie das „H“, um eine Überschrift hinzuzufügen.
• Wählen Sie das Listensymbol aus, um Ihrem Block eine Liste hinzuzufügen.
• Wählen Sie das Bildsymbol aus, um ein Bild hinzuzufügen.

Alle vier Optionen sind im Inhaltsmenü verfügbar. Da sie jedoch für jeden Block verfügbar sind, können Sie Ihren Inhalt in jedem beliebigen Design gestalten. Die einzelnen Blöcke können individuell bearbeitet und gestaltet werden und werden auf der fertigen Seite angezeigt.

Das ist etwas Elementor (und ähnliche Seitenersteller wie Divi) tun wir seit Jahren mit großem Erfolg. Das Gleiche können Sie jetzt auch in WordPress tun.

Hier finden Sie mehr über Divi in ​​unseren Elegant Themes-Bewertungen.

Das Erstellen einer Seite mit dem Blockeditor ist einfach:

1. Wählen Sie „Neue Seite“ oder „Neuer Beitrag“ aus dem WordPress-Seitenmenü.
2. Schreiben oder fügen Sie Ihren Seitentitel in den Titelblock ein.
3. Schreiben oder fügen Sie Ihren Inhalt in den Textblock ein.
4. Wählen Sie das „+“-Symbol rechts neben dem Block, um einen neuen Block hinzuzufügen.
5. Wählen Sie den am besten geeigneten Block aus dem Popup-Fenster aus.
6. Vervollständigen Sie die Hauptblockelemente im mittleren Bereich.
7. Wählen Sie das Drei-Punkte-Symbol oben im Block aus, den Sie hinzugefügt haben, um das Design zu ändern oder anzupassen.
8. Um benutzerdefiniertes CSS hinzuzufügen, wählen Sie „Erweitert“ aus dem rechten Menü.
9. Wählen Sie zweimal „Veröffentlichen“ aus, um live zu gehen.

Obwohl die Verwendung des Blockeditors sehr einfach ist, können Sie bei Bedarf auch tiefer eintauchen. Das Drei-Punkte-Menüsymbol neben jedem Block eröffnet je nach Block eine Vielzahl von Anpassungsmöglichkeiten. Sie können Duplikat den Block, fügen Sie davor oder danach andere Blöcke ein, ändern Sie die HTML-Attribute, gruppieren Sie Blöcke und mehr, je nach verfügbaren Optionen.

Darüber hinaus können Entwickler neben den Standardblöcken von WordPress auch eigene Block-Plugins erstellen. Angesichts der enormen Nutzerbasis und des großen Entwicklertalents von WordPress gibt es bereits nach einem Jahr Nutzung zahlreiche Block-Plugins.

Häufig verwendete Blöcke

WordPress bietet eine Reihe von Blöcken für die Erstellung von Kernseiten. Jeder Block erleichtert das Hinzufügen verschiedener Seitenelemente und ermöglicht individuelle Gestaltungsmöglichkeiten für den jeweiligen Block. Es handelt sich um eine leistungsstarke Bearbeitungsoption, die sich mit großer Wirkung einsetzen lässt.

Die Standard Gutenberg blocks innerhalb von WordPress umfassen:

• Textblock – Der traditionelle Inhaltsblock, in dem Sie genau wie zuvor arbeiten und Änderungen mithilfe von HTML oder Shortcodes vornehmen können.
• Überschrift - Überschriftenblöcke mit den Standardeinstellungen H1, H2, H3, H4.
• Liste - Ein separater Block, mit dem Sie herausragende Listen erstellen können, entweder geordnet oder ungeordnet.
• Galerie - Ein Galerieblock, der die benutzerdefinierte Formatierung von Bildern ermöglicht, damit sie zu Ihrem Seiteninhalt passen.
• Bild - Ein spezieller Bildblock, der ähnlich wie die Galerie funktioniert, jedoch für einzelne Bilder.
• Zitat - Ein hervorstechender Block, mit dem Sie Zitate oder Rezensionen auf einer Seite hervorheben können.
• Audio - Ein spezieller Block zum Anzeigen von Audioclips per Klick zum Abspielen innerhalb des Seiteninhalts.
• Startseite - Ein neuer Block, mit dem Sie ein Titelbild für Ihre Seite oder Ihren Beitrag platzieren können, das das vorgestellte Bild ergänzen kann.
• Video - Ein Videoblock, der wie Audio funktioniert und es einfach macht, Videos auf einer Seite oder in einem Beitrag einzubinden.

Alles, was Sie tun können mit Gutenberg blocks Mit dem ursprünglichen Editor war dies zwar möglich, er war jedoch nicht immer benutzerfreundlich oder für neue Benutzer zugänglich. Das Blockdesign erleichtert jedem den logischen und linearen Seitenaufbau.

Die besten Gutenberg-Block-Plugins

Das Standard-WordPress Gutenberg blocks decken die meisten Ihrer CMS-Anforderungen ab. Wir haben jedoch bereits erwähnt, dass Entwickler auch eigene Gutenberg-Block-Plugins entwickeln, um weitere Funktionen hinzuzufügen. Es gibt Dutzende von Block-Plugins unterschiedlicher Qualität, und wir haben hier einige unserer Favoriten zusammengestellt.

Schauen wir uns jetzt einige davon an.

Wir werden uns ansehen:

1. Toolset-Blöcke
2. Ultimative Blöcke
3. Ultimative Addons für Gutenberg
4. Erweitert Gutenberg Blocks
5. Stapelbar Gutenberg Blocks
6. Atomblöcke
7. Otterblöcke
8. Blöcke von Templatic
9. Kadence-Blöcke

Viele dieser Gutenberg-Block-Plugins sind völlig kostenlos, während andere kostenlose Blöcke mit der Option zum Upgrade auf erweiterte Premium-Blöcke anbieten. Wir haben in jeder Beschreibung aufgeführt, welche kostenlos sind und welche Premium-Optionen es gibt.

Die Installation erfolgt wie bei jedem anderen WordPress-Plugin. Wählen Sie es auf WordPress.org aus und installieren und aktivieren Sie es oder laden Sie die Dateien auf Ihren Computer herunter und laden Sie sie in Ihre WordPress-Installation hoch. Nach der Installation sollten Ihre neuen Blockoptionen angezeigt werden, wobei der Standardblock angezeigt wird, wenn Sie auf einer Seite „+“ auswählen.

1. Toolset-Blöcke

Toolset-Blöcke ist eines unserer beliebtesten Blockeditor-Plugins für WordPress. Es ist ein Premium-Plugin, das beweist, dass man zwar gute Inhalte kostenlos bekommt, es sich aber manchmal lohnt, für Leistung und Komfort etwas mehr zu bezahlen. Das Plugin wird wie andere Plugins installiert und fügt die neuen Blöcke zum bestehenden Menü hinzu.

Die Blöcke umfassen benutzerdefinierte Beitragstypen, benutzerdefinierte Taxonomien, benutzerdefinierte Felder, Vorlagen, Ansichten, Paginierung, Infinite Scroll, Ajax-Blöcke, WooCommerce, Google Maps, Formulare, Zahlungen und sogar Zugriffskontrolle. Einige dieser Blöcke sind in keinem kostenlosen Plugin enthalten, weshalb wir Toolset-Blöcke hervorgehoben haben.

Eine der besten Funktionen von Toolset ist die Möglichkeit, dynamisch generierte Inhalte zu erstellen, OHNE benutzerdefinierten PHP-Code erstellen zu müssen. Toolset ist direkt in den WordPress-Block-Editor integriert und ermöglicht Ihnen, dynamische Inhalte von überall abzurufen.

Hier einige Beispiele dafür, was Sie tun können: 

• Erstellen Sie Überschriften basierend auf Titeln
• Legen Sie Schaltflächentexte und CTAs aus benutzerdefinierten Feldern fest
• Bildquellen für Felder oder benutzerdefinierte Felder festlegen
• usw.

Das folgende Video bietet eine hervorragende Erklärung der Funktionen von Toolset Blocks:

https://www.youtube.com/watch?v=yPExGHvf_mI

Die meisten von uns wissen, wie leistungsstark benutzerdefinierte Felder und Beitragstypen sein können, und die Möglichkeit, diese innerhalb einer Seite zu implementieren, ist großartig. Neben Formularen, Layouts, Ansichten, Zugriffskontrollen und den anderen leistungsstarken Funktionen ist dieses Plugin, obwohl es ein Premiumprodukt ist, unglaublich empfehlenswert.

Manchmal ist kostenlos nicht der beste Preis und dies ist einer dieser Fälle.

2. Ultimative Blöcke

Ultimative Blöcke richtet sich an Blogger, funktioniert aber auch auf jeder WordPress-Website. Das Plugin ist kostenlos und enthält eine Auswahl an Werbe- und sehr nützlichen Bearbeitungsblöcken, die ideal für Blogger sind, sich aber auch für Vermarkter, E-Commerce-Websites, kleine Unternehmen und alle, die ihre Inhalte hervorheben möchten, als nützlich erweisen könnten.

Zu den Blöcken gehören Rezensionen, Inhaltsverzeichnisse, Handlungsaufforderungen, Inhaltsumschalter, Bildschieberegler, Inhaltsfilter, Testimonials, Social Sharing, Countdown-Timer, Fortschrittsbalken, Beitragsraster und Sternebewertungen. Der Entwickler kündigt weitere Funktionen an.

Ultimate Blocks hat mit seinem Blockmanager noch einen weiteren Trick auf Lager. Eine einfache Benutzeroberfläche hilft Ihnen, Blöcke zu aktivieren oder zu deaktivieren, um die Seitenerstellung zu vereinfachen. Sie können die Sammlung herunterladen und nur die Blöcke aktivieren, die Sie wahrscheinlich verwenden. So bleibt die Seite während der Erstellung übersichtlich.

3. Gutenberg Blocks – Ultimative Addons für Gutenberg

Gutenberg Blocks – Ultimative Addons für Gutenberg stammt von den gleichen Entwicklern wie das hervorragende Astra WordPress-ThemeDas kostenlose Plugin fügt eine Reihe von Blöcken für den alltäglichen Gebrauch hinzu, die einfach zu bedienen sind und vielfältige Anpassungsmöglichkeiten bieten. Sie funktionieren alle auch mit Astra, was großartig ist, wenn Sie dieses Theme verwenden.

Zu den Blöcken gehören Infoboxen, Schaltflächen, erweiterte Überschriften, Teamblöcke, Preise, Social Shares, Testimonials, Symbollisten, Gravity Form-Blöcke, Marketingblöcke, Zitate, Handlungsaufforderungen, Contact Form 7-Blöcke, Google Maps und mehr.

Die Entwickler geben an, dass diese Blöcke für die Seitengeschwindigkeit optimiert wurden und gleichzeitig eine nahtlose Integration in das Astra-Theme und in jedes andere Theme ermöglichen. Sie haben ähnliche Anpassungsmöglichkeiten wie diese anderen Plugins, um Blöcke in bestehende Seiten einzufügen. Allein das macht dieses Plugin einen Blick wert.

4. Erweitertes Gutenberg

Fortgeschrittener Gutenberg Joom United bietet über zwanzig Editor-Blöcke als kostenloses WordPress-Plugin an. Die Auswahl ist groß, von der üblichen Spalte und Überschrift bis hin zu erweiterten Blöcken. Die Blöcke sind gut gestaltet und verfügen über eine minimalistische Benutzeroberfläche, die dennoch alle Anpassungsmöglichkeiten bietet, die Sie wahrscheinlich benötigen.

Zu den Blöcken gehören Autorenprofile, benutzerdefinierte CCS-Blöcke, WooCommerce, erweiterte Schaltflächen, Kontaktformulare, erweiterte Listen, Karten, Testimonials, Zähler, Anmelde- und Registrierungsblöcke, Video- und Bildblöcke, Social Sharing und Verlinkung, Beitragszusammenfassungen, Lightbox-Blöcke und vieles mehr.

Jedes Element lässt sich nahtlos in eine Seite integrieren und verfügt über die erweiterte Anpassungsoption über das Drei-Punkte-Menü. Die genauen Optionen unterscheiden sich je nach Block, decken aber die gängigsten Situationen ab, wie Farbe, Größe, Einzug, Ausrichtung usw.

5. Stapelbar Gutenberg Blocks

Stapelbar Gutenberg Blocks Das Update war ebenfalls ein früher Neuzugang und veröffentlichte einige sehr nützliche benutzerdefinierte Blöcke für den WordPress-Editor. Die meisten stapelbaren Blöcke sind kostenlos, der Entwickler bietet aber auch einige Premium-Blöcke für spezielle Anwendungen an, falls Sie diese benötigen.

Zu den kostenlosen Blöcken gehören Postblöcke, Feature-Raster, Akkordeon, Handlungsaufforderung, Karte, Kopfzeile, Video-Popup, Preisblock, Benachrichtigungsblock, Abstandshalter, Trenner, Feature-Liste und mehr. Insgesamt gibt es 23 kostenlose Blöcke.

Ein weiterer Vorteil: Stackable ist ein modulares System, sodass Sie die Blöcke hinzufügen können, die Sie wahrscheinlich benötigen, während Sie die anderen weglassen. Dies kann je nach Aufbau Ihrer Website einen kleinen Vorteil hinsichtlich Speicherplatz und Seitengeschwindigkeit bringen. So oder so ist es eine nette Zusatzfunktion, die das Backend schlank hält.

6. Atomblöcke

Atomblöcke war eines der ersten Plugins und bietet nun 15 kostenlose Blöcke und einige WordPress-Themes, um diese neue Gestaltungsfreiheit zu ergänzen. Zu den Blöcken gehören Testimonials, Preise, Newsletter, Post-Raster, erweiterte Spalten, Share-Icons, Handlungsaufforderungen, Autorenprofil und weitere nützliche Blöcke.

Das Plugin ist wie die meisten Themes kostenlos. Nach der Installation sehen Sie eine neue Reihe von Blöcken im Blockbereich einer neuen Seite oder eines neuen Beitrags. Suchen Sie nach „AB Post Grid“ usw., um die Atomic Block-Funktionen zu identifizieren.

Wie bei den anderen Editor-Block-Plugins können Sie deren Erscheinungsbild im erweiterten Menü anpassen. Sie haben ähnliche Optionen hinsichtlich Deckkraft, Farbe, Positionierung usw. und zusätzlich den Vorteil zusätzlicher Auswahlmöglichkeiten, wenn Sie ein Atomic-Block-Theme verwenden. Es ist zwar nur eine kleine Zusatzfunktion, aber sie ist da!

7. Gutenberg Blocks und Vorlagenbibliothek von Otter

Gutenberg Blocks und Vorlagenbibliothek von Otter ist ein ziemlich sperriger Name, der in Bezug auf die Funktionen deutlich leichter verdaulich ist. Es handelt sich um ein kostenloses, leichtgewichtiges Plugin, das einige gut gestaltete Blöcke enthält, die auf denen von WordPress aufbauen, jedoch mit mehr Designoptionen.

Zu den Blöcken gehören Abschnitte, erweiterte Überschriften, Schaltflächen, Preise, Testimonials, Google Maps, Autorenbiografien, ein Beitragsraster, Font Awesome, Teilen und ein Kartenblock. Alle sind auf Seitengeschwindigkeit und Funktionen optimiert. Obwohl sie nur wenige Funktionen bieten, sind sie eine hervorragende Ergänzung zu den Standardblöcken.

Für jeden Block gibt es zusätzliche Anpassungsmöglichkeiten und einige Bibliotheksoptionen. Sie können jeden Block an Ihre spezifischen Bedürfnisse anpassen oder eine Bibliotheksoption nutzen, um ein vorgefertigtes Design zu übernehmen und es innerhalb des Blocks zu verwenden. Das geht schnell und ist sehr unkompliziert.

8. Blöcke von Templatic

Blockiert Das von Entwickler Templatic entwickelte Plugin ist ein weiterer solider Neuzugang in unserer Liste hervorragender Gutenberg-Block-Plugins. Wir schätzen Templatic-Themes sehr und diese Blöcke funktionieren mit oder ohne eines ihrer Themes. Wenn Sie ein Templatic-Theme verwenden, fügen sich diese Blöcke nahtlos ein und sind sofort einsatzbereit. Auch ohne Templatic-Theme fügen sich diese Blöcke nahtlos in Ihr Design ein.

Die Blöcke sind kostenlos und umfassen eine Autorenbiografie, Benachrichtigungen, Social-Media-Sharing, Trennlinien, ein Titelbild, Überschriftenoptionen, eine Karte, Preise, Schaltflächen und einen Tweet-Block. Jeder Block bietet die wichtigsten Funktionen im Vordergrund, Anpassungen sind über das Menü möglich. Sie sind sehr einfach zu bedienen und werden neben allen Standardblöcken auf der neuen Seite oder im Beitragsbildschirm angezeigt.

Es gibt hier einige gute Blöcke, aber das Plugin wurde seit fast einem Jahr nicht mehr aktualisiert. Sie funktionieren zwar mit der aktuellen Version von WordPress, da wir sie rechtzeitig für diesen Artikel getestet haben, aber wir wissen nicht, wann neue Blöcke verfügbar sein werden.

9. Kadence-Blöcke

Kadence-Blöcke bietet sowohl kostenlose als auch Premium-Optionen, die die Standardblöcke in WordPress ergänzen. Die kostenlose Version umfasst zwölf Blöcke und einen integrierten Editor, während die Premium-Version für 59 $ pro Jahr sieben Premium-Blöcke, einzigartige Animationsoptionen und Support bietet. Es gibt außerdem eine dritte Option: Für 99 $ pro Jahr erhalten Sie Zugriff auf alle Premium-Bearbeitungsblöcke sowie alle Kadence-Themes und -Produkte.

Zu den Blöcken gehören Seitenlayoutblöcke, Infoboxen, erweiterte Galerien, Testimonials, Videoblöcke, Akkordeons, Schaltflächen, Registerkarten, Symbole, erweiterte Überschriften und Bilder. Die Premium-Version bietet zusätzlich Raster- und Karussellblöcke, Produktkarussells, Modellblöcke, Bildüberlagerungen, geteilte Inhalte und Video-Popups.

Jeder Block verfügt über einen benutzerdefinierten Bearbeitungsbereich, in dem Sie Position, Umriss, Farbe, Bildgröße, Deckkraft und eine Reihe weiterer Faktoren ändern können. Wenn Sie mit einem bestimmten Design oder Framework arbeiten, können Sie Blöcke mithilfe des Editors problemlos in dieses Design integrieren.

Zusammenfassung der Gutenberg blocks und ihre Plugins

Gutenberg blocks sind eine hervorragende Weiterentwicklung von WordPress. Sie nutzen alles, was wir über die schnelle Erstellung von Seiten oder Beiträgen wissen und schätzen, und entwickeln es weiter. WordPress bietet weiterhin die gewohnte Benutzerfreundlichkeit und niedrige Einstiegshürden für Anfänger und bietet gleichzeitig erfahrenen oder designorientierten Nutzern die Möglichkeit, sich zu profilieren. Diese Balance zwischen Form und Funktion ist es wert, gefeiert zu werden.

Das gilt auch für die Gutenberg-Block-Plugins, die wir in dieser Liste vorstellen. Die kostenlosen Plugins bieten nahezu alles, was Sie für die Seitenerstellung benötigen. Sie bieten die Möglichkeit, eine Seite oder einen Beitrag in einzelne Komponenten aufzuteilen und diese individuell zu gestalten, bis sie perfekt sind.

Selbst diese Premium-Plugins sind ihren Preis wert. Sie bieten tendenziell höhere Standards in Bezug auf Design und Benutzerfreundlichkeit und enthalten auch einige Blöcke, die anderswo nicht erhältlich sind. Toolset Blocks ist zwar Premium, bietet aber eine Reihe von Blöcken, die Sie in keinem kostenlosen Plugin finden, wie z. B. Suche, Zugriffskontrolle, WooCommerce sowie benutzerdefinierte Beiträge und benutzerdefinierte Felder.

Hast du ein Lieblings-Gutenberg-Block-Plugin? Gefällt dir eines, das wir hier nicht erwähnt haben? Dann erzähl uns unten davon!