WordPress-Blöcke: Eine ausführliche Anleitung

WordPress-Blöcke sind die Hauptkomponente des Drag-and-Drop-Gutenberg-Bearbeitungssystems von WordPress für Websites.

Der einfachste Weg, die Verwendung von Blöcken zu lernen, ist durch praktisches Üben, aber zu verstehen, was Blöcke sind und was sie für Sie tun können, kann Ihre Seitenerstellung effizienter und sogar unterhaltsamer machen.

Egal, ob Sie neu in der Erstellung von WordPress-Sites sind oder fortgeschrittene Fähigkeiten entwickeln möchten, in diesem Handbuch erfahren Sie mehr darüber, was Blöcke sind, welche Blöcke häufig verwendet werden, wie man sie verwendet und andere Informationen, die Ihre Site verbessern können.

Erfahren Sie mehr: WordPress-Website-Design: So erstellen Sie eine WordPress-Website von Grund auf neu

Was sind WordPress-Blöcke?

WordPress-Blöcke sind diskrete Elemente aus Text, Medien oder benutzerdefiniertem Code, die Sie mit dem Gutenberg-Bearbeitungssystem von WordPress zu einem Blog-Post oder einer Website-Seite hinzufügen können.

Die meisten Leute konzentrieren sich darauf, es für Blogs zu verwenden, aber es funktioniert gut für die meisten anderen Seiten auf vielen Websites.

WordPress-Blöcke existieren, um das Erstellen von Beiträgen und Seiten zu vereinfachen, die für die Leser gut aussehen, indem die Notwendigkeit beseitigt wird, jedes Element manuell zu codieren. Stattdessen können Sie jeden Block ziehen und neu anordnen, um das Aussehen Ihrer Seite anzupassen.

Jeder Block ist funktional ein in sich geschlossenes Element auf der Seite, sodass das Ändern eines Blocks die anderen nicht ändert.

Dies ist nicht das einzige Blockbearbeitungssystem auf dem Markt. Einige konkurrierende Dienste wie Ghost verfügen auch über robuste Editoren, mit denen Sie Websites erstellen können.

Ghost ist jedoch hauptsächlich eine Blogging-Plattform, und sein Editor konzentriert sich darauf, während der Editor von WordPress auch hilfreich ist, um Nicht-Blog-Seiten auf Ihrer Website zu erstellen.

Diese Blöcke unterscheiden sich auch von Drupal, einem anderen Content-Management-System.

Drupal konzentriert sich auf Blöcke, die auf mehreren Teilen einer Website erscheinen können, während WordPress sich auf einzelne Teile einer Seite konzentriert.

Sie können Inhalte leicht genug duplizieren, aber die Blöcke selbst sind nicht verknüpft und ändern sich nicht alle, wenn Sie einen bearbeiten.

Erfahren Sie mehr: Landing Page Design: 10 inspirierende Landing Pages mit hoher Conversion-Rate

Geschichte Gutenbergs

Gutenberg ist der aktuelle Editor von WordPress.

Ursprünglich im Jahr 2018 eingeführt, hat es sich seitdem zu einem ausgereifteren System entwickelt, das eine schnelle und leistungsstarke Bearbeitung von Webseiten und Blog-Posts ermöglicht.

Es ist immer noch nicht fertig, weil die Entwickler es für die vollständige Website-Bearbeitung verwenden möchten, aber es hat jetzt deutlich mehr Funktionen als beim Start.

Gutenberg existiert, weil viele WordPress-Benutzer eine sauberere und einfachere Möglichkeit zum Bloggen haben wollten, ohne Code bearbeiten zu müssen, damit alles gut aussieht.

Hier ist es wichtig zu verstehen, dass WordPress viele Gelegenheitsnutzer anzieht, von denen viele wenig Programmierkenntnisse haben.

Dies ist eine scharfe Differenz aus den frühen Jahren des Internets , wenn Sie nicht einmal eine Website haben würden , wenn Sie relativ Wissen vorgedrungen Codierung für die Zeit. Mit anderen Worten, WordPress möchte den Gelegenheitsmarkt unterstützen, wo Click-and-Drag-Prozesse sinnvoller sind.

