Den Abstandshalter-Block responsive machen

Mit dem Abstandshalter-Block kann man einen Abstand zwischen zwei Blöcke setzen. Der Abstandshalter-Block ist aber leider nicht flexibel: Die Höhe ist bei allen Bildschirmbreiten gleich.

Ein Abstand von 100 Pixeln Höhe wirkt auf einem größeren Bildschirm vielleicht ganz harmonisch, auf dem Smartphone erzeugen die 100 Pixel aber ein Loch. Aus diesem Grund habe ich den Abstandshalter-Block lange Zeit nicht genutzt.

Beim Redesign unserer eigenen Website habe ich den Abstandshalter-Block dann doch mal eingesetzt. Ich brauchte eine Methode, um schnell verschiedene Abstände auszuprobieren. Sobald die Abstände feststehen, so dachte ich, würde ich sie als Margins ins Theme-CSS schreiben.

Abstände per CSS zu vergeben ist eigentlich nicht weiter schwer, aber ein bisschen umständlich ist es schon. Man muss sehr spezifisch werden (Element A hat auf der Startseite einen Abstand x, auf allen anderen Seite aber den Abstand y), man muss entscheiden, ob man mit einem Abstand unten oder oben arbeiten möchte und so weiter.

Eigentlich wäre es schon praktisch, wenn man Abstände über einen Block definieren könnte. Wichtig wäre nur, dass der Abstand keine starre Höhe hat, sondern dass sich die Höhe auf kleineren Bildschirmen anpasst.

Block-Styles für den Abstandshalter-Block

Ich habe mir über Block Styles drei Varianten für den Abstandshalter-Block gemacht. Die Varianten haben drei Größen: Small, Medium und Large. Je nachdem, wie viel „Luft“ ich im Layout brauche, wähle ich beim Bauen der Seite die passende Variante aus.

.wp-block-spacer.is-style-large { height: 7vw !important; max-height: 7rem; } .wp-block-spacer.is-style-medium { height: 5vw !important; max-height: 5rem; } .wp-block-spacer.is-style-small { height: 3vw !important; max-height: 3rem; }
Code-Sprache: CSS (css)

Ich habe die Höhe in vw (viewport width) definiert. 1vw entspricht 1% der Breite des Browserfensters. Je schmäler der Bildschirm wird, desto niedriger wird der Abstand. Ich habe den Elementen ausserdem noch eine max-height mitgegeben, so dass der Abstand ab einem bestimmten Punkt nicht mehr größer wird. Dafür habe ich die Einheit rem verwendet. Der maximale Abstand orientiert sich damit an der Schriftgröße. Auch eine min-height kann je nach Kontext sinnvoll sein.

Die Abstufung 7vw/5vw/3vw funktionierte gut bei meinem Projekt. Wenn du ein Design mit mehr oder weniger Weißraum hast, kann es sein, dass du andere Werte brauchst.

Nachteil: Die Controls sind weiter sichtbar

Einen Nachteil gibt es allerdings: Es ist bisher nicht möglich, die Controls für einen bestimmten Block zu deaktivieren. Das heißt, in der Editor-Ansicht kann man nach wie vor den Abstandhalter größer und kleiner ziehen bzw. die Höhe in der Sidebar verstellen.

Diese Einstellungen haben zwar keine Auswirkung auf die Darstellung, weil mein CSS aus den Block-Styles die Angaben überschreibt. Aber das ist eine unschöne und potenziell verwirrende Situation. Besser wäre es, die Einstellungen wären nicht zu sehen.

Fazit

Mit den Abstandshalter-Block-Styles lässt es sich gut arbeiten. Der Abstand passt sich bei kleineren Bildschirmbreiten an, es entstehen keine ungewollten Löcher mehr. Ein Vorteil ist auch, dass man auf diese Weise ein System von einheitlichen Abständen definieren kann.

Nachteil sind die weiterhin sichtbaren Controls. Ich hoffe, dass es irgendwann einen offiziellen Filter gibt, über den man die Controls ansprechen kann. Es gibt zwar eine Diskussion dazu, aber eine Lösung gibt es meines Wissens noch nicht.

Kommentare, die nichts mit dem jeweiligen Artikel zu tun haben, oder die weitgehend inhaltslos sind und keinen Mehrwert für andere Leserinnen und Leser bieten, veröffentlichen wir nicht.

2 Kommentare zu “Den Abstandshalter-Block responsive machen

  • Das ist natürlich so eine Möglichkeit, die starre Eigenschaft des Abstandhalter-Blocks zu umgehen. Ich habe mich kürzlich auch mit diesem Thema auseinander gesetzt und folgendes Plugin gefunden: https://wordpress.org/plugins/flexible-spacer-block/

    Bisher ist meine Erfahrung gut, es bringt halt nur den einen Block mit und die Einstellmöglichkeiten sind für mich erstmal vollkommen ausreichend. Es werden zwar weiterhin Pixelwerte verwendet, aber vielleicht lässt sich das der Core als Inspiration nehmen und ermöglicht hier auch in Zukunft andere Einheiten als px.

    • Oh, Danke für den Tipp, das schau ich mir mal näher an!
      EDIT: Ich hoffe auch, dass der Core-Block irgendwann ein „Upgrade“ bekommt. So ist er nicht wirklich gut verwendbar.
      Viele Kunden nehmen nur die Desktopansicht wahr und haben die mobile Ansicht nicht im Blick. Was ja auch nicht ihre Aufgabe ist. Aber so entstehen dann schnell mal ungewollte Effekte.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Hinweise zum Datenschutz
Wenn du einen Kommentar schreibst, wird dieser inklusive Metadaten zeitlich unbegrenzt gespeichert. Auf diese Art können wir Folgekommentare automatisch erkennen und freigeben, anstelle sie in einer Moderations-Warteschlange festzuhalten.
Wenn Besucher Kommentare auf der Website schreiben, sammeln wir die Daten, die im Kommentar-Formular angezeigt werden, außerdem die IP-Adresse des Besuchers und den User-Agent-String (damit wird der Browser identifiziert), um die Erkennung von Spam zu unterstützen. Aus deiner E-Mail-Adresse kann eine anonymisierte Zeichenfolge erstellt (auch Hash genannt) und dem Gravatar-Dienst übergeben werden, um zu prüfen, ob du diesen benutzt.
Die Datenschutzerklärung des Gravatar-Dienstes findest du hier.
Nachdem dein Kommentar freigegeben wurde, ist dein Profilbild öffentlich im Kontext deines Kommentars sichtbar.