Ändern der Blockhöhe und -breite in WordPress

Möchten Sie die Höhe und Breite von Blöcken in WordPress ändern?

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 der Blöcke ändern, damit sie besser aussehen.

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

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

DieBlockeditor ermöglicht es Ihnen, Inhalte zu IhremWordPress-Website mit verschiedenen Blöcken, einschließlich Überschriften, Absätzen, Bildern, 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.

Die Anpassung der Blockgrößen kann auch sicherstellen, dass Ihr Inhaltreaktionsschnell und wird auf allen Geräten, einschließlich Handys, Tablets und Laptops, korrekt angezeigt.

Sie haben zum Beispiel ein Bild in den Inhaltseditor hochgeladen, aber es ist zu groß und lässt die Seite unattraktiv aussehen.

Oder Sie möchten 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.

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

Bei dieser Methode zeigen wir Ihnen, wie Sie die Höhe und Breite eines Blocks mit den von WordPress angebotenen Standardeinstellungen ä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.

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.

Eine weitere Möglichkeit, die Größe eines Bildblocks zu ändern, besteht darin, auf das Bild selbst zu klicken, um einen blauen Rahmen mit kreisförmigen Ankern anzuzeigen.

Ziehen Sie dann einfach an diesen Ankern, 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 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 Blöcke in jeder Spalte hinzufügen können. Anschließend können Sie die Größe dieser Blöcke ändern, indem Sie die Höhe und Breite der Spalten anpassen.

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

Von hier aus suchen Sie einfach den Spaltenblock und fügen ihn dem Inhaltseditor hinzu. Anschließend werden Sie aufgefordert, eine Variante 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.

Nach dem Hinzufügen des Blocks können Sie die Größe des Blocks mit Hilfe der „Spalteneinstellungen“ auf der rechten Seite ä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 Demo-Website aus, nachdem wir die Größe von zwei Absatzblöcken innerhalb eines zweispaltigen Blocks geändert und diese ausgerichtet hatten.

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 verschiedene Blöcke gruppieren und gemeinsam gestalten.

Zunächst müssen Sie oben auf die Schaltfläche „Block hinzufügen“ (+) klicken. Als Nächstes müssen Sie den Block „Gruppe“ suchen und in den Inhaltseditor einfügen.

Sobald Sie dies getan haben, zeigt der Gruppenblock drei verschiedene Layout-Optionen an, aus denen Sie wählen können. Für dieses Tutorial werden wir das Layout „Gruppe“ verwenden.

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.

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

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

Wenn Sie auf die Schaltfläche „Gruppe auswählen“ klicken, werden auch die Blockeinstellungen in der rechten Spalte angezeigt. Von hier aus können Sie das Layout, die Ausrichtung und die Orientierung aller Blöcke leicht 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.

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.

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.

Zunächst müssen Sie oben auf die Schaltfläche „Block hinzufügen“ (+) klicken und den Abdeckungsblock suchen.

Danach werden Sie aufgefordert, eine Farbe auszuwählen oder ein Bild aus der Liste hochzuladen.WordPress-Mediathek. Dieses Bild oder diese Farbe wird als Hintergrund für den Titelblock verwendet.

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.

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

Ausführlichere Anleitungen zur Verwendung des Cover-Blocks finden Sie in unserem Leitfaden für Einsteiger aufTitelbild vs. Featured Image im WordPress-Blockeditor.

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

Sie können auf einfache Weise schöne und ästhetisch ansprechende Seiten erstellen, indem Sie dieSeedProdPlugin.

Es ist diebester WordPress-Seitenersteller auf dem Markt, mit der Sie Landing Pages mithilfe von Blöcken erstellen können. Diese Blöcke lassen sich auch ganz einfach anpassen und in der Größe nach Ihren Bedürfnissen verändern.

Zunächst müssen Sie das Programm installieren und aktivieren.SeedProd Plugin. Für weitere Details lesen Sie bitte unseren Leitfaden über wie man ein WordPress-Plugin installiert.

Nach der Aktivierung müssen Sie auf die SeiteSeedProd “ Einstellungen Seite in Ihrem WordPress-Dashboard und geben Sie den Lizenzschlüssel in das Feld „Lizenzschlüssel“ ein.

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

Als nächstes müssen Sie dieSeedProd “ 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 auf die Seite „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.

Dadurch wird der Drag-and-Drop-Seitenersteller von SeedProd gestartet, mit dem Sie nun Ihre Seite bearbeiten können.

Ausführlichere Anweisungen finden Sie in unserem Leitfaden überwie man eine Landing Page mit WordPress erstellt.

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.

Als Nächstes klicken Sie einfach 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.

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.

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.

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.

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.

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.

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.

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