So verwenden Sie den WordPress-Blockeditor

In diesem Beitrag zeige ich dir, wie du den WordPress-Blockeditor verwendest, der seit 2018 in WordPress-Updates enthalten ist und bleiben wird. Sie werden es auch als Gutenberg-Editor hören.

Seit der Veröffentlichung von WordPress 5.0 gibt es im WordPress-Texteditor eine Option zum 'KONVERTIEREN IN BLOCKS', die Sie durch Klicken auf die drei vertikalen Punkte finden, wie unten gezeigt.

Sollten Sie in Blöcke konvertieren?

Wenn Sie einen WordPress-Texteditor eines Drittanbieters verwendet haben, kann es zu Komplikationen kommen. Diese behandle ich in diesem Beitrag nicht. Bitte informieren Sie sich bei einem Profi über das Umrüsten und gehen Sie sorgfältig vor.

Für alle anderen – ich übernehme keine Verantwortung – sichern Sie immer eine Website/ein Blog, bevor Sie eine Seite in Blöcke konvertieren.

Schon umgestellt? Überspringen Sie diesen Abschnitt.

Denjenigen unter euch, die den klassischen Editor verwendet haben und ein einfaches Seitenlayout haben – ich kann WordPress-Blöcke empfehlen.

Sobald Sie sich an den WordPress-Blockeditor gewöhnt haben, ist er intuitiv.

Wenn Sie auf IN BLOCKS KONVERTIEREN klicken, wird nicht die gesamte Website/das gesamte Blog in Blöcke umgewandelt. Nur die Seite oder der Beitrag, an dem Sie gerade arbeiten.

Was passiert, wenn ich in Blöcke umwandle?

Beim Konvertieren der Seite wird jede Überschrift, jeder Absatz, ein Code-Schnipsel und jedes Bild in einen eigenen individuellen Block übertragen.

Sie werden sich schnell daran gewöhnen, wenn Sie gerade erst umstellen.

Mit Blöcken können Sie ganz einfach Absätze, Spalten, Tabellen, Bilder, Widgets, neueste Beiträge und Kategorien hinzufügen.

Sowie Widgets wie neueste Beiträge, Kalender, Beitragsarchive, Kategorien, soziale Symbole und RSS-Feeds.

WordPress-Blöcke machen es einfach, fast alles hinzuzufügen, was sich ein Website-Besitzer wünschen kann. Es ist wirklich bequem.

Ein Block repräsentiert ein Element, daher ist es auch viel einfacher, die Seitenreihenfolge zu ändern. Wir werden das später behandeln.

Zeigen Sie die WordPress-Website in einem neuen Tab an

Beim Bearbeiten öffne ich als erstes den öffentlich zugänglichen Teil der Website in einem neuen Browser-Tab. Ich habe dann den Admin-Bereich (Backend) auf einem Tab sichtbar und den öffentlichen Bereich (Frontend) auf dem anderen. So kann ich zwischen den beiden wechseln.

Der einfachste Weg, das Frontend Ihrer WordPress-Website in einem neuen Tab zu öffnen, ist;

• Fahren Sie im Admin-Bereich mit der Maus über das Haussymbol oben links auf dem Bildschirm.
• Klicken Sie im Dropdown-Menü mit der rechten Maustaste auf "Site besuchen ".
• Klicken Sie auf „Link in neuem Tab öffnen“.

Achtung. Je nach verwendetem Browser kann es zu unterschiedlichen Wörtern kommen.

Es sind nun zwei Browser-Tabs geöffnet, sodass Sie zwischen den beiden wechseln können.

Bearbeiten Sie die WordPress-Seite weiterhin auf einer Registerkarte, indem Sie den Admin-Bereich verwenden.

Im anderen sehen Sie das Frontend Ihrer Website. So überprüfen Sie jede Änderung, die Sie vornehmen.

Wenn Sie Änderungen vornehmen und speichern, können Sie zum Frontend der Site wechseln. Drücken Sie die Taste F5, um die Seite zu aktualisieren – dies fordert den Browser auf, die aktualisierte Version anzuzeigen.

WordPress h1 Überschrift und Permalink

Schauen wir uns zuerst den Titel und den Permalink an.

Die Überschrift h1 ist der erste Block oben auf der Seite. Dies ist der einzige Block, der unbeweglich ist, und das aus gutem Grund.

Alle Seiten und Beiträge sollten ganz am Anfang eine h1-Überschrift haben, damit Suchmaschinen und Menschen verstehen, was auf der Seite enthalten ist. Es ist ein SEO-Faktor.

Verwenden Sie Ihre Maus, um in das Schriftfeld zu klicken. Um einen Titel zu ändern, markieren Sie den Titeltext und beginnen Sie mit der Eingabe. Einfach.