Eine zweite Überlegung für Gutenberg ist, wie und wo die Leute bloggen.

Einige Website-Besitzer verwenden Text-to-Speech-Systeme, anstatt Dinge manuell zu schreiben, während ein Drag-and-Drop-Bearbeitungssystem das Erstellen von Websites auf Smartphones, Tablets und anderen Geräten viel einfacher macht.

Einige Leute bevorzugen jedoch immer noch das alte Bearbeitungssystem. Das ist keine Überraschung, denn es bietet immer noch viel mehr Kontrolle und Unterstützung für Benutzer, die in der Lage sind, seinen Code zu verwalten.

Gutenberg ist ein leistungsstarker Editor , der jedoch einige Dinge einschränkt, die Benutzer tun können. Nichts ist so flexibel wie reines Codieren, aber Gutenberg ist für die meisten Anforderungen schneller und einfacher.

Weitere Informationen: Conversion-Rate-Optimierung: Der vollständige Leitfaden

Umschalten zwischen klassischem und Block-Editor

WordPress weiß, dass Flexibilität normalerweise besser ist, als alle dazu zu zwingen, ein System zu verwenden, und deshalb können Sie zwischen seinen klassischen und Blockbearbeitungssystemen wechseln.

In den meisten Fällen müssen Sie Site-Administrator sein, um zwischen Bearbeitungsansichten zu wechseln.

Sobald Sie sich jedoch mit dem richtigen Konto angemeldet haben, können Sie den Editor auf jeder Seite ändern, wenn Sie ihn ändern, indem Sie auf die Schaltfläche oben auf dem Bildschirm klicken.

Dies ist alles, was die meisten Benutzer wissen müssen, aber Sie können die Dinge weiter anpassen.

Mit vielen WordPress-Plugins können Sie Seiten mit einer Drag-and-Drop-Oberfläche wie Gutenberg erstellen, die Sie jedoch möglicherweise bevorzugen. Sie bieten normalerweise auch Bearbeitungsoptionen, die Gutenberg nicht bietet.

Plugins wie der Divi-Builder, SeedProd und das beliebte, einfach zu bedienende Elementor bieten Bearbeitungssysteme, die über die von Gutenberg bereitgestellten Blöcke hinausgehen.

Diese Plugins enthalten normalerweise Tools zur Größenänderung, mehrteilige Komponenten und erweiterte Vorlagen, die den Prozess zum Erstellen von Seiten weiter reduzieren.

Externe Plugins sind hilfreich für Nicht-Blog-Seiten, bei denen Gutenberg oft ein wenig abfällt. Es kann viele dieser Seiten bearbeiten, aber noch nicht mit der gleichen Flexibilität wie andere Systeme.

Erfahren Sie mehr: Customer Journey Map: Best Practices + fertige Vorlagen

So deaktivieren Sie Gutenberg

Können Sie Gutenberg für bestimmte Benutzer deaktivieren? Kann es komplett deaktiviert werden?

Die Antwort auf beide ist ja. Es gibt mehrere Möglichkeiten, Gutenberg zu deaktivieren, wenn Sie es nicht auf Ihrer Site verwenden möchten.

Deaktivieren Sie Gutenberg durch die Installation eines Plugins

Die erste Methode und für die meisten Benutzer die beste ist die Verwendung des Classic Editor-Plugins. Dies ist ein offizielles Plugin des WordPress-Teams mit buchstäblich Millionen aktiver Installationen auf Websites.

Der klassische Editor ermöglicht es Ihnen, den Standardeditor für jeden Benutzer festzulegen, ermöglicht Benutzern die Auswahl eines Editors und bietet mehrere zusätzliche Funktionen, um die Arbeit zu vereinfachen.

Dies deaktiviert Gutenberg nicht technisch, sondern versteckt es, aber das praktische Ergebnis ist das gleiche. Oder anders gesagt, es ist ratsam, den Classic Editor zu installieren, da Sie damit jeden beliebigen Editor verwenden können, und das ist einfach besser, als die ganze Zeit bei einem Editor festzusitzen.

Eine Community-basierte Alternative verwendet das Disable Gutenberg-Plugin, das nicht so beliebt ist wie der Classic Editor, aber nicht auf offiziellen Support angewiesen ist.

