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?

Während der Block-Editor von WordPress das Hinzufügen von Inhalten erleichtert, passen die Standardblockgrößen möglicherweise nicht immer zu dem Design, das Sie sich vorstellen. Das Anpassen von Höhe und Breite eines Blocks ist eine einfache Möglichkeit, mehr Kontrolle über das Erscheinungsbild Ihrer Seite zu erhalten.

Hier sind einige wichtige Gründe, warum Sie die Größe eines Blocks ändern möchten:

• Visuelles Layout verbessern: Durch die Steuerung der genauen Größe Ihrer Elemente können Sie ausgewogenere und professioneller aussehende Designs erstellen.
• Lesbarkeit verbessern: Das Anpassen der Breite von Textblöcken kann Ihre Inhalte leichter lesbar machen, insbesondere auf breiten Bildschirmen.
• Responsivität sicherstellen: Die richtige Größenanpassung von Blöcken hilft dabei, dass Ihre Inhalte auf allen Geräten, von Desktops bis hin zu Mobiltelefonen, gut aussehen.
• Hervorhebung schaffen: Das Vergrößern oder Verkleinern eines Blocks kann die Aufmerksamkeit auf wichtige Handlungsaufforderungen oder Schlüsselinformationen lenken.

Lassen Sie uns nun sehen, wie Sie die Blockhöhe und -breite in WordPress einfach ändern können.

Wir werden einige verschiedene Methoden behandeln, und Sie können die folgenden Quicklinks verwenden, um zu der Methode zu springen, die Sie verwenden möchten:

• Methode 1: Blockhöhe und -breite über die Blockeinstellungen ändern
• Methode 2: Blockbreite mit dem Spalten-Block ändern
• 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: Blockbreite mit dem Spalten-Block ändern

Wenn der Block, den Sie in der Größe ändern möchten, keine integrierten Größensteuerungen hat, wie z. B. der Absatz-Block, dann ist diese Methode für Sie. Sie fungiert als Workaround, indem Ihr Block in einen Container platziert wird, den Sie steuern können.

Für diese Methode platzieren wir unseren Block innerhalb des Spalten-Block. Dies ist ein Container, in dem Sie verschiedene Blöcke in jeder Spalte hinzufügen können. Anschließend können Sie diese Blöcke durch Anpassen der Höhe und Breite der Spalten in der Größe ä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.

Sobald der Block hinzugefügt wurde, können Sie seine Breite steuern, indem Sie die Spalte anpassen, in der er sich befindet.

Wählen Sie einfach die Spalte aus, und im Blockeinstellungen-Panel auf der rechten Seite können Sie die Breite der Spalte im Abschnitt 'Einstellungen' ändern. Dies passt wiederum die Größe des darin enthaltenen Blocks an.

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ößenänderungsmethode ist für Sie, wenn Sie den Cover-Block verwenden und eine bestimmte Mindesthöhe für einen Abschnitt festlegen möchten. Sie ist ideal für die Erstellung von Vollbildbannern oder Hero-Bildern mit Text und anderen Inhalten darüber.

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.