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?

Obwohl der Block-Editor von WordPress das Hinzufügen von Inhalten erleichtert, passen die Standardblockgrößen möglicherweise nicht immer zum Design, das Sie im Sinn haben. Das Anpassen der 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 zu Mobiltelefonen, gut aussehen.
• Hervorhebung schaffen: Das Vergrößern oder Verkleinern eines Blocks kann die Aufmerksamkeit auf wichtige Handlungsaufforderungen oder Schlüsselinformationen lenken.

Verständnis der Blockgrößen in WordPress

Bevor Sie sich mit den Methoden befassen, ist es hilfreich, die verschiedenen Möglichkeiten zu verstehen, wie WordPress Ihnen die Definition von Blockabmessungen ermöglicht:

Begriff	Was es bedeutet	Wann man es benutzt
Pixel (px)	Eine feste Größeneinheit, die sich nicht mit der Bildschirmgröße ändert.	Verwenden Sie Pixel, wenn etwas überall genau gleich groß bleiben soll.
Prozent (%)	Eine flexible Einheit, die sich basierend auf dem übergeordneten Container anpasst.	Verwenden Sie Prozente, damit Ihr Layout auf allen Bildschirmgrößen gut aussieht.
Breite Weite	Eine WordPress-Ausrichtung, die einen Block breiter als den Inhaltsbereich macht, aber nicht bildschirmfüllend.	Verwenden Sie dies, um Abschnitte hervorzuheben, ohne die gesamte Seite einzunehmen.
Volle Breite	Eine WordPress-Ausrichtung, die einen Block von Rand zu Rand über den Bildschirm streckt.	Probieren Sie dies für Hero-Bereiche, Banner oder große Hintergrundbilder.
Mindesthöhe	Legt die kleinste Höhe fest, die ein Block haben kann, erlaubt ihm aber, bei Bedarf zu wachsen.	Wählen Sie dies, wenn Sie möchten, dass Abschnitte (wie Cover-Blöcke) eine einheitliche Höhe beibehalten.

Nun sehen wir, wie Sie Höhe und Breite von Blöcken 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

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

Obwohl WordPress nicht für jeden einzelnen Block exakt dieselben Größenänderungsoptionen bietet, bietet der Block-Editor mehrere leistungsstarke Möglichkeiten, die Höhe und Breite verschiedener Blöcke anzupassen.

Beginnen wir mit dem Bildblock in WordPress.

Für einen Bildblock können Sie seine Breite mithilfe der Ausrichtungsoptionen anpassen. Klicken Sie in der Symbolleiste über dem Block auf die Schaltfläche „Ausrichten“.

Die Wahl von „Breite“ lässt das Bild den größten Teil Ihres Inhaltsbereichs einnehmen, während „Volle Breite“ es über die gesamte Seite streckt.

Sie können auch die Anzeigegröße des Bildes ändern, indem Sie im rechten Bereich auf das Bedienfeld „Blockeinstellungen“ gehen.

Verwenden Sie im Abschnitt „Einstellungen“ das Dropdown-Menü „Bildgröße“, um aus voreingestellten Optionen wie Miniaturansicht, Mittel, Groß oder Vollständige Größe zu wählen.

Dies ändert die Abmessungen des Bildes, sodass sie mit der ausgewählten Voreinstellung übereinstimmen.

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-Blocks. Dies ist ein Container, in dem Sie verschiedene Blöcke in jeder Spalte hinzufügen können.

Anschließend können Sie hauptsächlich die Breite der darin enthaltenen Blöcke steuern, indem Sie die Breite der Spalten anpassen. Die Höhe der Spalte passt sich automatisch an ihren Inhalt an.

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

Der Gruppen-Block eignet sich hervorragend zum Organisieren mehrerer Blöcke und zur Verwaltung ihres Layouts und ihrer Abstände. Obwohl er nicht direkt die Höhe und Breite einzelner Blöcke darin festlegt, können Sie die Gesamtgröße der Gruppe und die Anordnung ihres Inhalts steuern.

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 ihn hinzufügen, bietet der Gruppen-Block Layout-Optionen wie 'Gruppe', 'Reihe' oder 'Stapel'. Für dieses Tutorial verwenden wir das Standardlayout 'Gruppe'.

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.