Dies ist eine einfache und praktische Möglichkeit, Gutenberg vollständig zu deaktivieren oder es für bestimmte Seiten, Beitragstypen, Rollen oder Themen auf einer Website zu deaktivieren.

Um eines der Plugins zu installieren, sind die Schritte einfach:

1. Melden Sie sich bei Ihrer WordPress-Benutzeroberfläche an
2. Wählen Sie links „Plugins“ aus.
3. Wählen Sie auf dem erweiterten Plugins-Bildschirm "Neu"
4. Geben Sie im Suchfeld oben den Namen des gewünschten Plugins ein
5. Wählen Sie aus den Ergebnissen das gewünschte Plugin aus und klicken Sie auf die Schaltfläche "Jetzt installieren".
6. Klicken Sie nach Abschluss auf "Plugin aktivieren".

Deaktivieren Sie Gutenberg durch Bearbeiten vonfunctions.php

Schließlich können Sie die Datei functions.php auf Ihrer Site ändern, um Dinge direkt zu deaktivieren.

Dies kann jedoch dazu führen, dass Ihre Website beschädigt wird, wenn Sie es falsch machen. Daher empfehlen wir dies nicht für Gelegenheitsnutzer. Die Installation eines der oben aufgeführten Plugins ist sowohl einfacher als auch leicht umkehrbar.

Wenn Sie Gutenberg ohne Plugin deaktivieren möchten und ein Anfänger im WordPress-Code sind, können Sie diese Schritte ausführen. Diese Methode deaktiviert sie für alle Benutzer.

1. Melden Sie sich bei Ihrer WordPress-Benutzeroberfläche an (Sie müssen ein Administrator sein)
2. Suchen Sie in der linken Seitenleiste nach "Auftritte" und fahren Sie mit der Maus darüber
3. Wählen Sie 'Theme-Editor'
4. Wählen Sie in der Liste der Dateien rechts 'functions.php'
5. Machen Sie vorher eine Kopie Ihrer Datei functions.php als Backup, damit Sie sie wiederherstellen können, wenn etwas seitwärts geht
6. Wenn der Editor erscheint, kopieren Sie Folgendes genau und fügen Sie es in die Datei ein: add_filter( 'use_block_editor_for_post', '__return_false');
7. Klicken Sie unten auf die Schaltfläche Datei aktualisieren

Erfahren Sie mehr: Heatmap erklärt + Wie Sie eine Website-Heatmap erstellen

Gängige Arten von WordPress-Blöcken

Hier sind die gängigsten Arten von Blöcken, die im grundlegenden WordPress-Editor verfügbar sind.

Vor Gutenberg haben die meisten Leute diese Blöcke direkt oder mit den Text- und Bildformatierungswerkzeugen des Rich-Text-Editors codiert und den Code nach Bedarf neu angeordnet, um das Layout auf der Seite anzupassen.

Absatz

Dies ist der Block, den die meisten Leute am häufigsten verwenden. Wie der Name schon sagt, konzentriert es sich auf schriftliche Inhalte.

Der Texteditor wandelt jeden Absatz in einen Block um, sodass Sie ihn nach dem Schreiben verschieben und neu anordnen können.

Bild

Bildeinbettungsblöcke enthalten einzelne Grafiken, die Sie auf der Seite verschieben können.

Diese bieten verschiedene Ausrichtungsoptionen, einschließlich der Größenänderung des Bildes oder sogar der vollen Breite, die über die übliche Grenze eines Themas hinausgeht.

Die Absatz- und Bildblöcke zusammen reichen aus, um eine grundlegende Webseite zu erstellen, sodass alles andere letztendlich nur dazu dient, diese Elemente zu wiederholen und zu verbessern, wobei die grundlegenden Prinzipien der visuellen Hierarchie befolgt werden.

Überschriften

Überschriftenblöcke enthalten übergroße Texte, um die Seite in Abschnitte aufzuteilen und den Benutzern das Auffinden von Inhalten zu erleichtern. Mit dem Editor können Sie Überschriftengrößen, Formatierungen, Hyperlinks und andere Elemente nach Bedarf anpassen.

