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

Ändern von Blockhöhe und -breite in WordPress

Standardmäßig macht es WordPress einfach, schöne Inhaltslayouts für Ihre Beiträge und Seiten mithilfe von Blöcken zu erstellen. Manchmal möchten Sie jedoch die Größe dieser Blöcke ändern, damit sie besser aussehen.

Ganz gleich, ob Sie das Erscheinungsbild Ihrer Seite verfeinern oder die Konsistenz über verschiedene Geräte hinweg sicherstellen möchten, das Erlernen der Anpassung von Blockabmessungen kann die Ästhetik und Benutzerfreundlichkeit Ihrer Website verbessern.

Wir von WPBeginner verwenden den Block-Editor seit mehreren Jahren und sind immer wieder in Situationen geraten, in denen wir die Größe von Blöcken anpassen mussten, um unsere Website optisch ansprechend zu gestalten. Im Laufe der Zeit haben wir verschiedene Tipps und Tricks zur einfachen Größenanpassung von Blöcken kennengelernt, die uns helfen, ein konsistentes und attraktives Design zu erhalten.

In diesem Artikel zeigen wir Ihnen, wie Sie die Höhe und Breite von Blöcken in WordPress einfach ändern können.

How to change block height and width in WordPress

Warum Höhe und Breite von Blöcken in WordPress ändern?

Mit dem Block-Editor können Sie Ihrer WordPress-Website Inhalte mit verschiedenen Blöcken hinzufügen, darunter Überschriften, Absätze, Bilder, Videos, Audio und mehr.

Es kann jedoch vorkommen, dass Sie die Breite oder Höhe eines bestimmten Blocks ändern möchten, um sein Aussehen oder das Layout des gesamten Inhalts zu verbessern.

Durch die Anpassung der Blockgrößen können Sie außerdem sicherstellen, dass Ihre Inhalte responsive sind und auf allen Geräten, einschließlich Handys, Tablets und Laptops, richtig angezeigt werden.

Sie haben z. B. ein Bild in den Inhaltseditor hochgeladen, aber es ist zu groß und lässt die Seite auf dem Frontend unansehnlich aussehen.

Preview of an image

Sie können auch die Größe des Überschriftenblocks ändern, um ihn besser auf den Inhalt abzustimmen.

Indem Sie die Breite und Höhe der Blöcke anpassen, können Sie Ihre Beiträge und Seiten ästhetisch ansprechender gestalten.

Sehen wir uns also an, wie Sie die Höhe und Breite von Blöcken in WordPress einfach ändern können. Wir werden ein paar verschiedene Methoden behandeln, und Sie können die Quicklinks unten verwenden, um zu der gewünschten Methode zu springen:

Methode 1: Ändern Sie die Höhe und Breite des Blocks mithilfe der Blockeinstellungen

In dieser Methode zeigen wir Ihnen, wie Sie die Höhe und Breite eines Blocks mithilfe der Standardeinstellungen von WordPress ändern können.

Derzeit bietet WordPress nicht für alle Blöcke die gleichen Größenanpassungsoptionen. Der Block-Editor bietet jedoch viele Möglichkeiten, die Höhe und Breite der verschiedenen Blöcke zu ändern.

Beginnen wir mit dem Image-Block in WordPress.

Zunächst können Sie die Ausrichtung des Bildblocks ändern, indem Sie auf die Schaltfläche „Ausrichten“ in der Symbolleiste oberhalb des Blocks klicken.

Wenn Sie hier die Option „Breite“ wählen, hat der Block die gleiche Breite wie der Container. Mit der Ausrichtungsoption „Volle Breite“ nimmt der Block die gesamte Breite der Seite ein.

Use alignment settings to resize an image

Sie können die Größe eines Blocks auch ändern, indem Sie das Feld „Blockeinstellungen“ auf der rechten Seite aufrufen und nach unten zum Abschnitt „Einstellungen“ scrollen. Von hier aus können Sie die Größe eines Blocks über das Dropdown-Menü „Bildgröße“ ändern.

