So ändern Sie die Blockhöhe und -breite in WordPress

Um die Größe Ihrer WordPress-Blöcke genau richtig anzupassen, waren früher benutzerdefinierte CSS-Codes oder komplexe Workarounds erforderlich.

Wir wissen das, weil wir unzählige Stunden damit verbracht haben, Benutzern bei genau diesem Problem zu helfen. Aber dank der jüngsten WordPress-Updates ist die Steuerung von Blockdimensionen viel einfacher geworden.

Was viele Leute überrascht, ist, dass es tatsächlich mehrere integrierte Möglichkeiten gibt, Blockgrößen in WordPress anzupassen. Durch viel Experimentieren haben wir die zuverlässigsten Methoden identifiziert, die in verschiedenen Situationen und Themes funktionieren.

In dieser Anleitung zeigen wir Ihnen die einfachsten Möglichkeiten, die Höhen und Breiten von Blöcken in WordPress zu ändern.

Warum Blockhöhe und -breite in WordPress ändern?

Der Blockeditor ermöglicht es Ihnen, Inhalte mit verschiedenen Blöcken zu Ihrer WordPress-Website hinzuzufügen, darunter Überschriften, Absätze, Bilder, Videos, Audio und mehr.

Manchmal möchten Sie jedoch möglicherweise die Breite oder Höhe eines bestimmten Blocks ändern, um sein Aussehen oder das allgemeine Layout des Inhalts zu verbessern.

Durch die Anpassung von Blockgrößen können Sie auch sicherstellen, dass Ihre Inhalte responsiv sind und auf allen Geräten, einschließlich Smartphones, Tablets und Laptops, korrekt angezeigt werden.

Zum Beispiel haben Sie möglicherweise ein Bild im Inhaltseditor hochgeladen, aber es ist zu groß und lässt die Seite im Frontend unansehnlich aussehen.

Möglicherweise möchten Sie auch die Größe des Überschriftenblocks ändern, um ihn besser an den Inhalt anzupassen.

Durch Anpassen der Breite und Höhe der Blöcke können Sie Ihre Beiträge und Seiten ästhetisch ansprechender gestalten.

Nichtsdestotrotz sehen wir uns an, wie Sie die Blockhöhe und -breite in WordPress einfach ändern können. Wir werden einige verschiedene Methoden behandeln, und Sie können die Schnelllinks unten verwenden, um zu der Methode zu springen, die Sie verwenden möchten:

• Methode 1: Blockhöhe und -breite über die Blockeinstellungen ändern
• Methode 2: Ändern der Blockhöhe und -breite mit dem Spalten-Block
• Methode 3: Blockhöhe und -breite mit dem Gruppenblock ändern
• Methode 4: Blockhöhe mit dem Cover-Block ändern
• Bonus: Erstellen Sie schöne Seiten mit erweiterten Blöcken in SeedProd

Methode 1: Blockhöhe und -breite über die Blockeinstellungen ändern

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

Derzeit bietet WordPress nicht für alle Blöcke die gleichen Größenänderungsoptionen. Der Blockeditor bietet jedoch viele Möglichkeiten, die Höhe und Breite verschiedener Blöcke zu ändern.

Beginnen wir mit dem Bildblock in WordPress.

Zuerst können Sie die Ausrichtung des Bildblocks ändern, indem Sie auf die Schaltfläche „Ausrichten“ in der Symbolleiste über dem Block klicken.

Hier bewirkt die Wahl der Option 'Breite' (Wide Width), dass der Block die gleiche Breite wie der Container hat. Oder die Ausrichtungsoption 'Volle Breite' (Full Width) macht den Block zur gesamten Breite der Seite.

Sie können einen Block auch ändern, indem Sie zum Bedienfeld „Blockeinstellungen“ auf der rechten Seite gehen und 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 die Größe des Blocks auch prozentual anpassen.

Eine weitere Möglichkeit, einen Bildblock in der Größe zu ändern, besteht darin, auf das Bild selbst zu klicken, wodurch ein blauer Rahmen mit kreisförmigen Ankerpunkten angezeigt wird.

Ziehen Sie dann einfach diese Anker, um die Höhe und Breite des Bildblocks zu ändern.

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 mit dem Spalten-Block

Wenn der Block, dessen Größe Sie ändern möchten, keine Ausrichtungsschaltflächen oder Größenänderungseinstellungen hat, dann ist diese Methode für Sie.

Für diese Methode platzieren wir unseren Block innerhalb des Spalten-Block. Er fungiert als Container, in dem Sie verschiedene Blöcke in jeder Spalte hinzufügen können. Anschließend können Sie die Größe dieser Blöcke durch Anpassen der Höhe und Breite der Spalten ändern.

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

Von hier aus suchen Sie den Spaltenblock und fügen ihn zum Gutenberg-Editor hinzu. Dann werden Sie aufgefordert, eine Variation auszuwählen.

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.

Nachdem der Block hinzugefügt wurde, können Sie seine Größe mit den „Spalteneinstellungen“ im rechten Bedienfeld ändern.

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

So sah der Inhalt auf unserer Demowebsite aus, nachdem zwei Absatzblöcke innerhalb eines Zwei-Spalten-Blocks in der Größe geändert und ausgerichtet wurden.

Methode 3: Blockhöhe und -breite mit dem Gruppenblock ändern

