Wie man verschachtelte Blöcke in WordPress verwendet: Ein Leitfaden für Anfänger

Der WordPress-Blockeditor, auch bekannt als Gutenberg, ermöglicht das einfache Gestalten von Seiten und Beiträgen ohne Programmierkenntnisse. Eine seiner leistungsstärksten Funktionen sind verschachtelte Blöcke. Dabei handelt es sich um Blöcke, die ineinander verschachtelt werden, um übersichtliche und flexible Layouts zu erstellen.

Wenn Sie jemals Schwierigkeiten hatten, Text, Bilder und Schaltflächen in einem Abschnitt auszurichten, können verschachtelte Blöcke das Problem lösen. Sie ermöglichen es Ihnen, Inhalte zu gruppieren und als Einheit zu verschieben.

Dieser Leitfaden führt Sie durch die Grundlagen, bietet Schritt-für-Schritt-Anleitungen, Tipps zur Anpassung und bewährte Methoden für die Verwendung verschachtelter Blöcke in WordPress.

Ein Überblick über Blöcke in WordPress

Der WordPress-Block-Editor funktioniert, indem er Ihre Inhalte in einzelne, übersichtliche Blöcke unterteilt. Jeder Block ist in sich abgeschlossen und verfügt über eigene Einstellungen, Stiloptionen und einzigartige Funktionen. Dank dieser Struktur können Sie Ihre Inhalte ganz einfach gestalten, organisieren und aktualisieren, ohne eine einzige Zeile Code bearbeiten zu müssen.

Ob Sie einen Blogbeitrag erstellen oder eine Landingpage gestalten, Sie können verschiedene Blocktypen kombinieren, um ein individuelles Layout zu erstellen. Sehen wir uns einige der gängigsten Blöcke an.

Absatzblock zum Hinzufügen von Textinhalten

Der Absatzblock ist der Standardblocktyp. Hier fügen Sie Ihren Hauptinhalt ein und formatieren ihn. Textausrichtung, Schriftgröße und Farbe können Sie direkt in den Blockeinstellungen anpassen.

Bildblock zur Anzeige von Grafiken

Der Bildblock ermöglicht es Ihnen, Bilder aus Ihrer Mediathek hochzuladen oder auszuwählen. Sie können Größe und Ausrichtung anpassen, Bildunterschriften hinzufügen und das Bild sogar mit einer anderen Seite oder URL verlinken.

Überschriftenblock zur Strukturierung Ihrer Inhalte

Verwenden Sie den Überschriftenblock, um Abschnittstitel und Unterüberschriften zu erstellen. Dies erleichtert nicht nur das Lesen Ihrer Inhalte, sondern verbessert auch die Suchmaschinenoptimierung (SEO) , indem Suchmaschinen eine klare Inhaltsstruktur erhalten.

Schaltflächenblock zur Steuerung von Benutzeraktionen

Der Button-Block eignet sich ideal für Handlungsaufforderungen wie „Mehr erfahren“ oder „Jetzt kaufen“. Sie können die Farben, den Text und die Links der Schaltflächen an den Stil Ihrer Website anpassen.

Listenblock zur Organisation von Informationen

Der Listenblock hilft Ihnen, Informationen in Stichpunkten oder nummerierten Listen darzustellen. Dadurch wird der Inhalt lesbarer und leichter verständlich.

Wenn Sie diese grundlegenden Blocktypen verstehen, schaffen Sie eine solide Basis für die Erstellung ansprechender und gut strukturierter WordPress-Seiten. Darauf aufbauend können Sie mit verschachtelten Blöcken experimentieren und Ihre Layouts weiter optimieren.

Was ist besser: WordPress-Blockeditor oder Page Builder?

Blockkategorien verstehen

In WordPress sind Blöcke nicht einfach nur verstreute Werkzeuge, sondern in Kategorien organisiert. Dadurch ist es einfacher, das Benötigte zu finden und den passenden Block für den jeweiligen Zweck auszuwählen.

Durch das Verständnis dieser Kategorien können Sie Ihre Layouts effizienter planen und ein einheitliches Design gewährleisten.

• Layoutblöcke zur Seitenstrukturierung: Layoutblöcke helfen Ihnen, Inhalte visuell anzuordnen. Beispiele hierfür sind Gruppen-, Spalten- und Abstandshalterblöcke. Sie bilden das Grundgerüst Ihres Designs und ermöglichen es Ihnen, Elemente exakt an der gewünschten Stelle zu positionieren.

