Gutenberg optimal nutzen – Überblick

Grundlagen für einen flüssigeren Workflow

Mit diesen “Workflow-Hebeln” geht die Arbeit mit Gutenberg schneller von der Hand.

Tastatur & Navigation

• / (Slash): Tippe im leeren Absatz /bild, /überschrift, /buttons etc., um häufig genutzte Blocks blitzschnell einzufügen.
• Enter / Shift+Enter: Neuer Block vs. Zeilenumbruch im gleichen Block.
• Block-Suche: Nutze die Block‑Suche statt scrollen – besonders hilfreich bei (vielen) Plugins mit zusätzlichen Blöcken.

Block-Toolbar vs. Seitenleiste verstehen

• Toolbar (oben am Block) = schnellste Formatierungen (Ausrichtung, Listen, Links).
• Seitenleiste (rechts) = Blockeinstellungen, Stile: Layout/Design (Abstände, Typo, Farben).

Layouts setzen

Mit Gutenberg kann man auch komplexe Layouts sauber umsetzen, wenn man die richtigen Blöcke dafür nutzt, durchaus auch verschachtelt. Darin liegt sogar die wahre Macht beim Layouten.

“Gruppe”, “Spalten”, “Zeile“ / “Stapel (Stack)”

• Gruppe: “Container” für Abschnitte (Hintergrundfarbe, Padding, Anker-ID), z.B. 100% breit mit Hintergrundfarbe und Paddings, Elemente Inhaltsbreite (siehe Layout-Beispiel am Ende dieses Abschnittsl)
• Spalten: Für echte Mehrspalten-Layouts (z. B. 2‑spaltige Features).
• Zeile/Stapel: Ideal für horizontale/vertikale Anordnung, z.B horizonal für Navigation und Suchfeld (Suche bleibt dann auch auf Mobiles sichtbar), Metadaten für Blogbeiträge (Autor, Absatz mit Trennzeichen, Datum…)

Baue Seiten in Abschnitten: Gruppe → (Überschrift + Inhalt + Buttons) und du kannst Abstände/Background konsistent steuern.

Eine Gruppe mit align „fullwidth“, die Überschrift und Bild in einer Sektion umschließt

Abstände richtig lösen (Padding/Margin statt Leerzeilen)

• Vermeide “Luft” über leere Absätze oder viele <br>. Auch Abstandhalter sind nicht erforderlich.
• Nutze stattdessen:
  • Block-Abstand / Block spacing (möglichst aus dem, was im Theme angeboten wird, nicht individuell)
  • Padding/Margin (im Gruppen- oder jeweiligen Block)
• In vielen Themes haben vordefinierte Abstände einen Range (kann auch für Schriftgrößen gelten), werden also auf kleinen Displays kleiner, dadurch passt die Darstellung auch auf Mobilgeräten.

Man kann Gruppen auch innerhalb anderer Elemente verwenden, z.b. in Spalten oder Grids. Mehrere Elemente (z.B. Absätze) lassen sich markieren, und mit einem Klick in der Blockleiste zu einer Gruppe zusammenfassen. Innerhalb der Gruppe lassen sich Abstände modifzieren. So können potentiell Abstände zwischen Elementen vergrößert, verkleinert oder sogar ganz aufgehoben werden.

Inhalte schneller und konsistenter erstellen

Hier geht’s um Wiederverwendbarkeit und „Style ohne Chaos“.

Wiederverwendbare Blöcke / Pattern

• Für wiederkehrende Elemente (CTA, Hinweisbox, Autorenbox):
  • Erstelle ein Pattern (Vorlage) oder wiederverwendbaren Block.
• Vorteil: Änderungen später an einer Stelle (sofern der wiederverwendbare Block synchronisiert wird) statt auf 20 Seiten.

Stil-Konsistenz: weniger “Inline-Formatierung”

• Setze Überschriften-Hierarchie sauber (H1 nur einmal, üblicherweise der Seitentitel,H2/H3/H4).
• Verwende Theme‑Stile (Typography/Colors), statt jeden Text manuell zu färben.
• Das ist auch SEO- und Accessibility-freundlicher und erleichtert etwaige spätere Redisigns und / oder Farbanpassungen.