Sie können auch die Breite und Höhe des Blocks anpassen, indem Sie die gewünschte Pixelgröße in die Felder „Breite“ und „Höhe“ im Abschnitt „Bildabmessungen“ eingeben.

Darunter können Sie auch die Größe des Blocks prozentual anpassen.

Resize an image using block panel settings

Eine andere Möglichkeit, die Größe eines Bildblocks zu ändern, besteht darin, auf das Bild selbst zu klicken, woraufhin ein blauer Rahmen mit kreisförmigen Ankern erscheint.

Ziehen Sie dann einfach an diesen Ankern, um die Höhe und Breite des Bildblocks zu ändern.

Resize Image block using anchors

Wenn Sie fertig sind, klicken Sie auf die Schaltfläche „Aktualisieren“ oder „Veröffentlichen“, um Ihre Einstellungen zu speichern.

Methode 2: Ändern der Blockhöhe und -breite mithilfe des Spaltenblocks

Wenn der Block, dessen Größe Sie ändern möchten, nicht über Ausrichtungsschaltflächen oder Einstellungen zur Größenänderung verfügt, dann ist diese Methode für Sie geeignet.

Bei dieser Methode platzieren wir unseren Block innerhalb des Columns-Blocks. Er dient als Container, in dem Sie verschiedene Blöcke in jeder Spalte hinzufügen können. Dann können Sie die Größe dieser Blöcke ändern, indem Sie die Höhe und Breite der Spalten anpassen.

Klicken Sie zunächst auf die Schaltfläche „Block hinzufügen“ (+) in der oberen linken Ecke des Bildschirms.

Suchen Sie von hier aus den Block „Spalten“ und fügen Sie ihn dem Gutenberg-Editor hinzu. Dann werden Sie aufgefordert, eine Variante auszuwählen.

Choose the column block

Danach wird das Spaltenlayout auf dem Bildschirm angezeigt, und Sie können nun den gewünschten Block hinzufügen, indem Sie auf die Schaltfläche „Block hinzufügen (+)“ innerhalb einer Spalte klicken.

Nach dem Hinzufügen des Blocks können Sie die Größe des Blocks mit Hilfe der „Spalteneinstellungen“ auf der rechten Seite ändern.

Add Block using column

Wenn Sie fertig sind, klicken Sie einfach auf die Schaltfläche „Veröffentlichen“, um Ihre Änderungen zu speichern.

So sah der Inhalt auf unserer Demo-Website aus, nachdem wir die Größe von zwei Absatzblöcken innerhalb eines zweispaltigen Blocks geändert und diese ausgerichtet hatten.

Column block preview

Methode 3: Ändern der Höhe und Breite des Blocks mithilfe des Gruppenblocks

Sie können auch die Breite und Höhe von Blöcken mit dem Gruppenblock anpassen. Damit können Sie die gewünschten Blöcke gruppieren und gemeinsam gestalten.

Zunächst müssen Sie oben auf die Schaltfläche „Block hinzufügen“ (+) klicken. Suchen Sie dann den Block „Gruppe“ und fügen Sie ihn dem Inhaltseditor hinzu.

Sobald Sie dies getan haben, zeigt der Gruppenblock drei verschiedene Layout-Optionen an. In diesem Lernprogramm werden wir das Layout „Gruppe“ verwenden.

Choose the Group block and select a layout

Daraufhin wird die Schaltfläche „Block hinzufügen“ auf dem Bildschirm angezeigt. Sie können nun jeden gewünschten Block hinzufügen.

In diesem Tutorial werden wir einen Überschriftenblock, einen Absatzblock und einen Bildblock hinzufügen und deren Größe ändern.

Add a heading block to the Group block

Um mehrere Blöcke zu einer Gruppe hinzuzufügen, klicken Sie auf die Schaltfläche „Gruppe auswählen“ in der Blocksymbolleiste.

Sobald die Gruppe ausgewählt ist, klicken Sie einfach auf die Schaltfläche „Block hinzufügen“ (+) am unteren Rand.

Add multiple blocks in Group