• Inhaltsblöcke zur Darstellung Ihrer Informationen: In Inhaltsblöcken befindet sich Ihr Hauptinhalt. Dazu gehören Absatz-, Bild- und Videoblöcke. Sie enthalten Texte, Bilder und Medien, mit denen Besucher interagieren.

• Widget-Blöcke für zusätzliche Funktionen: Widget-Blöcke erweitern Ihre Seite um zusätzliche Funktionen. Beispiele hierfür sind Suche, Kalender und Neueste Beiträge. Sie erleichtern Besuchern die Navigation und Interaktion auf Ihrer Website.

Lerne: Was ist ein WordPress-Editor?

Was sind verschachtelte Blöcke?

In WordPress sind verschachtelte Blöcke Blöcke, die in einem anderen Block, dem sogenannten übergeordneten Block, platziert werden. Diese Struktur ermöglicht es, mehrere Elemente in einem einzigen Container zu kombinieren und so Layouts übersichtlicher und optisch ansprechender zu gestalten.

Durch das Verschachteln von Blöcken lassen sich Abschnitte erstellen, die sich leicht verschieben, gestalten und pflegen lassen.

Darum sollten Sie verschachtelte Blöcke verwenden:

• Um zusammengehörige Inhalte zusammenzuhalten und so eine logische Inhaltsstruktur zu gewährleisten.

• Um mehrere Elemente gleichzeitig zu verschieben und so Zeit beim Bearbeiten zu sparen.

• Um ein einheitliches Styling anzuwenden und Farben, Schriftarten oder Abstände für alle inneren Blöcke mit einer einzigen Anpassung zu ändern.

Beispiel: Gruppenblock mit mehreren Elementen

Ein Gruppenblock kann eine Überschrift, einen Absatz und eine Schaltfläche enthalten. Dadurch bleiben zusammengehörige Inhalte an einem Ort und es wird einfacher, gemeinsame Formatierungen wie Hintergrundfarbe oder Innenabstände anzuwenden.

Beispiel: Spaltenblock für nebeneinanderliegende Layouts

Mit einem Spaltenblock können Sie links ein Bild und rechts Text platzieren. Diese Vorgehensweise eignet sich perfekt für Feature-Bereiche, Kundenmeinungen oder Direktvergleiche.

Anleitung zumErstellen benutzerdefinierter Blöcke in WordPress

Wie man verschachtelte Blöcke in WordPress verwendet (Schritt für Schritt)

Die Verwendung verschachtelter Blöcke in WordPress mag zunächst kompliziert erscheinen, ist aber ganz einfach, sobald man die einzelnen Schritte verstanden hat. Ziel ist es, kleinere Blöcke in einem übergeordneten Block zu platzieren, um ein strukturiertes und flexibles Layout zu erstellen. Folgen Sie diesen Schritten, um loszulegen.

Schritt 1: Öffnen Sie den Blockeditor

Öffnen Sie zunächst die Seite oder den Beitrag, an dem Sie arbeiten möchten. Klicken Sie im Editor auf die Schaltfläche „+“, um einen neuen Block hinzuzufügen. Hier fügen Sie Ihren übergeordneten Block ein.

Schritt 2: Einen übergeordneten Block hinzufügen

Wählen Sie als Nächstes einen Gruppen- oder Spaltenblock aus. Dies sind die am häufigsten verwendeten übergeordneten Blöcke zum Verschachteln. Sie fungieren als Container, die Ihre inneren Blöcke zusammenhalten.

Schritt 3: Innere Blöcke einsetzen

Klicken Sie im übergeordneten Block erneut auf die Schaltfläche „+“. Nun können Sie beliebige Blocktypen wie Absätze, Bilder oder Schaltflächen hinzufügen, um Ihre Inhalte zu erstellen.

Schritt 4: Innere Blöcke neu anordnen

Um die Reihenfolge anzupassen, verwenden Sie den Ziehpunkt oder die Auf-/Ab-Pfeile in der Block-Werkzeugleiste. So können Sie Ihr Layout schnell neu anordnen, ohne von vorn beginnen zu müssen.

Schritt 5: Stile anpassen

Wählen Sie abschließend den übergeordneten Block aus, auf den Sie die Formatierung anwenden möchten. Ändern Sie nach Bedarf die Hintergrundfarbe, die Textfarbe, den Zeilenabstand oder die Rahmen. Alle Änderungen werden automatisch auf die inneren Blöcke angewendet, um ein einheitliches Design zu gewährleisten.

