Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Wie man verschachtelte Blöcke in WordPress auswählt und verwendet

Möchten Sie lernen, wie Sie verschachtelte Blöcke in WordPress auswählen und verwenden?

Die Gutenberg-Funktion für verschachtelte Blöcke ermöglicht es Ihnen, mehrere Blöcke innerhalb eines übergeordneten Blocks hinzuzufügen. So können Sie verschiedene Blockelemente gleichzeitig anpassen, den Inhalt von Beiträgen effizient organisieren und mehr Designflexibilität nutzen.

In diesem Artikel zeigen wir Ihnen, wie Sie WordPress-Schachtelblöcke einfach auswählen und verwenden können.

Select and use nested blocks in WordPress

Was sind WordPress Nested Blocks?

Mit der WordPress Gutenberg-Funktion für verschachtelte Blöcke können Sie einen oder mehrere Blöcke in einen anderen Block einfügen (oder „verschachteln“).

Mit verschachtelten Blöcken können Sie komplexere Layouts auf Ihrer WordPress-Website erstellen, indem Sie mehrere Blöcke ineinander einfügen. Dies ermöglicht eine größere Flexibilität bei der Gestaltung und Formatierung von Inhalten für Seiten und Beiträge.

Sie können zum Beispiel mehrere Bildblöcke in einem Gruppenblock verschachteln, um eine Reihe von Fotos von einem bestimmten Ereignis oder eine Reihe von Kunstwerken, die mit einer bestimmten Technik erstellt wurden, anzuzeigen.

Preview of WordPress nested blocks

Außerdem können Sie mit der Funktion für verschachtelte Blöcke einzelne Blöcke separat bearbeiten. Das bedeutet, dass Sie jeden Block an Ihre Bedürfnisse anpassen können, ohne die anderen Blöcke zu beeinflussen.

Dies wiederum führt zu einer besseren Organisation der Inhalte, macht Ihre Inhalte attraktiver und rationalisiert den kreativen Prozess.

Sehen wir uns also an, wie Sie die verschachtelten Blöcke von WordPress Gutenberg einfach auswählen und verwenden können.

Wie man die WordPress Nested Blocks verwendet

Mit dem Gruppen- oder Spaltenblock im Gutenberg-Block-Editor können Sie ganz einfach mehrere Blöcke miteinander verschachteln.

Zunächst müssen Sie einen bestehenden oder neuen Beitrag im Block-Editor in der WordPress-Admin-Seitenleiste öffnen.

Klicken Sie einfach auf die Schaltfläche „+“ in der oberen linken Ecke des Bildschirms und suchen Sie den Block „Gruppe“. Nachdem Sie darauf geklickt und ihn zur Seite hinzugefügt haben, müssen Sie ein Layout für die Blöcke auswählen, die Sie zusammenfügen möchten.

Für dieses Tutorial werden wir das Layout „Gruppe“ auswählen.

Select Group block from the block menu

Klicken Sie dann einfach auf die Schaltfläche „+“ auf dem Bildschirm, um mit dem Hinzufügen von Inhalten innerhalb des übergeordneten Blocks zu beginnen.

Für dieses Tutorial werden wir einen Bildblock hinzufügen.

Add an image block within the Group block

Nach dem Hinzufügen des Blocks klicken Sie einfach auf die Schaltfläche „Gruppieren“ in der Blocksymbolleiste oben, um den übergeordneten Block auszuwählen.

Als Nächstes müssen Sie auf die Schaltfläche „+“ klicken, um das Blockmenü erneut zu öffnen, aus dem Sie weitere Blöcke zum Hinzufügen auswählen können.

Open the block menu to add another block within the Group block

WordPress-Einstellungen für verschachtelte Blöcke konfigurieren

Wenn Sie mehrere Blöcke verschachtelt haben, können Sie deren individuelle Einstellungen konfigurieren, indem Sie auf jeden Block klicken. Dadurch öffnen sich die Blockeinstellungen in der rechten Spalte des Bildschirms.

Von hier aus können Sie die Hintergrundfarbe, die Textfarbe und die Größe der einzelnen Blöcke anpassen, ohne die anderen Blöcke, die darin verschachtelt sind, zu beeinflussen.

Configure the individual block settings

Um die Einstellungen aller verschachtelten Blöcke gemeinsam zu konfigurieren, müssen Sie auf die Schaltfläche „Gruppieren“ in der oberen Symbolleiste des Blocks klicken. Daraufhin werden die Einstellungen des übergeordneten Blocks in der rechten Spalte angezeigt.

Sie können nun die Ausrichtung, die Orientierung, die Hintergrundfarbe, die Textfarbe und die Typografie aller verschachtelten Blöcke konfigurieren.

Beachten Sie, dass sich diese Einstellungen auf alle Blöcke auswirken, die im übergeordneten Block verschachtelt sind.

Configure the settings of the Group block

Sie können auch einen vorhandenen einzelnen Block in verschachtelte Blöcke umwandeln, indem Sie auf die Schaltfläche „Optionen“ in der oberen Symbolleiste eines beliebigen Blocks klicken.

Daraufhin öffnet sich ein Menü, in dem Sie die Option „Vorlage erstellen“ auswählen müssen.

Create a pattern

Danach werden Sie aufgefordert, einen Namen zu vergeben und eine Kategorie für Ihren neuen wiederverwendbaren Block zu wählen.

Klicken Sie dann auf den Button „Erstellen“, um Ihre Einstellungen zu speichern.

Add a name for the pattern