Daraufhin öffnet sich die Seitenleiste mit den Blockeinstellungen auf der rechten Seite. Von hier aus können Sie ganz einfach das Layout, die Ausrichtung und die Orientierung aller Blöcke anpassen.

Wenn Sie das Layout ändern, ändern sich auch die verschiedenen Blockgrößen. Sie können diese Einstellungen konfigurieren, bis Sie mit dem Ergebnis zufrieden sind.

Configure the block settings of the Group block

Wenn Sie fertig sind, klicken Sie auf die Schaltfläche „Aktualisieren“ oder „Veröffentlichen“, um Ihre Einstellungen zu speichern.

So sieht der Gruppenblock auf unserer Demo-Website aus.

Group block preview

Methode 4: Ändern der Blockhöhe mit Hilfe des Abdeckblocks

Diese Methode zur Größenänderung ist für Sie geeignet, wenn Sie den Cover-Block verwenden möchten. Damit können Sie Text und andere Inhalte über einem Bild oder Video anzeigen.

Klicken Sie zunächst oben auf die Schaltfläche „Block hinzufügen“ (+) und suchen Sie den Abdeckungsblock.

Sobald Sie dies getan haben, werden Sie aufgefordert, eine Farbe auszuwählen oder ein Bild aus der WordPress-Mediathek hochzuladen. Dieses Bild oder diese Farbe wird als Hintergrund für den Cover-Block verwendet.

Add the Cover block

Als Nächstes ziehen Sie einfach einen beliebigen Block per Drag & Drop in den Abdeckungsblock.

Danach müssen Sie auf den Abdeckungsblock klicken, um seine Blockeinstellungen in der rechten Spalte zu öffnen.

Scrollen Sie von hier aus nach unten zum Bereich „Abmessungen“, wo Sie die Höhe des Cover-Blocks in Pixeln einstellen können.

Change the Cover block height

Vergessen Sie nicht, auf die Schaltfläche „Änderungen speichern“ zu klicken, um Ihre Einstellungen zu speichern.

Ausführlichere Anweisungen zur Verwendung des Cover-Blocks finden Sie in unserer Anleitung für Einsteiger zum Thema Cover-Bild vs. Featured Image im WordPress-Block-Editor.

Bonus: Erstellen Sie schöne Seiten mit erweiterten Blöcken in SeedProd

Mit dem SeedProd-Plugin können Sie ganz einfach schöne und ästhetisch ansprechende Seiten erstellen.

Es ist der beste WordPress-Seitenersteller auf dem Markt. Er ermöglicht es Ihnen, Landing Pages mit Blöcken zu erstellen, die Sie ganz einfach anpassen und in der Größe nach Ihren Bedürfnissen verändern können.

Zunächst müssen Sie das SeedProd-Plugin installieren und aktivieren. Für weitere Details lesen Sie bitte unsere Anleitung zur Installation eines WordPress-Plugins.

Hinweis: SeedProd bietet auch eine kostenlose Version an, aber wir werden für dieses Tutorial die Premium-Version verwenden.

Nach der Aktivierung müssen Sie von Ihrem WordPress-Dashboard aus die Seite SeedProd “ Einstellungen aufrufen und den Lizenzschlüssel in das Feld „Lizenzschlüssel“ eingeben.

Sie finden den Lizenzschlüssel auf Ihrer Kontoseite auf der SeedProd-Website.

Paste license key in field

Rufen Sie als Nächstes den Bildschirm SeedProd “ Landing Pages in der Admin-Seitenleiste auf, um eine Landing Page zu erstellen.

Von hier aus klicken Sie einfach auf die Schaltfläche „Neue Landing Page hinzufügen“.

Click the Add New Landing Page button

Sie werden nun zum Bildschirm „Neue Seitenvorlage auswählen“ weitergeleitet. SeedProd bietet viele vorgefertigte Vorlagen, aus denen Sie auswählen können.

Nachdem Sie eine Vorlage ausgewählt haben, werden Sie aufgefordert, einen Namen und eine URL für Ihre Landing Page anzugeben.