Die Stärke verschachtelter Blöcke liegt in ihrer Anpassungsfähigkeit. Sie können:

• Weisen Sie allen inneren Elementen einen gemeinsamen Hintergrund zu.
• Passen Sie Innen- und Außenabstände für eine bessere Abstände an.
• Fügen Sie benutzerdefinierte CSS-Klassen für erweitertes Styling hinzu.
• Anpassung des responsiven Verhaltens an mobile Bildschirme.

Tipp: Überprüfen Sie immer, wie verschachtelte Blöcke auf Mobilgeräten aussehen, indem Sie im Editor zur mobilen Vorschau wechseln.

Mit diesen Schritten erstellen Sie verschachtelte Blocklayouts, die optisch ansprechend, leicht zu bearbeiten und ideal für responsives Design. Sobald Sie diese Grundlagen beherrschen, können Sie fortgeschrittenere Anpassungstechniken erkunden.

Wie konfiguriert man die Einstellungen für verschachtelte Blöcke in WordPress?

Sobald Sie Ihre verschachtelten Blöcke erstellt haben, können Sie diese für ein eleganteres und einheitlicheres Design feinabstimmen.

WordPress bietet verschiedene Einstellungen, mit denen Sie das Aussehen und die Funktionalität von übergeordneten und untergeordneten Blöcken steuern können. Durch die Anpassung dieser Optionen können Sie ein einheitliches Erscheinungsbild Ihrer gesamten Website gewährleisten.

• Wählen Sie den übergeordneten Block für globale Änderungen aus: Um Änderungen vorzunehmen, die alle darin enthaltenen Blöcke gleichzeitig betreffen, wählen Sie zuerst den übergeordneten Block aus. Hier können Sie Hintergrundfarben, Abstände, Ausrichtung und andere Stileinstellungen anpassen, die für alle darin enthaltenen Blöcke gelten.

• Erweiterte Einstellungen für benutzerdefiniertes CSS: Wenn Sie mehr Kontrolle benötigen, öffnen Sie das Bedienfeld „Erweiterte Einstellungen“. Hier können Sie Ihrem Block benutzerdefinierte CSS-Klassen zuweisen. Dadurch können Sie Ihre Inhalte über die Standardoptionen des Editors hinaus gestalten.

• Entdecken Sie Blockstile für schnelle Designanpassungen: WordPress bietet Blockstile – vordefinierte Designvarianten. Diese verändern das Aussehen Ihrer Blöcke im Handumdrehen, ohne dass manuelle Anpassungen erforderlich sind, und erleichtern so das Testen verschiedener visueller Optionen.

Durch die Konfiguration dieser Einstellungen wird sichergestellt, dass Ihre verschachtelten Blöcke nicht nur funktional, sondern auch optisch auf Ihrer gesamten Website einheitlich sind.

Entdecken: Die besten WordPress-Block-Themes

Schritte zum Erstellen komplexer Layouts mit verschachtelten Blöcken

Verschachtelte Blöcke sind eine leistungsstarke Methode, um professionelle, mehrteilige Layouts ohne Programmierung zu erstellen.

Durch die Kombination verschiedener Blocktypen innerhalb eines übergeordneten Blocks lassen sich Seiten gestalten, die professionell aussehen und gleichzeitig einfach zu bearbeiten sind. Sie eignen sich besonders gut für mehrspaltige Layouts, Hero-Bereiche und Funktionslisten.

Schritt 1: Einen Spaltenblock hinzufügen

Fügen Sie zunächst einen Spaltenblock in Ihre Seite ein. in diesem Beispieldie dreispaltige Layoutoption. Dieser dient als Hauptcontainer für Ihren Feature-Bereich.

Schritt 2: Inhalt in jede Spalte einfügen

Fügen Sie in jeder Spalte oben einen Bildblock für visuelle Elemente ein. Platzieren Sie unter dem Bild einen Überschriftenblock für den Titel des Beitrags, gefolgt von einem Absatzblock zur Beschreibung. Dadurch entsteht eine einheitliche Struktur in allen Spalten.

Schritt 3: Den übergeordneten Block formatieren

Wählen Sie den Spaltenblock (übergeordneter Block) aus und passen Sie Abstand, Hintergrundfarbe und Ausrichtung an, um ein einheitliches Erscheinungsbild zu erzielen. Sie können auch Innenabstände hinzufügen, um Ihren Inhalten mehr Raum zu geben.

Mit dieser Methode lassen sich ansprechende, gut strukturierte Layouts erstellen, die sowohl die Benutzerfreundlichkeit als auch das Design verbessern.