Das Permalink-Feld befindet sich in den Dokumenteinstellungen auf der rechten Seite, siehe Abbildung unten. Das WordPress-Label für den Seitennamen ist „URL Slug“.

Seien Sie vorsichtig beim Bearbeiten von Permalinks – ich habe am Ende dieses Beitrags eine Warnung eingefügt.

Einen WordPress-Block hinzufügen

Klicken Sie oben links auf das Plus + Symbol, um zu beginnen.

Entdecken Sie die Bausteinbibliothek – hier stehen Ihnen so viele Möglichkeiten zur Verfügung.

Es gibt zwei weitere Möglichkeiten, einen Block zu einer WordPress-Seite hinzuzufügen.

Wenn Sie sich in einem Creative-Flow befinden, fügen Sie einen Block hinzu, indem Sie die Eingabetaste drücken.

Die dritte Möglichkeit besteht darin, mit der Maus über einen Block zu fahren – ein Plus + Symbol erscheint.

Zum Zeitpunkt des Schreibens ist dies fummelig – fahren Sie mit der Maus über den genauen mittleren unteren Rand des Blocks, damit das Symbol angezeigt wird.

Klicken Sie auf das Symbol und wählen Sie einen Blockstil. Der neue Block wird unter dem Plussymbol angezeigt.

WordPress-Absätze mit Blöcken

Absatzblöcke sind oft die häufigsten Elemente einer WordPress-Seite oder eines Beitrags. Fügen Sie einen Absatzblock hinzu und beginnen Sie einfach mit der Eingabe.

Drücken Sie die Eingabetaste, um einen neuen Absatzblock zu erstellen und mit der Eingabe fortzufahren.

Um den Arbeitsablauf zu beschleunigen, können Absatzblöcke in andere Stile umgewandelt werden.

Geben Sie mit dem Cursor in einen neuen Absatzblock ein / (Schrägstrich) ein. Dies führt zu einer Liste möglicher Blocktypen.

Alternativ können Sie einen Block mithilfe der Symbolleiste transformieren. Auf einem ausgewählten Block erscheint die Symbolleiste oben links.

In der Symbolleiste für einen Absatz gibt es Optionen zum Ändern von "Blocktyp oder -stil" oder zum Formatieren von Text:

WordPress-Absatzblock umwandeln

Verwenden Sie die Schaltfläche "Blocktyp oder -stil ändern", um den Absatzblock zu transformieren. Die Transformation ist auf Blöcke ähnlicher Art beschränkt. Dh Absätze können nicht in Tabellen, aber in Überschriften umgewandelt werden.

Lassen Sie uns zum Beispiel einen Absatz in eine Kopfzeile umwandeln.

Der Pfeil in der Abbildung unten zeigt auf das Symbol, das einen ABSATZ darstellt. So wissen Sie, dass der Block ein Absatz ist.

Klicken Sie auf das Symbol, um den Absatz umzuwandeln.

Klicken Sie auf KURS.

Das Absatzsymbol ändert sich in ein H und daneben ist H2 zu sehen.

H1 kann nicht gewählt werden – H1 sollte immer nur für den Seitentitel verwendet werden.

Der Block ist jetzt ein Überschriftsblock.

Wählen Sie H3 oder H4, indem Sie die H2-Taste drücken und aus dem Menü auswählen.

Verwenden Sie Überschriften als Hierarchie innerhalb von Seiten und Beiträgen. Verwenden Sie H2, um die Seite in leicht lesbare Abschnitte zu unterteilen. Verwenden Sie H3, um diese zu unterteilen.

Absätze und Überschriften formatieren

Das Formatieren von Text bedeutet nur, ihm einen bestimmten Stil hinzuzufügen.

Markieren Sie in einer Überschrift oder einem Absatzblock den Text, den Sie formatieren möchten.

Die Symbolleiste erscheint auf magische Weise oben links im Block. Hier finden Sie Optionen, um Text fett oder kursiv zu formatieren oder einen Text-Hyperlink hinzuzufügen.

Es ist weiterhin möglich, Tastenkombinationen zu verwenden – markieren Sie Text und verwenden Sie:

• Strg-b für fett
• Control-i für Kursivschrift.
• Strg-u wird den Text unterstreichen.

Mac-Benutzer – verwenden Sie die Befehlstaste anstelle der Steuerungstaste.

Besuchen Sie WordPress-Tastaturkürzel für eine nützliche Liste.

Beachten Sie, dass es ein Pfeil nach unten auf der Symbolleiste ist; ein Dropdown-Menü für "mehr Rich-Text-Steuerelemente". Zwei weitere Stile sind hier zu finden – durchgestrichen und Textfarbe .

