WordPress Gutenberg Editor: Bessere Ansicht der Blöcke

Plugin Editor Block Outline

Aber Word­Press wäre nicht Word­Press, wenn es nicht tolles Plu­g­in für diesen Umstand gibt. Das Plu­g­in Edi­tor Block Out­line ist sim­pel und belastet das Sys­tem sehr ger­ing.

Installation

Ihr geht in eurem Word­Press im linken Menü auf Plu­g­ins und im Unter­menü auf Instal­lieren.

Dort gebt ihr im Such­feld Edi­tor Block Out­line ein und wartet kurz. Dann wird euch das Plu­g­in angezeigt und klickt auf Jet­zt instal­lieren .

Einstellung

Um das Plu­g­in einzustellen, müsst ihr ger­ade eine Seite, einen Post oder einen Cus­tom Post Type bear­beit­en.

Sollte auf der recht­en Seite nicht in der Favoriten­leiste das Sym­bol angezeigt wer­den,

was wie eine Raute aussieht, klickt ihr auf die drei Punk­te.

Danach wählt in Plu­g­in-Auflis­tung Guten­berg Out­lines aus. Dann kön­nen die ver­schiede­nen Optio­nen ein­stellen:

When to show block outline?

Stan­dard ist Hov­er, wo die Umran­dun­gen bei aktiv­en Auswahl mit der Maus oder dem drüber­schweben angezeigt wird. Mit Always dauer­haft ein- und mit Dis­able aus­ge­blendet.

Show block name

Das zeigt euch in der Umran­dung den Namen des Ele­ments an.

Outline color

Die Far­bauswahl der Umran­dung.

Outline style

Für den Rand ste­hen 3 Möglichkeit­en zur Auswahl: Durchgezogen(Einfarbig), gestrichelt(dashed) und gepunktet(Dotted).

Outline opacity

Damit kann eine Trans­parenz für die Umran­dung gestellt wer­den.

Im Einsatz

Nun seht ihr immer wo welch­er Block liegt und hil­ft bei der Auswahl von bes­timmten Blöck­en, vor allem wenn sie sehr dicht nebeneinan­der liegen.

Kadence Theme und Blocks

Im Zusam­men­spiel mit dem Word­Press-Theme Kadence Theme und der Erweiterung Kadence Blocks funk­tion­iert das Plu­g­in ein­wand­frei und erle­ichtert euch das Arbeit­en enorm.

Mit den dieser Zusam­men­stel­lung habt ihr übri­gens ein voll­w­er­tige Page­build­ing-Sys­tem, wie Ele­men­tor oder Divi, jedoch ist es ein Leicht­gewicht. Genau­so überzeugt es bei den wichti­gen Rank­ing­w­erten Web Vitals von Google.

Quellen

• https://de.wordpress.org/gutenberg/
• https://wordpress.org/plugins/editor-block-outline/
• https://kadence-theme.com/*
• https://www.kadenceblocks.com/*

^{*Affil­i­ate-Links}

Seit 2000 beschäftige ich mich mit Webentwicklung und seit 2006 mit WordPress. Neben Webentwicklung und Wartung mache ich auch Schulungen in WordPress.
Ich optimiere Webseiten und Social Media Kanäle, so das Kunden und auch die Suchmaschinen zufrieden sind.

• Webentwicklung
• Update-Service für WordPress
• WordPress-Schulungen
• Social-Media Checkups
• Suchmaschinenoptimierung(SEO)