Lesen Sie auch: Wie man Blöcke mit Bento in WordPress erstellt

Wie verwendet man Blöcke innerhalb anderer Blöcke?

Während Gruppen- und Spaltenblöcke die gängigsten übergeordneten Blöcke in WordPress sind, gibt es zahlreiche weitere Blöcke, die ebenfalls Verschachtelungen ermöglichen. Mit diesen speziellen Blöcken können Sie mehrere Elemente auf kreative Weise kombinieren und so Ihre Seitengestaltung flexibler gestalten.

• Cover-Block: Text oder Schaltflächen über einem Bild: Mit dem Cover-Block können Sie Text, Überschriften oder Schaltflächen über einem Hintergrundbild oder einer Hintergrundfarbe platzieren. Dies ist ideal für Hero-Banner oder Abschnittsüberschriften, die eine starke visuelle Wirkung erzielen sollen. Sie können die Deckkraft der Überlagerung für eine bessere Lesbarkeit anpassen.

• Medien- und Textblock: Inhalt nebeneinander: Der Medien- und Textblock eignet sich für Layouts, in denen ein Bild oder Video neben einem Textblock angezeigt wird. Sie können die Seite auswählen, auf der die Medien erscheinen sollen. Dadurch ist er ideal für Produktbeschreibungen oder Service-Highlights.

• Schaltflächenblock: Mehrere Links nebeneinander: Mit dem Schaltflächenblock können Sie zwei oder mehr Schaltflächenlinks nebeneinander einfügen. Dies ist nützlich, um mehrere Handlungsaufforderungen in einem Abschnitt bereitzustellen, z. B. „Anmelden“ und „Mehr erfahren“.

Die Verwendung dieser Blocktypen erweitert Ihre Gestaltungsmöglichkeiten und ermöglicht es Ihnen, Elemente auf optisch ansprechende Weise zu verschachteln und zu kombinieren.

Mehr erfahren: Was sind WordPress-Blockmuster?

Tipps zum Beherrschen verschachtelter Blöcke in WordPress

Verschachtelte Blöcke können Ihre WordPress-Layouts von einfach zu professionell aufwerten. Sobald Sie mit dem Hinzufügen und Anpassen vertraut sind, können Sie fortgeschrittene Techniken, Best Practices und Plugin-Erweiterungen erkunden, um noch ansprechendere Designs zu erstellen. 

Wenn Sie diese Tipps beherrschen, sparen Sie Zeit, arbeiten konsistent und schöpfen das volle Potenzial des Blockeditors aus.

Fortgeschrittene Techniken mit verschachtelten Blöcken

Nachdem Sie die Grundlagen erlernt haben, können Sie verschachtelte Blöcke mithilfe fortgeschrittener Layoutstrategien weiter optimieren. Zum Beispiel:

• Mehrstufige Verschachtelung: Für stark strukturierte Abschnitte platzieren Sie verschachtelte Blöcke innerhalb anderer verschachtelter Blöcke. Beispielsweise könnten Sie einen Gruppenblock erstellen, der mehrere Spaltenblöcke enthält, von denen jeder seinen eigenen Inhalt hat.

• Wiederverwendbare Blöcke: Wandeln Sie häufig verwendete, verschachtelte Layouts in wiederverwendbare Blöcke um, um sie auf mehreren Seiten einzufügen. Dies ist besonders hilfreich für Elemente wie Kundenstimmen, Preistabellen oder Handlungsaufforderungen.

• Benutzerdefiniertes CSS-Styling: Fügen Sie Ihrem übergeordneten Block benutzerdefinierte Klassen hinzu und schreiben Sie CSS-Regeln, um Abstände, Farben oder Animationen genauer zu steuern.

Mithilfe dieser Techniken können Sie Layouts erstellen, die sowohl optisch einzigartig als auch einfach auf Ihrer gesamten Website zu verwalten sind.

Anfängerleitfaden: Vollständige Bearbeitung einer WordPress-Website

Inhaltserstellung mit verschachtelten Blöcken

Verschachtelte Blöcke dienen nicht nur dem Design, sondern sorgen auch für eine übersichtlichere und effizientere Inhaltserstellung. So funktioniert es:

• Zusammengehörige Inhalte gruppieren: Überschriften, Text und Bilder eines Abschnitts sollten zusammenbleiben, damit sie beim Verschieben ausgerichtet bleiben.