Kleine Features, große Wirkung.

Listenansicht & Block-Hierarchie

• Öffne die Listenansicht (Outline/List View), um:
  • verschachtelte Gruppen/Spalten schnell zu finden,
  • Blöcke sauber zu verschieben,
  • für zielgenaue Navigation zum gewünschten Block

HTML als Debug-Tool (nicht als Dauerlösung)

• Nutze „Als HTML bearbeiten“ nur, um den Code zu analysieren und Probleme zu verstehen.
• Auf Blöcken basierende Inhalte direkt als HTML zu bearbeiten ist nicht vorgesehen und zerstört leicht mal die Seite.

Anker-Links für Sprungmarken

• Bei Überschriften oder Gruppen Anker setzen (z. B. #preise) – macht WordPress automatisch, behält aber eigene Modifikationen bei.
• Perfekt für Inhaltsverzeichnisse, FAQs, lange Landingpages.

Mobiles und Performance

Beim Layouten immer auch gleich die Handy-Ansicht testen und berücksichtigen. Mit ein wenig Tüfteln findet sich eine Struktur, die in allen Auflösungen gut aussieht.

Bilder richtig einsetzen

• Verwende passende Block‑Typen für Bilder:
  • Bild für einzelne Bilder
  • Galerie für Raster
  • Cover für Hero‑Bereiche (mit Overlay)
• Achte auf:
  • sinnvolle Bildgrößen (nicht 4000px fürs Web),
  • Alt‑Texte (Accessibility/SEO),
  • Effekte ggf. nicht übertreiben.

Buttons: lieber der Button-Block als “farbige Links”

• Der Buttons‑Block hält Abstände, Alignment und Hover‑Styles konsistent. Man muss nicht auf Buchstaben zielen, um einem Link zu folgen
• Für mehrere CTAs: Buttons‑Block mit zwei Buttons statt zwei separaten Elementen.

Die wichtigsten 5 Handgriffe zusammengefasst

• / zum Einfügen (schnellster Workflow-Booster)
• Gruppe als Abschnitt oder Cover (Background + Padding + Anker)
• Listenansicht (Ordnung bei komplexen Layouts)
• Patterns/Wiederverwendbar (Konsistenz und Zeitgewinn)
• Abstände über Layout-Controls statt Leerzeilen

Kleine Checkliste für Gutenberg-Seiten

• Überschriften: Titel (H1)/H2/H3 logisch
• Abstände: über Block-Einstellungen, nicht über Leerzeilen
• Wiederkehrendes als Pattern
• Mobile kurz gegenchecken (Preview)
• Bilder komprimiert + Alt-Texte gepflegt

Block Themes + Site Editor (FSE)

Damit kannst du jeden Winkel deiner Website mit Blöcken gestalten. Die enorme Macht der Blöcke liegt darin, deinen Layoutwünschen entsprechend die Stile zentral zu definieren und Patterns zusammensetzen statt jede Seite einzeln zu gestalten. Hier ist ein praxiserprobtes Set an Tipps.

Die gesamte Website mit Blöcken gestalten

1) Erst Stile definieren, dann das Layout setzen

• Gehe in Design → Editor → Stile und lege fest:
  • Farben/Palette
  • Typografie (Basis, Überschriften)
  • Button‑Stile
  • Standard-Abstände (wo dein Theme es erlaubt)
• Ergebnis: Du formatierst Inhalte später kaum noch manuell.

2) Baue in „Sektionen“

• Denke in wiederholbaren Abschnitten: Hero, Trust‑Logos, Features, CTA, FAQ, Footer‑CTA.
• Technisch: fast immer Gruppe als Section‑Container (mit Padding + Background).

Templates, Template Parts & Patterns richtig einsetzen

Templates vs. Template Parts

