Wie platziere ich die headline responsive/ „mobil friendly“?

@bscu Es gibt im Block-Editor einen Block „Abstandshalter“, der einen leeren Abschnitt mit Margin entsprechend den gewählten Block-Einstellungen einfügt.

@lebenskompetenz11 Wenn du mit UAG arbeitest, kannst du für den Block Abschnitt die Innen- und Außenabstände individuell einstellen und brauchst keinen zusätzlichen Abstandshalter. Der Block Abstandshalter des WordPress-Core ist ein Hilfsmittel, wenn du Blöcke verwendest, die nicht so detaillierte Einstellungsmöglichkeiten bieten.

Viele Einstellungsoptionen zu haben, kann Fluch oder Segen sein. Was dem einen viel zu kompliziert ist, gibt der anderen gerade so viel Optionen wie nötig.

Meine Antwort bezog sich aber auf die Frage von @bscu, der (soviel ich weiß und so, wie ich ihn einschätze) schneller mal zu eigenen CSS-Regeln greift … weil er’s kann. Wer mit wenigen Zeilen Code Abstände selber definiert, braucht nicht nach Einstellungsmöglichkeiten suchen.

Wenn du den im Block-Editor enthaltenen Cover-Block verwendest, kannst du ein Hintergrundbild verwenden, das als Parallax-Hintergrund angezeigt wird (Text gleitet beim Scrollen über feststehendes Bild) oder mit dem Text mitscrollt. Du kannst dann im Cover-Block eine Überschrift, Text und Buttons einfügen und farblich anpassen. Viel mehr Möglichkeiten hast du nicht (was durchaus auch seinen Charme haben kann, weil es deutlich schneller geht, als dutzende Einstellungen durchzugehen). Möchtest du zum Beispiel nach einem Cover-Block einen größeren Abstand haben, verwendest du dafür den genannten Abstandshalter-Block.

Wenn du as Plugin Ultimate AddOn for Gutenberg installierst, bekommst du Blöcke mit deutlich mehr Einstellungsmöglichkeiten. So kannst du zum Beispiel den Abstand nach einem „Abschnitt“ in den Block-Einstellungen festlegen und brauchst nicht einen weiteren Block als Krücke. Du kannst hier auch angeben, wie der Abstand innerhalb des Abschnitts sein soll und hast dann für die Blöcke, die du im Abschnitt platzierst wieder dutzende Einstellungsoptionen.

Webdesign ist kein Printdesign. Im Printdesign habe ich ein Blatt Papier mit festen Abmessungen, die sich nie ändern. Hier kann ich Millimetergenau festlegen, wo Bilder stehen sollen, wie Text umbricht usw. Beim Webdesign musst du von zig verschiedenen Bildschirmgrößen ausgehen, weil sich Benutzer:innen Webseiten auf dem Smartphone, dem Kindle, dem Tablet oder dem 27″-Desktop-Monitor (und dort auch noch die Fenstergröße des Browsers nach Belieben ändern). Der Anspruch, dass ein Bild an einer bestimmten Stelle stehen soll, pixelgenau in allen verschiedenen Browsern bitte, ist sehr schwer umzusetzen und ich denke auch, dass es nicht das Ziel der Gutenberg-Entwickler war, mit dem Cover-Block so etwas umzusetzen.
Wir haben hier öfters Rückfragen von Teilnehmenden, die ein Foto im Bildbearbeitungsprogramm mit einem Schriftzug oder einen Bild-Wort-Marke versehen haben und nun erwarten, dass dieses Bild auf allen Endgeräten ohne Verzerrung so dargestellt wird, wie sie sich das bei der Arbeit im Bildbearbeitungsprogramm vorgestellt haben. Das Problem ist, dass sich durch eine proportionale Darstellung beim Verkleinern der Bildschirmbreite auch die Bildhöhe ändert, worauf dann wieder die in einem Cover-Block darüber platzierte Schrift und Buttons nicht so passen. All das versucht das Plugin Ultimate AddOns in den Griff zu bekommen, indem es dir dir Einbindung des Hintergrundbildes mit verschiedenen Methoden ermöglicht und für jedes Designelement Einstellungsmöglichkeiten für Desktop, Tablet und Mobile anbietet.

Leider fehlt mir die Zeit, um mit dir jede Einstellung im Einzelnen durchzugehen. Aber das wäre auch nicht das Ziel unseres Supportforums.

Schau dir übrigens mal dieses Video-Tutorial zu GeneratePress an, in dem es darum geht, einen „Page Hero“ anzulegen – ich denke, da dürften für dich interessante Ideen dabei sein.