• Wiederverwendbare Layouts für Inhaltstypen: Um die Konsistenz zu wahren, verwenden Sie für alle Blogbeitragseinleitungen oder Dienstleistungsbeschreibungen die gleiche verschachtelte Blockstruktur.

• Schnellere Aktualisierungen: Wenn sich Inhalte ändern, können Sie einen übergeordneten Block bearbeiten und die Aktualisierungen sofort auf alle inneren Blöcke anwenden.

Mit diesen Methoden können Sie schnell professionell aussehende Inhaltslayouts erstellen, ohne Abschnitte von Grund auf neu aufbauen zu müssen.

Siehe auch: So blenden Sie Blockinhalte in WordPress aus oder ein.

Block-Plugins und Entwicklung

Wenn Sie über die Standardoptionen hinausgehen möchten, sollten Sie die Verwendung von WordPress-Block-Plugins. Viele Plugins erweitern die Layout- und Styling-Möglichkeiten für verschachtelte Blöcke:

• Kadence Blocks bietet fortschrittliche Zeilenlayouts, benutzerdefinierte Abstände und reaktionsschnelle Steuerelemente.

• GenerateBlocks sind leichtgewichtig und ideal für den Aufbau hochgradig anpassbarer, verschachtelter Layouts.

• Stackable enthält vorgefertigte Blockmuster, die verschachtelte Strukturen verwenden.

Für Entwickler bietet WordPress die Block-API und die InnerBlocks-Komponente zur Erstellung benutzerdefinierter Blocktypen. Damit lassen sich einzigartige Kombinationen aus übergeordneten und untergeordneten Blöcken erstellen, als Plugins verpacken und in verschiedenen Projekten wiederverwenden.

Egal ob Sie vorgefertigte Plugins verwenden oder Ihre eigenen entwickeln, diese Tools können Ihre Designflexibilität erheblich erweitern.

Lesen Sie auch: Wie man Wireframes für WordPress-Websites erstellt

Bewährte Vorgehensweisen für die Verwendung verschachtelter Blöcke

Obwohl verschachtelte Blöcke leistungsstark sind, ist es wichtig, sie strategisch einzusetzen. Befolgen Sie diese Best Practices, um Ihre Layouts übersichtlich und handhabbar zu halten:

• Einfachheit ist Trumpf: Vermeiden Sie unnötige Verschachtelungen, da zu viele Ebenen die Bearbeitung verlangsamen und unübersichtlich machen können.

• Planen Sie Ihr Layout: Skizzieren Sie Ihr Schnittlayout, bevor Sie es im Editor erstellen. Dadurch reduzieren Sie den Bedarf an größeren Umstrukturierungen später.

• Für Einheitlichkeit sorgen: Verwenden Sie für ähnliche Abschnitte einheitliche Abstände, Ränder und Farbschemata, um ein stimmiges Design zu erzielen.

• Reaktionsfähigkeit testen: Überprüfen Sie Ihre verschachtelten Blöcke immer in der Vorschau auf Mobilgeräten und Tablets, um sicherzustellen, dass sie sich gut an kleinere Bildschirme anpassen.

• Setzen Sie übergeordnete Stile mit Bedacht ein: Nehmen Sie Änderungen nach Möglichkeit auf Ebene des übergeordneten Blocks vor, um sicherzustellen, dass alle inneren Blöcke dem gewünschten Stil entsprechen.

Wenn Sie diese Tipps befolgen, können Sie sicherstellen, dass Ihre verschachtelten Blöcke funktional, optisch ansprechend und benutzerfreundlich bleiben.

Ultimativer Leitfaden: Elementor-zu-Gutenberg-Konvertierung

Zusammenfassung

Verschachtelte Blöcke in WordPress ermöglichen es Anfängern, professionelle und flexible Layouts ohne Programmierkenntnisse zu erstellen. Durch das Verständnis von übergeordneten und untergeordneten Blöcken, den effektiven Einsatz von Gruppen und Spalten sowie die Anpassung von Stilen lassen sich optisch ansprechende und pflegeleichte Seiten gestalten.

Egal ob Sie ein Blogbeitrags-Layout oder eine komplette Landingpage erstellen, mit verschachtelten Blöcken können Sie Inhalte übersichtlich organisieren, ein einheitliches Design anwenden und in Zukunft schnell Aktualisierungen vornehmen. 

Fangen Sie also noch heute an zu experimentieren, und Sie werden feststellen, dass sie zu den nützlichsten Werkzeugen im WordPress-Block-Editor gehören.

Häufig gestellte Fragen zu verschachtelten Blöcken in WordPress