Nachdem Sie diese Angaben hinzugefügt haben, klicken Sie einfach auf die Schaltfläche „Speichern und mit der Bearbeitung der Seite beginnen“, um fortzufahren.

Enter your page details

Dadurch wird der Drag-and-Drop-Seiten-Builder von SeedProd gestartet, mit dem Sie nun Ihre Seite bearbeiten können. Detaillierte Anweisungen finden Sie in unserem Leitfaden zum Erstellen einer Landing Page mit WordPress.

In diesem Tutorial werden wir einen Bild- und einen Schaltflächenblock hinzufügen und ihre Größe ändern.

Ziehen Sie zunächst den Bildblock aus dem Blockbedienfeld auf der linken Seite und legen Sie ihn an einer beliebigen Stelle auf der Seite ab.

Choose the image block in the SeedProd

Klicken Sie als Nächstes auf den Bildblock, um seine Blockeinstellungen in der linken Spalte zu öffnen. Von hier aus können Sie ein Bild aus Ihrer Mediathek hochladen.

Als Nächstes können Sie die Höhe und Breite des Blocks in Pixeln oder Prozentwerten ändern.

Change the block size in SeedProd

Sie können auch die Bildgröße und -position anpassen, indem Sie auf die Registerkarte „Erweitert“ am oberen Rand des Einstellungsfelds wechseln.

Klicken Sie dann einfach auf das Feld „Abstand“, um die Einstellungen zu erweitern.

Visit the Spacing panel by switching to the Advanced tab

Fügen Sie hier einfach Werte hinzu, um den Rand und die Auffüllung des Blocks an Ihre Bedürfnisse anzupassen.

Sie können den Rand und die Auffüllung für den oberen, unteren, linken und rechten Bereich des Blocks anpassen.

Ajust the margin and padding of the block

Mit Seedprod können Sie auch einen Spacer-Block zwischen zwei verschiedenen Blöcken einfügen, um etwas Platz zwischen ihnen zu schaffen.

Zunächst müssen Sie den Block „Abstandhalter“ in der linken Spalte suchen und hinzufügen. Klicken Sie dann auf ihn, um seine Einstellungen zu öffnen.

Add the Spacer block

Jetzt können Sie die Höhe des Abstandshalters mit dem Schieberegler „Höhe“ einstellen.

Der Spacer-Block kann Ihnen helfen, eine übersichtliche Website zu erstellen.

Use the height slider to adjust Spacer block

Sie können auch die Breite und Höhe anderer Blöcke auf die gleiche Weise ändern, einschließlich der Blöcke Video, Überschrift und Schaltfläche.

Suchen Sie einfach den Button-Block in der linken Spalte und ziehen Sie ihn auf Ihre Seite.

Add the Button block to the website

Als Nächstes müssen Sie auf die Schaltfläche klicken, um ihre Blockeinstellungen zu öffnen.

Wechseln Sie von hier aus auf die Registerkarte „Erweitert“ im oberen Bereich. Sie können die Höhe des Blocks ändern, indem Sie den Schieberegler „Vertikale Auffüllung“ ziehen.

Changing height of the button block

Um die Breite zu ändern, ziehen Sie den Schieberegler „Horizontale Aufteilung“ in der linken Spalte.

Wenn Sie fertig sind, vergessen Sie nicht, auf die Schaltfläche „Speichern“ zu klicken.

Change width of the button block

Wir hoffen, dass dieser Artikel Ihnen geholfen hat zu lernen, wie Sie die Breite und Höhe von Blöcken in WordPress ändern können. Vielleicht interessieren Sie sich auch für unseren Artikel über das Hinzufügen und Ausrichten von Bildern im WordPress-Block-Editor und unsere Top-Picks für die besten Gutenberg-freundlichen WordPress-Themes.

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

Kommentare

  1. Herzlichen Glückwunsch, du hast die Möglichkeit, der erste Kommentator dieses Artikels zu sein.
    Hast du eine Frage oder Anregung? Bitte hinterlasse einen Kommentar, um die Diskussion zu starten.

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.