Zum Inhalt springen

So ändern Sie die Höhe und Breite eines Blocks in WordPress

WordPress, eine der beliebtesten Website-Erstellungsplattformen der Welt, gibt Benutzern eine vollständig anpassbare Kontrolle über das Erscheinungsbild und die Funktionen ihrer Website. In diesem Artikel werden wir die verschiedenen Methoden zum Ändern der Blockhöhe und -breite in WordPress durchgehen, sowohl durch Code als auch durch die Verwendung von Plugins.

Einführung in Blöcke in WordPress

Seit Version 5.0 hat WordPress einen neuen Blockeditor namens Gutenberg eingeführt. Mit diesem Editor können Benutzer Inhalte mithilfe von Blöcken erstellen und formatieren. Jeder Block kann individuell formatiert und gestaltet werden, sodass der Benutzer mehr Kontrolle über das Erscheinungsbild seiner Website hat.

1. Ändern der Höhe und Breite eines Blocks mit dem Gutenberg-Blockeditor

Im Gutenberg-Blockeditor können wir die Blockgröße mithilfe integrierter Optionen direkt ändern. Es ist jedoch zu beachten, dass nicht alle Blöcke über Optionen zur Größenänderung verfügen.

So ändern Sie die Blockgröße:

  1. Klicken Sie auf den Block, den Sie ändern möchten.
  2. Im Seitenbereich rechts sehen Sie die Einstellungen für diesen Block.
  3. Bei einigen Blöcken, beispielsweise einem Bild, können Sie Breite und Höhe direkt in diesen Einstellungen ändern.
  4. Wenn keine Größenänderungsoptionen verfügbar sind, müssen Sie CSS oder PHP verwenden, um die Größe des Blocks zu ändern.

2. Ändern der Höhe und Breite eines Blocks mithilfe von CSS

CSS (Cascading Style Sheets) ist eine Sprache, mit der das Erscheinungsbild eines in HTML oder XML geschriebenen Dokuments beschrieben wird. Sie können damit die Höhe und Breite von Blöcken in WordPress ändern.

So ändern Sie die Größe eines Blocks mithilfe von CSS:

  1. Klicken Sie auf den Block, den Sie ändern möchten.
  2. Gehen Sie im Seitenbereich rechts zum Abschnitt „Erweitert“.
  3. Geben Sie im Abschnitt „Zusätzliche CSS-Klassen“ einen eindeutigen Klassennamen für den Block ein.
  4. Gehen Sie dann in Ihrem WordPress-Administrationsbereich zu „Darstellung“ > „CSS-Editor“.
  5. Geben Sie den folgenden CSS-Code ein und ersetzen Sie „your-class“ durch den Klassennamen, den Sie dem Block gegeben haben, sowie „your-width“ und „your-height“ durch Ihre bevorzugten Abmessungen:
.your-class { width: your-width; Höhe: deine-Höhe; }

3. Ändern der Höhe und Breite eines Blocks mit PHP

Wenn Sie die Größe von Blöcken auf der gesamten Seite ändern möchten, ist es möglicherweise bequemer, dies mit PHP zu tun. Sie müssen sich jedoch darüber im Klaren sein, dass Fehler im PHP-Code schwerwiegende Probleme auf Ihrer Website verursachen können.

Funktion change_block_size() { echo '
   .your-class {
      width: your-width;
      height: your-height;
   }
   '; } add_action('wp_footer', 'change_block_size');

Dieser Code sollte in die Datei „functions.php“ in Ihrem WordPress-Theme eingefügt werden. Denken Sie daran, „your-class“, „your-width“ und „your-height“ durch die entsprechenden Werte zu ersetzen.

4. Ändern der Höhe und Breite des Blocks mithilfe von Plugins

Es gibt viele WordPress-Plugins, mit denen Sie die Blockgröße einfach ändern können. „Advanced Gutenberg“ bietet Benutzern beispielsweise zusätzliche Tools zur Steuerung von Gutenberg-Blöcken, einschließlich der Möglichkeit, die Höhe und Breite der Blöcke zu ändern.

So ändern Sie die Blockgröße mit „Advanced Gutenberg“:

  1. Installieren und aktivieren Sie das Plugin „Advanced Gutenberg“ aus dem WordPress-Repository.
  2. Gehen Sie im Administrationsbereich zu „Erweitertes Gutenberg“ > „Blockkonfiguration“.
  3. Wählen Sie den Block aus, dessen Größe Sie ändern möchten.
  4. Im Abschnitt „Blockstile“ können Sie die Höhe und Breite des Blocks ändern.

Zusammenfassung

Wie Sie sehen, gibt es in WordPress viele Möglichkeiten, die Höhe und Breite eines Blocks zu ändern. Jede Methode hat ihre Vor- und Nachteile. Daher ist es am besten, diejenige zu wählen, die Ihren Bedürfnissen und Ihrem Komfortniveau im Umgang mit der Technologie am besten entspricht. Denken Sie jedoch daran, dass es immer eine gute Idee ist, eine Sicherungskopie Ihrer Website zu erstellen, bevor Sie Änderungen am Code vornehmen.

Sehen Sie sich das Angebot von über 1500 Premium-WordPress-Plugins und -Themen an!

Warenkorb