Seien Sie vorsichtig mit der Textfarbe – das Thema bestimmt das Aussehen der Website. Weniger Farben in einem Unternehmensschema lassen eine Website professionell aussehen. Verwenden Sie die Textfarbe sparsam.

In diesem Menü finden Sie auch 'Inline-Code' und ein 'Inline-Bild'.

Jedes „inline“ wird innerhalb der Textzeile positioniert, die Sie eingeben. Nützlich für Codeschnipsel und möglicherweise Symbole, aber größere Bilder würden meiner Meinung nach seltsam aussehen.

Absatzeinstellungen

Wählen Sie einen Absatzblock aus, um die Optionen auf der rechten Seite des WordPress-Bildschirms anzuzeigen.

Ändern Sie hier die Größe Ihres Textes.

Wirklich schön, wenn Sie einen Slogan haben, den Sie hervorheben möchten.

Es besteht auch die Möglichkeit, die Farbe ganzer Absätze zu ändern. Ich würde davor warnen, mit diesen Optionen zu verrückt zu werden.

Mehr Transformationsoptionen für Absätze

Andere Transformationsoptionen für den Absatzblock sind:

• eine Liste,
• ein vorformatierter Block,
• ein Zitat,
• ein Vers
• oder eine Gruppe.

Listen

Listen sind das Label von WordPress für Aufzählungspunkte – wirklich nützlich, um Elemente auf einer Webseite hervorzuheben. Es stehen zwei Arten von Listen zur Verfügung:

• Geordnete Liste (OL) – wahlweise geordnet nach römischen Ziffern, Dezimalzahlen oder Buchstaben.
• Ungeordnete Liste (UL) – gestylte Aufzählungspunkte.

Listen können wie Absätze formatiert werden. Es gibt auch eine Option zum Einrücken einer Liste, sodass Unterlisten innerhalb von Listen erstellt werden können.

Wir haben die Blöcke in WordPress noch nicht "vorformatiert" oder "verse" gesehen, daher werde ich ein wenig über diese Blocktypen erklären.

Vorformatierter Block in WordPress

Der vorformatierte Block ermöglicht es WordPress-Benutzern, Text genau so einzugeben, wie sie es möchten, wobei Zeilenumbrüche und Einzüge erhalten bleiben.

Mir ist im Moment nicht ganz klar, wofür das verwendet wird. Jemand klärt mich auf.

Geben Sie in einem leeren Absatzblock /preformatted ein und drücken Sie dann die Eingabetaste, um einen vorformatierten Block zu erstellen.

Oder verwenden Sie die Symbolleiste wie oben beschrieben.

Vers

WordPress sagt, dass der Versblock ideal ist, um Ihrer Website Poesie hinzuzufügen, die so treffend benannt ist.

Fortgeschrittenere Benutzer können CSS zu Versblöcken hinzufügen, so dass das Styling des Versblocks einfach ist.

 Rosen sind rot , 
Veilchen sind blau.

Schaltflächen im WordPress-Blockeditor

Der WordPress-Blockeditor ermöglicht es dem Editor, maßgeschneiderte Schaltflächen zu erstellen.

Es sind einfache Knöpfe mit begrenztem Stil, nichts besonders geniales an ihnen. Meiner Meinung nach hat WordPress die richtige Entscheidung getroffen – die Dinge sauber zu halten ist die bessere Option.

Um eine Schaltfläche hinzuzufügen, verwenden Sie das Symbol „Block hinzufügen“ und wählen Sie „Schaltfläche“.

Beginnen Sie sofort mit der Eingabe des Schaltflächentexts.

Nun besteht ein 'Tastenblock' aus zwei Teilen, die verwirrend sein können.

Eine Schaltfläche ist in einem externen Block enthalten. Klicken Sie auf die Schaltfläche und dann direkt außerhalb der Schaltfläche in den weißen Bereich, um zu sehen, was ich meine.

Verschieben oder ziehen Sie die Schaltfläche mithilfe des umgebenden Blocks. Die Schaltfläche kann darin ausgerichtet werden.

Klicken Sie auf die Schaltfläche und diese kann gestaltet werden – Farbe, Text, Rahmen. Hier würden Sie auch die Schaltfläche verlinken.

Sinn ergeben?

Wählen Sie die Schaltfläche aus – weitere Styling-Optionen sind auf der rechten Seite von WordPress verfügbar.

Dem Schaltflächentext kann wie einem Absatz ein Stil hinzugefügt werden. Seien Sie vorsichtig beim Verlinken des Textes.

Ich habe festgestellt, dass WordPress die Möglichkeit bietet, den TEXT der Schaltfläche (über die Schaltflächenleiste, genau wie ein Absatz) zu verlinken oder die gesamte Schaltfläche über die Optionen auf der rechten Seite zu verknüpfen. Etwas verwirrend.