WordPress unterstützt bis zu 6 Überschriftenebenen, einschließlich h1 für den Seitentitel, aber die meisten Leute gehen selten über h4 hinaus.

Galerie

Der Galerieblock ist eine erweiterte Version des grundlegenden Bildblocks und ermöglicht das Hinzufügen mehrerer Bilder in einem vordefinierten Layout.

Der aktuelle Editor unterstützt maximal acht Spalten für Bilder sowie Größenänderungs-, Verknüpfungs- und andere Formatierungsoptionen für die Seite.

Aufführen

Listenblöcke erstellten nummerierte oder Aufzählungslisten.

Dies ist im Wesentlichen nur eine Anwendung des Absatzblocks, aber die Aufteilung von Listen in ihre eigenen Komponenten erleichtert es, versehentliches Ändern der Formatierung zu vermeiden.

Zitieren

Zitatblöcke sind speziell formatierte Absatzblöcke, die dabei helfen, etwas besonders Wichtiges hervorzuheben.

Die meisten Leute verwenden diese für ein Zitat einer bestimmten Person, aber Sie können sie auch verwenden, um Kommentare abzugeben oder auf andere Weise wichtige Informationen hervorzuheben.

Audio

Audioblöcke sind auf Websites relativ selten, aber WordPress unterstützt sie immer noch.

Auf diese Weise können Sie alle Audiodateien hinzufügen, die Sie haben, einschließlich Funktionen wie das automatische Abspielen des Audios oder das Loopen.

Denken Sie daran, dass die meisten Benutzer Audio, das automatisch abgespielt wird, nicht mögen, es sei denn, sie möchten, dass dies geschieht. Versuchen Sie daher, Besucher nicht mit unerwarteten Geräuschen zu überraschen.

Abdeckung

Cover-Blöcke sind ein fortgeschritteneres Formatierungselement. Mit diesem Block können Sie ein Bild oder Video und manchmal auch Text auswählen, die Sie auf Ihrer Seite überlagern können.

Diese Medien können im Hintergrund schweben, sich wiederholen und auf andere Weise als sofortiger Aufmerksamkeitserreger dienen.

WordPress unterstützt keine oder vollständige Transparenz auf dem Overlay, empfiehlt jedoch eine moderate Menge, um sicherzustellen, dass Ihr Text leicht lesbar ist.

Datei

Mit Dateiblöcken können Sie direkte Links zu Dateien auf Ihrer Website bereitstellen, damit Besucher sie herunterladen können.

Sie können fast jede Art von Datei auf Ihre Site hochladen, aber Ihr Hosting-Provider hat möglicherweise Fragen, wenn Sie versuchen, etwas zu großes hochzuladen oder zu viele Downloads für Ihren Plan zu erhalten.

Dies ist ein gutes Beispiel für die Vernetzung der Webentwicklung.

Sie werden wahrscheinlich nicht an Grenzen stoßen, wenn Sie nur einfache Textdateien herunterladen lassen, sondern mit dem Host Ihrer Website sprechen, bevor Sie andere Dateien hinzufügen. Sie können Ihnen sagen, was in Ihrem Plan erlaubt ist, oder bei Bedarf Alternativen vorschlagen.

Video

Mit Videoblöcken können Sie Ihrer Site Multimedia-Inhalte hinzufügen, indem Sie diese direkt hochladen oder Inhalte auf einer anderen Site verlinken.

Videodateien sind in der Regel extrem groß, daher benötigen Sie normalerweise einen guten Hosting-Plan, wenn Sie die Dateien auf Ihrer Site haben möchten.

Externes Hosten, z. B. über YouTube und Verwendung von YouTube-Einbettung, ist wesentlich einfacher. Gutenberg konvertiert einige Videolinks automatisch in einen anderen Blocktyp.

So verwenden Sie WordPress-Blöcke

Es gibt mehrere Möglichkeiten, einen Block im Gutenberg-Editor hinzuzufügen. Sie können sie direkt über die obere Symbolleiste hinzufügen oder indem Sie auf die Schaltfläche zum Einfügen klicken.

Diese Schaltfläche sieht aus wie ein Kreis mit einem Pluszeichen und lässt Sie auf den Typ des hinzuzufügenden Blocks klicken.