Sie können die Breite und Höhe von Blöcken auch mit dem Gruppenblock anpassen. Er ermöglicht es Ihnen, Ihre gewünschten Blöcke zu gruppieren und sie gemeinsam zu gestalten.

Zuerst müssen Sie auf die Schaltfläche „Block hinzufügen” (+) oben klicken. Suchen Sie dann den Gruppen-Block und fügen Sie ihn dem Inhaltseditor hinzu.

Sobald Sie dies getan haben, zeigt der Gruppenblock drei verschiedene Layout-Optionen an. Für dieses Tutorial verwenden wir das 'Gruppen'-Layout.

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

In diesem Tutorial fügen wir einen Überschriftenblock, einen Absatzblock und einen Bildblock hinzu und passen deren Größe an.

Um mehrere Blöcke zur Gruppe hinzuzufügen, klicken Sie in der Block-Symbolleiste auf die Schaltfläche „Gruppe auswählen“.

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

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

Das Ändern des Layouts ändert auch die verschiedenen Blockgrößen. Sie können diese Einstellungen konfigurieren, bis Sie mit dem Ergebnis zufrieden sind.

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

So sah der Gruppenblock auf unserer Demo-Website aus.

Methode 4: Blockhöhe mit dem Cover-Block ändern

Diese Größenanpassungsmethode ist für Sie, wenn Sie den Cover-Block verwenden möchten. Sie ermöglicht es Ihnen, Text und andere Inhalte über einem Bild oder Video anzuzeigen.

Klicken Sie zuerst auf die Schaltfläche „Block hinzufügen” (+) oben und suchen Sie den Cover-Block.

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

Ziehen Sie dann einfach einen beliebigen Block, den Sie möchten, in den Titelbildblock.

Danach müssen Sie auf den Cover-Block klicken, um dessen Blockeinstellungen in der rechten Spalte zu öffnen.

Scrollen Sie von hier aus nach unten zum Bereich 'Dimensionen', wo Sie die Höhe des Cover-Blocks in Pixeln anpassen können.

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

Für detailliertere Anweisungen zur Verwendung des Cover-Blocks sollten Sie sich unseren Anfängerleitfaden Cover-Bild vs. Beitragsbild im WordPress-Blockeditor ansehen.

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

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

Es ist der beste WordPress Page Builder auf dem Markt, mit dem Sie Landing Pages mithilfe von Blöcken erstellen können, die sehr einfach an Ihre Bedürfnisse angepasst und in der Größe geändert werden können.

Mehrere unserer Partner-Marken haben dieses Tool verwendet, um ihre gesamte Website zu gestalten, und ihre Nutzer haben das frische, moderne Aussehen geliebt. Weitere Informationen finden Sie in unserem SeedProd-Testbericht.

Zuerst müssen Sie das SeedProd Plugin installieren und aktivieren. Weitere Details finden Sie in unserem Leitfaden zur Installation eines WordPress-Plugins.

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

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

Besuchen Sie als Nächstes den Bildschirm SeedProd » Landing Pages in der Admin-Seitenleiste, um mit der Erstellung einer Landing Page zu beginnen.

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

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 Landingpage anzugeben.

Nachdem Sie diese Details eingegeben haben, klicken Sie einfach auf die Schaltfläche „Speichern und Seite bearbeiten“ , um fortzufahren.

Dies startet den Drag-and-Drop-Seitenersteller von SeedProd, wo Sie nun mit der Bearbeitung Ihrer Seite beginnen können. Detaillierte Anweisungen finden Sie in unserem Leitfaden zur Erstellung einer Landingpage mit WordPress.

Für dieses Tutorial fügen wir einen Bildblock und einen Schaltflächenblock hinzu und ändern deren Größe.

Zuerst müssen Sie den Bildblock aus dem Block-Panel auf der linken Seite ziehen und ihn irgendwo auf der Seite ablegen.

Klicken Sie anschließend auf den Bild-Block, um dessen 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 mit Pixeln oder Prozent ändern.

Sie können auch die Bildgröße und -position anpassen, indem Sie oben im Einstellungsfenster zum Tab „Erweitert“ wechseln.

Klicken Sie dann einfach auf das Bedienfeld „Abstand“, um dessen Einstellungen zu erweitern.

Hier geben Sie einfach Werte ein, um den Rand und Abstand des Blocks nach Ihren Wünschen anzupassen.

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

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

Zuerst müssen Sie den 'Abstandhalter'-Block aus der linken Spalte lokalisieren und hinzufügen. Klicken Sie dann darauf, um seine Einstellungen zu öffnen.

Jetzt können Sie die Höhe des Abstandshalters mit dem Schieberegler 'Höhe' steuern.

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

Sie können die Breite und Höhe anderer Blöcke auf die gleiche Weise ändern, einschließlich der Blöcke für Videos, Überschriften und Schaltflächen.

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

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

Wechseln Sie von hier aus zum Tab 'Erweitert' oben. Sie können die Höhe des Blocks ändern, indem Sie den Schieberegler 'Vertikales Padding' ziehen.

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

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

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie die Blockbreite und -höhe in WordPress ändern können. Möglicherweise möchten Sie auch unseren Artikel über das Hinzufügen und Ausrichten von Bildern im WordPress-Blockeditor und unsere Top-Auswahl für die besten Gutenberg-freundlichen WordPress-Themes sehen.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.