Die Anpassung dieser Layout-Einstellungen beeinflusst, wie die Blöcke angeordnet werden und wie viel Platz sie innerhalb der Gruppe einnehmen. 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 auszuwählen oder ein Bild aus der WordPress-Mediathek 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 zu Cover-Bild vs. Beitragsbild im WordPress-Block-Editor ansehen.

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

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

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

Mehrere unserer Partner-Marken haben dieses Tool verwendet, um ihre gesamte Website zu gestalten, und ihre Benutzer liebten den frischen, modernen Look. Weitere Informationen finden Sie in unserem SeedProd-Testbericht.

Schritt 1: SeedProd installieren und aktivieren

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.

Schritt 2: Eine neue Landingpage erstellen

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.

Schritt 3: Bildblock-Abmessungen anpassen

Dadurch wird der Drag-and-Drop-Seitenersteller von SeedProd gestartet, wo Sie nun mit der Bearbeitung Ihrer Seite beginnen können. Detaillierte Anweisungen finden Sie in unserem Leitfaden zur Erstellung einer Landing Page 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 Abstände um und innerhalb des Bildblocks feinabstimmen, indem Sie im Einstellungsbereich oben zum Tab 'Erweitert' wechseln.

Klicken Sie dann auf das Panel 'Abstand', um die Einstellungen zu erweitern.

Hier können Sie Werte hinzufügen, um den Rand (Abstand außerhalb des Blocks) und den Innenabstand (Abstand innerhalb des Blocks) des Blocks nach Ihren Bedürfnissen anzupassen.

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

Schritt 4: Abstandhalter-Blockhöhe 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.

Schritt 5: Button-Block-Innenabstand konfigurieren

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 vertikale Größe des Buttons erhöhen, indem Sie den Schieberegler 'Vertikaler Innenabstand' ziehen, der Platz über und unter dem Button-Text hinzufügt.

Um seine horizontale Größe zu erhöhen, ziehen Sie den Schieberegler 'Horizontaler Innenabstand', der links und rechts vom Text Platz hinzufügt.

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

Häufig gestellte Fragen zur Änderung der Blockbreite und -höhe

Hier sind einige Fragen, die unsere Leser häufig zum Ändern der Blockbreite und -höhe in WordPress gestellt haben:

Wie reduziere ich die Größe eines Blocks in WordPress?

Sie können die Größe eines Blocks in WordPress reduzieren, indem Sie seine Breite, seinen Innenabstand oder seine Schriftgröße in den Blockeinstellungen anpassen. Beginnen Sie damit, den Block auszuwählen und die Abmessungen oder Abstände zu verringern, bis es richtig aussieht.

Wie passe ich die Größe eines Textblocks in WordPress an?

Sie können die Größe eines Textblocks in WordPress anpassen, indem Sie die Schriftgröße ändern in den Typografie-Einstellungen. Sie können auch die Zeilenhöhe oder den Abstand anpassen, wenn der Text immer noch zu groß erscheint.

Wie passe ich den Blockabstand in WordPress an?

Sie können den Blockabstand in WordPress anpassen, indem Sie die Rand- und Innenabstandseinstellungen bearbeiten. Wir empfehlen, zuerst den Innenabstand zu reduzieren, wenn zu viel Platz innerhalb des Blocks vorhanden ist.

Wie passe ich die Größe einer Website-Seite in WordPress an?

Sie können die Größe einer Website-Seite in WordPress anpassen, indem Sie die Layout-Einstellungen in Ihrem Theme oder Page Builder ändern. Sie können versuchen, zwischen Boxed- und Full-Width-Layouts zu wechseln, je nach gewünschtem Design.

Wie verkleinere ich die Größe einer Website in WordPress?

Sie können die Größe einer Website in WordPress verkleinern, indem Sie Schriftgrößen, Abstände und Containerbreiten reduzieren. Beginnen Sie damit, kleine Anpassungen an verschiedenen Elementen vorzunehmen, anstatt alles auf einmal zu ändern.

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-Block-Editor 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.