Wenn Sie zufrieden sind, vergessen Sie nicht, auf die Schaltfläche „Veröffentlichen“ oder „Aktualisieren“ zu klicken, um Ihre Änderungen zu speichern.

In unserem Beispiel haben wir einen Titel-, Bild- und Absatzblock innerhalb eines Gruppenblocks verschachtelt.

So sehen die verschachtelten Blöcke auf unserer Demo-Website aus.

Preview of WordPress nested blocks

Bonus: Verwenden Sie das Wayfinder Plugin, um verschachtelte Blöcke einfach auszuwählen

Manchmal kann es schwierig sein, einen einzelnen Block auszuwählen und zu konfigurieren, wenn mehrere Blöcke miteinander verschachtelt sind.

Glücklicherweise macht es das Wayfinder-Plugin sehr einfach, verschachtelte Blöcke aus einem übergeordneten Block auszuwählen und zeigt Ihnen sogar den Typ und die Klasse der Blöcke an.

Zunächst müssen Sie das Wayfinder Plugin installieren und aktivieren. Weitere Anweisungen finden Sie in unserem Leitfaden für Anfänger zur Installation eines WordPress Plugins.

Rufen Sie nach der Aktivierung die Seite Einstellungen “ Wayfinder in der Seitenleiste des WordPress-Administrators auf.

Wenn Sie dort sind, sind alle Einstellungen bereits aktiviert. Sie müssen lediglich das Häkchen neben den Einstellungen, die Sie nicht verwenden möchten, entfernen.

Wenn Sie zum Beispiel möchten, dass Wayfinder die Blocktypen für alle Blöcke im Editor anzeigt, dann lassen Sie das Kästchen neben der Option „Blocktyp anzeigen“ aktiviert.

Configure the Wayfinder plugin settings

Wenn Sie jedoch nicht möchten, dass das Plugin Blockklassen anzeigt, deaktivieren Sie einfach das Kontrollkästchen neben dieser Option.

Vergessen Sie nach dem Konfigurieren der Einstellungen nicht, auf die Schaltfläche „Änderungen speichern“ zu klicken.

Als Nächstes müssen Sie einen bestehenden oder neuen Beitrag im WordPress-Block-Editor vom Dashboard aus öffnen.

Wenn Sie mit dem Mauszeigerkontakt über einen der inneren Blöcke fahren, wird der Umriss und der Name des Blocks angezeigt. Sie können auch die Umrisse und Namen aller verschachtelten Blöcke innerhalb des übergeordneten Blocks sehen.

GIF for the Wayfinder plugin

So können Sie alle verschiedenen Blöcke identifizieren, die in einem Gruppen- oder Spaltenblock verschachtelt sind.

Von hier aus können Sie einfach einen einzelnen Block aus dem übergeordneten Block auswählen, um dessen Einstellungen zu konfigurieren.

Use Wayfinder plugin to easily select a block

Sie können auch alle verschachtelten Blöcke gleichzeitig auswählen, indem Sie einfach auf die Überschrift „Spalten“ oder „Gruppe“ klicken. Dadurch öffnen sich die Einstellungen für den übergeordneten Block in der rechten Spalte.

Sobald Sie die Blockeinstellungen konfiguriert haben, klicken Sie einfach auf die Schaltfläche „Aktualisieren“ oder „Veröffentlichen“, um Ihre Änderungen zu speichern.

Click the Group block outline to open its settings

Wir hoffen, dass dieser Artikel Ihnen geholfen hat, zu lernen, wie man verschachtelte WordPress-Blöcke auswählt und verwendet. Vielleicht interessieren Sie sich auch für unsere Schritt-für-Schritt-Anleitung zum Ändern der Höhe und Breite von Blöcken in WordPress und unsere Top-Picks für die unverzichtbaren WordPress Plugins, mit denen Sie Ihre Website erweitern können.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.

Offenlegung: Unsere Inhalte werden von unseren Lesern unterstützt. Das bedeutet, dass wir möglicherweise eine Provision verdienen, wenn Sie auf einige unserer Links klicken. Mehr dazu erfahren Sie unter Wie WPBeginner finanziert wird , warum das wichtig ist und wie Sie uns unterstützen können. Hier finden Sie unseren redaktionellen Prozess .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Das ultimative WordPress Toolkit

Erhalte KOSTENLOSEN Zugang zu unserem Toolkit - eine Sammlung von WordPress-bezogenen Produkten und Ressourcen, die jeder Profi haben sollte!

Reader Interactions

4 KommentareEine Antwort hinterlassen

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Ralph

    I’m using nest blocks for image on left and text on the right and I want it to stay that way not only on desktop but also on mobile but it just doesn’t It places text under the image. Is this normal in case of mobile or am I doing something wrong?

    • WPBeginner Support

      It would depend on the theme but it is very common to happen on mobile to ensure the text remains readable on mobile.

      Admin

  3. Jiří Vaněk

    Thanks to these articles, I’m slowly getting acquainted with Gutenberg. I’m used to very simple solutions from Elementor, and here everything seems a bit complicated or rather unfamiliar to me. However, sometimes I come across people who want help with a website exclusively using Gutenberg and nothing else. So, I appreciate these guides where I can get my hands on, try out, and learn things that might be completely ordinary for someone using Gutenberg.

Eine Antwort hinterlassen

Danke, dass du einen Kommentar hinterlassen möchtest. Bitte beachte, dass alle Kommentare nach unseren kommentarpolitik moderiert werden und deine E-Mail-Adresse NICHT veröffentlicht wird. Bitte verwende KEINE Schlüsselwörter im Namensfeld. Lass uns ein persönliches und sinnvolles Gespräch führen.