Am besten verlinken Sie hier den gesamten Button.

Wählen Sie dazu die Schaltfläche aus, indem Sie darauf klicken, siehe die Blockoptionen auf der rechten Seite? Scrollen Sie ganz nach unten und fügen Sie Ihren Link in das Feld Link rel ein.

Ich rate davon ab, die Option 'Neuen Tab öffnen' zu aktivieren, da Suchmaschinen es vorziehen, dass der Benutzer die Entscheidung trifft, neue Tabs zu öffnen.

In der obigen Beispielschaltfläche habe ich ein Font Awesome-Symbol hinzugefügt, indem ich den HTML-Code von Font Awesome kopiert habe:

 <i class="fas fa-arrow-right"></i>

Um es in Ihre Schaltfläche aufzunehmen, wählen Sie die Schaltfläche aus, klicken Sie auf die 3 vertikalen Punkte am Ende der Symbolleiste und wählen Sie "Als HTML bearbeiten". Fügen Sie den HTML-Code vor dem schließenden Tag </a> ein.

Dieses Symbol ist nur verfügbar, wenn Font Awesome installiert ist.

Gruppen von Blöcken

Ein Gruppenblock ermöglicht es dem Editor, mehr als einen Block darin hinzuzufügen, sodass die Gruppe verschoben, dupliziert oder als Ganzes wiederverwendet werden kann.

Nützlich für Layouts. Oder um Überschriften und Absätze zusammenzuhalten, damit die Seite nicht durcheinander kommt.

Allerdings finde ich GRUPPEN etwas frustrierend, da sie einfach zu verschwinden scheinen! Ich glaube, das ist ein Fehler in WordPress.

Duplizieren eines WordPress-Blocks

Wenn Sie sich in einem Block befinden, verwenden Sie alternativ die Tastenkombination CONTROL-SHIFT-D (COMMAND-SHIFT-D auf einem Mac).

Wiederverwenden eines WordPress-Blocks

Eine weitere großartige Funktion von WordPress-Blöcken ist die Option WIEDERVERWENDBARER BLOCK.

Der Stil, den Sie für einen Block erstellt haben, kann gespeichert und erneut verwendet werden. Dies reduziert die Notwendigkeit, jedes Element auf der gesamten Site neu zu erstellen.

Klicken Sie auf einen beliebigen Block, um die Symbolleiste anzuzeigen, und klicken Sie dann auf die 3 vertikalen Punkte rechts. Hier finden Sie einen Menüpunkt mit der Bezeichnung ' Zu wiederverwendbaren Blöcken hinzufügen '.

Der gespeicherte wiederverwendbare Baustein befindet sich in der Bausteinbibliothek unter der Registerkarte 'Wiederverwendbar'. Suchen und fügen Sie ihn einfach wie jeden anderen Block hinzu. Praktisch.

Wiederverwendbare Blöcke können verwaltet werden, sodass Sie nicht zu viele überzählige in der Sammlung haben.

Achten Sie darauf, Ihre Arbeit zu speichern. Dann sehen Sie in jedem Beitrag oder jeder Seite oben auf dem Bildschirm die Schaltflächen VORSCHAU und AKTUALISIEREN sowie ein Zahnradsymbol.

Am Ende dieser Leiste finden Sie 3 vertikale Punkte. Klicken Sie darauf, um eine Liste anzuzeigen. Unten befindet sich die Option 'Alle wiederverwendbaren Blöcke verwalten'.

Verwalten Sie die wiederverwendbaren Blöcke ähnlich wie bei Beiträgen – klicken Sie auf die Namen, um sie zu bearbeiten.

Das Bearbeiten eines wiederverwendbaren Blocks ändert NICHT das Aussehen von Blöcken, die sich bereits auf der Site befinden.

So ziehen Sie einen WordPress-Block

Seit dem Update auf WordPress 5.5 ist die Drag-Option nicht mehr offensichtlich.

Sie müssen den Block auswählen und dann auf die Auf-Ab-Pfeile klicken und halten.

Wenn Sie den Block ziehen, werden Bereiche blau hervorgehoben, um anzuzeigen, wo der Block abgelegt wird, sobald die Maus losgelassen wird.

Ich hoffe, dies hilft Ihnen, WordPress mit dem WordPress-Blockeditor zu bearbeiten. Es gibt noch viel mehr zu behandeln, also siehe meine anderen Beiträge auf:

• So fügen Sie Bilder zu WordPress hinzu.
• Verlinken Sie ein Bild in WordPress.
• Überschriften und Absätze in WordPress.
• Hyperlink in WordPress.
• Formatierung in WordPress.
• So fügen Sie ein PDF zu WordPress hinzu (und verlinken es).

Viel zum Weitermachen! Lass mich wissen, wie es dir geht.