Sobald sich die Blöcke auf der Seite befinden, können Sie sie nach oben und unten verschieben, indem Sie auf die Pfeile auf der linken Seite des Blocks klicken. Alternativ können Sie auf das Raster mit sechs Punkten klicken und die Maustaste gedrückt halten und dann den Block an die gewünschte Stelle ziehen.

Um Blöcke zu bearbeiten, klicken Sie einfach auf ihren Platz. Dadurch werden automatisch die Blockinformationen geöffnet und Sie können die Komponenten nach Bedarf anpassen.

Mit den gleichen Funktionen können Sie den Blocktyp ändern. Mit den Pfeilen im Bedienfeld können Sie Abschnitte des Editors erweitern oder schließen, während Sie mit der X-Schaltfläche den Blockeditor schließen und sich auf andere Dinge konzentrieren können.

Unterschied zwischen WordPress-Blöcken und Widgets

Blöcke sind in erster Linie Webseiteninhalte, einschließlich Text und Medien wie Bilder und Audio. Was ist also ein WordPress-Widget und wie unterscheidet es sich von einem Block?

WordPress-Widgets hingegen sind Inhalte, die Sie in spezielle Bereiche wie Seitenleisten und Fußzeilen einfügen können. Der Gutenberg-Editor vermeidet diese Bereiche meistens, obwohl Sie Widget-ähnliche Dinge in Ihren Hauptinhalt aufnehmen können, indem Sie Codeblöcke hinzufügen.

Die Blockoberfläche befindet sich normalerweise auf der rechten Seite des Bildschirms, wenn der Seiteneditor geöffnet ist. Der Widget-Editor ist über den Bereich Darstellung > Customizer und über das Admin-Menü verfügbar.

Widgets erscheinen normalerweise auf jeder Seite einer Website, sodass Sie sie nicht an derselben Stelle bearbeiten können, an der Sie Blöcke bearbeiten.

Erstellen wiederverwendbarer WordPress-Blockvorlagen

Mit WordPress können Sie wiederverwendbare Blockvorlagen erstellen.

Dies ist nützlich, um ein konsistentes Branding und Design auf Ihrer Website zu haben, ohne jedes Mal ein genaues Layout neu erstellen zu müssen. Dies ist besonders nützlich, wenn Sie Software wie Vectornator oder Adobe Illustrator verwenden, um erweiterte Vektorgrafiken und Layouts zu erstellen.

Das Erstellen der Vorlage selbst ist einfach. Sie müssen lediglich den Block auswählen, auf die drei Punkte in der angezeigten Symbolleiste klicken und dann auf Zu wiederverwendbaren Blöcken hinzufügen klicken.

Von dort aus können Sie sie in einen leicht zu merkenden Namen umbenennen und wieder an der Seite arbeiten.

Blockvorlagen vereinfachen Dinge wie Logos, benutzerdefinierte Schaltflächen, die in Grafikdesign-Software erstellt wurden, Designelemente und alles, was im Branding einer Website verwendet wird.

Die Vorlage ermöglicht es, das Element einfach überall hinzuzufügen, ohne dass ein bestimmtes Branding-Element oder Layout jedes Mal neu erstellt werden muss, wenn Sie es verwenden möchten.

Abschließende Gedanken zu WordPress-Blöcken

Obwohl WordPress-Blöcke nicht für jeden ideal sind, sind sie ein leistungsstarker Ausgangspunkt, um Seiten zu erstellen und Inhalte auf intuitive und benutzerfreundliche Weise anzuordnen.

Es reicht jedoch nicht aus, nur über Blöcke zu lesen, um sie zu beherrschen.

Gehen Sie stattdessen jetzt zu Ihrer WordPress-Site und spielen Sie auf einer Seite herum. Wenn Sie einige praktische Übungen machen, werden Sie in der Lage sein, ihre Verwendung zu beherrschen und erweiterte Layouts auf Ihrer Website zu erstellen.

Ähnlich wie beim Fahrradfahren sind WordPress-Blöcke schwer zu vergessen, wenn Sie sie einmal gelernt haben, und können Ihnen helfen, fast jedes Standardseitendesign zu erstellen.