• Templates: Layout pro Inhaltstyp (z. B. Single, Page, Archive).
• Template Parts: Wiederverwendbare Bausteine (Header, Footer, ggf. Sidebar), zu finden unter „Vorlagen“, zusammen mit im Theme enthaltene oder selbst angelegten „Patterns“. Es kann erstmal etwas verwirrend sein, dass diese „Teile“ alle unter demselben Begriff zusammengefasst sind.

Best Practice:

• Header/Footer nur als Template Part pflegen.
• Seitenlayout (Breite, Inhaltsbereich, Sidebar‑Logik) im Template.

Patterns sind dein „Design-System to go“

• Speichere häufige Sektionen als Pattern (z. B. Feature‑Grid, Pricing, CTA).
• Achte auf:
  • sinnvolle Pattern‑Namen („CTA – dunkel – 2 Buttons“)
  • klare Varianten (hell/dunkel, 1/2/3 Spalten)

Globale Styles: die wichtigsten Stellschrauben

Damit wird das Erscheinungsbild mehrfach verwendeter Elemente einheitlich, ohne die bevorzugte Einstellungen jedes Mal wiederholen zu müssen.

Global Styles pro Block festlegen

In Stile kannst du blockweise definieren:

• wie alle deine Buttons aussehen: Radius, Padding, Font‑Weight, Hover (je nach Theme)
• Überschriften: Line-height, Letter spacing
• Liste / Absatz: Abstände, Schriftgröße
• Gruppe/Cover: Standard-Padding (manchmal themeabhängig)

Globale Stile werden sitewide angewendet und auch geändert, wenn man die globalen Stile ändert, sofern sie nicht direkt am einzelnen Element überschreiben wurden (also nicht mehr „default/Standard“ sind).

Layout & Responsiveness ohne Frust

FSE ist stark — wenn man „Spacing“ und „Breiten“ bewusst steuert.

Verwende „Block-Abstände“ statt Leerzeilen oder Abstandhalter

• Stelle Abstände in der Section (Gruppe) ein:
  • Padding für Innenabstand
  • Block spacing / Abstand zwischen Blöcken (wenn verfügbar)
• Vermeide Spacer‑Blöcke als Dauerlösung (allenfalls in Ausnahmen, nicht systematisch verwenden).

Breiten: Content, Wide, Full bewusst nutzen

• Content: normaler Lesefluss
• Wide: Akzent (z. B. große Bilder, Tabellen)
• Full: echte Sections (Hero, farbige Bänder)

Kombiniere zum Beispiel so:

• Gruppe = Full width (Hintergrund) und Paddings
• innen Elemente (auch Gruppen) mit Content width (Textbreite)

Spalten: „Stack“ auf Mobile bringt Spalten auf kleinen Displays auf volle Breite

• Viele Block-Themes stapeln Spalten mobil automatisch.
• Bevor Spalten umbrechen, werden sie jedoch erstmal enger, achte daher darauf:
  • nicht zu viele Spalten (ggf. lieber mit dem Rasterblock arbeiten)
  • Texte kurz und nicht zu große Überschriften
  • Buttons nicht umbrechen

Fortgeschritten: Query Loop, Filter, dynamische Inhalte

• Für Blog, Kategorien, Archive…
• Baue zum Beispiel ein gutes Karten‑Layout (Featured Image + Title + Excerpt + Meta), wie du es überall verwenden möchtest, sichere es dann als Pattern, und verwende es in allen Archiv-Templates. Änderungen am Erscheinungsbild werden automatisch in allen Archiven übernommen.

Kategorie/Tag-Templates (direkt im Site-Editor, kein phyisches Template erforderlich)

Eine bestimmte Kategorie über ein neues, automatisches Template hervorzuheben kann zu 100% virtuell erfolgen. Das zugeordnete Template wird bei Aufruf der Kategorie dann automatisch verwendet. Als Vorlage wird einem automatisch das hierarchisch nächstliegende Template (Category oder Archiv) angeboten, oder es kann auch ganz von vorne begonnen werden. Wenn man’s nicht mehr braucht, kann es aus der Template-Liste einfach wieder gelöscht werden, und das Standardtemplate für Kagegorien greift wieder.

Kurzübersicht: Wann nutze ich was?