Action-Hero Section, die auf Mobiles Bild „verschwinden“ lässt

Es gibt, und das macht die Wahl nicht leicht, viele Wege, wie man in WordPress Inhalte layouten kann. Selbst wenn man auf Drittanbieterpagebuilder wie Elementor, Visual Bakery, Beaver Builder etc. verzichtet, und sich dem Block-Editor zuwendet, steht man noch vor einer Riesenauswahl an Blöcken oder Blocksammlungen.

Seit rund 15 Jahren entwickle ich Websites responsive. Für mich ist das zu einer solchen Selbstverständlichkeit geworden, dass ich bisher davon ausging, jeder macht das heute so. Doch neulich stieß ich auf eine Vorgehensweise, mit der ich nicht gerechnet hatte. Für Desktops und Mobiles wurden verschiedene Elemente verwendet.

Ich will hier ein solches Vorgehen nicht grundsätzlich verteufeln. Es mag in Einzelfällen sinnvoll sein, für Mobiles Elemente bereitzustellen, die man auf Desktops nicht benötigt, oder auch umgekehrt. Doch als grundsätzliches Designprinzip ist das fallweise Ein- oder Ausblenden nach Displaygröße nicht vorgesehen.

Responsive Design bedeutet nicht, dass man Elemente für Mobiles, Tablets und Desktops separat baut, und jeweils in den anderen Devices ausblendet, sondern dass sich Elemente den Displaygrößen anpassen.

Auch wenn man sich grundsätzlich mit dem Prinzip auskennt, ist das mit Blöcken nicht immer so einfach umzusetzen. Trotz allen möglichen Hilfsmitteln, die man heute im Webdesign vorfindet, wer sein eigenes Layout von Grund auf hinstellen möchte, trifft auf manche Herausforderung. Und Blocksammlungen machen es einem hier keineswegs immer leichter. Sie bieten mehr Optionen, damit allerdings auch mehr Potential, sich nicht für den einfachsten Weg zu entscheiden.

Wenn ich zum Beispiel eine Landingpage layoute, bekomme ich meistens nur eine Vorlage für Desktops. Nichtsdestotrotz soll das Layout auch auf Smartphones noch ansehnlich und bedienbar sein. Meistens hat dann jeder Abschnitt noch eine eigene Struktur, und so sitze ich dann an jedem schon mal eine Stunde oder länger fest, bis er für alle Displaygrößen passt.

Ein ganz spezielles Beispiel hatte ich mit diesem 2-Spalter in einer Section (Gruppe), in der eine Gruppe die Hintergrundfarbe und gerundeten Ecken links unten und rechts oben definiert. Das Bild auf der rechten Seite ist in einer Spalte (keine Innenabstände), in der ein Bild mit einem Cover eingefügt wird. Das Cover bekommt keinen Inhalt, es dient nur als Bildcontainer. Das Cover erhält zudem auch eine abgerundete Ecke, sodass es sich nahtlos in die „Background“-Group fügen kann. Weder Bildspalte noch Cover haben einen Innenabstand. Der 2-Spalter soll auf „Mobilgeräten stapeln“. Dadurch, dass es kein Padding und keinen Inhalt gibt (ggf. leeren Absatz löschen!), verschwindet die 2. Spalte vollständig, sobald der Breakpoint erreicht ist, genau so ein Verhalten war gewünscht.

Testheading

Testabsatz ~ Testabsatz ~ Testabsatz ~ Testabsatz ~ Testabsatz ~ Testabsatz

• Testitem 1
• Testitem 2
• Testitem 3

anrufen

Nachricht schreiben

So sieht das als Vorlage gespeicherte Element als Quelltext in der Code-Ansicht des Editors aus:

<!-- wp:group {"metadata":{"name":"Hero Action Section","categories":["custom-elements"],"patternName":"core/block/19827"},"align":"full","layout":{"type":"constrained","contentSize":"1280px"}} -->
<div class="wp-block-group alignfull"><!-- wp:group {"metadata":{"name":"Background-Color"},"style":{"border":{"radius":{"topRight":"50px","bottomLeft":"50px"}},"spacing":{"padding":{"top":"0","bottom":"0","left":"0","right":"0"},"blockGap":"0"}},"backgroundColor":"base-3","layout":{"type":"default"}} -->
<div class="wp-block-group has-base-3-background-color has-background" style="border-top-right-radius:50px;border-bottom-left-radius:50px;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><!-- wp:columns {"style":{"spacing":{"blockGap":{"top":"0","left":"0"},"padding":{"right":"0","left":"0","top":"0","bottom":"0"},"margin":{"top":"0","bottom":"0"}},"border":{"radius":{"topRight":"50px","bottomLeft":"50px"}}}} -->
<div class="wp-block-columns" style="border-top-right-radius:50px;border-bottom-left-radius:50px;margin-top:0;margin-bottom:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><!-- wp:column {"metadata":{"name":"Content Col"},"style":{"spacing":{"padding":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40","left":"var:preset|spacing|30","right":"var:preset|spacing|30"}}}} -->
<div class="wp-block-column" style="padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--30)"><!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50","left":"var:preset|spacing|50","right":"var:preset|spacing|50"},"blockGap":"var:preset|spacing|40"}},"fontSize":"medium","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-medium-font-size" style="padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)"><!-- wp:heading {"style":{"typography":{"textTransform":"none"}}} -->
<h2 class="wp-block-heading" style="text-transform:none"><strong>Testheading</strong></h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Testabsatz ~ Testabsatz ~ Testabsatz ~ Testabsatz ~ Testabsatz ~ Testabsatz</p>
<!-- /wp:paragraph -->

<!-- wp:list {"className":"is-style-checkmark-list is-style-default"} -->
<ul class="wp-block-list is-style-checkmark-list is-style-default"><!-- wp:list-item -->
<li>Testitem 1</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Testitem 2</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Testitem 3</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

<!-- wp:buttons {"style":{"spacing":{"blockGap":{"left":"var:preset|spacing|30"}}},"layout":{"type":"flex","justifyContent":"left"}} -->
<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"custom-action-red","className":"is-style-fill","style":{"border":{"radius":{"topLeft":"15px","topRight":"15px","bottomLeft":"15px","bottomRight":"15px"}},"typography":{"fontStyle":"normal","fontWeight":"800"},"spacing":{"padding":{"left":"var:preset|spacing|40","right":"var:preset|spacing|40","top":"var:preset|spacing|20","bottom":"var:preset|spacing|20"}}}} -->
<div class="wp-block-button is-style-fill"><a class="wp-block-button__link has-custom-action-red-background-color has-background wp-element-button" style="border-top-left-radius:15px;border-top-right-radius:15px;border-bottom-left-radius:15px;border-bottom-right-radius:15px;padding-top:var(--wp--preset--spacing--20);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--40);font-style:normal;font-weight:800">anrufen</a></div>
<!-- /wp:button -->

<!-- wp:button {"backgroundColor":"contrast","textColor":"base-2","className":"is-style-fill","style":{"border":{"radius":{"topLeft":"15px","topRight":"15px","bottomLeft":"15px","bottomRight":"15px"}},"typography":{"fontStyle":"normal","fontWeight":"800"},"spacing":{"padding":{"left":"var:preset|spacing|30","right":"var:preset|spacing|30","top":"var:preset|spacing|20","bottom":"var:preset|spacing|20"}},"elements":{"link":{"color":{"text":"var:preset|color|base-2"}}}},"borderColor":"contrast"} -->
<div class="wp-block-button is-style-fill"><a class="wp-block-button__link has-base-2-color has-contrast-background-color has-text-color has-background has-link-color has-border-color has-contrast-border-color wp-element-button" style="border-top-left-radius:15px;border-top-right-radius:15px;border-bottom-left-radius:15px;border-bottom-right-radius:15px;padding-top:var(--wp--preset--spacing--20);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--30);font-style:normal;font-weight:800">Nachricht schreiben</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column {"metadata":{"name":"Image Col Desktop"},"style":{"spacing":{"padding":{"right":"0","left":"0","top":"0","bottom":"0"}}}} -->
<div class="wp-block-column" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><!-- wp:cover {"url":"https://webentwicklerin.at/wp-content/uploads/2026/02/z03_5702-2-scaled.jpg","id":176253,"alt":"z03 5702 2","dimRatio":0,"customOverlayColor":"#999eac","isUserOverlayColor":false,"minHeight":100,"minHeightUnit":"%","isDark":false,"sizeSlug":"full","metadata":{"name":"Image-Cover"},"style":{"border":{"radius":{"topRight":"50px"}},"spacing":{"padding":{"top":"0","bottom":"0","left":"0","right":"0"},"blockGap":"0"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-cover is-light" style="border-top-right-radius:50px;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;min-height:100%"><img class="wp-block-cover__image-background wp-image-176253 size-full" alt="z03 5702 2" src="https://webentwicklerin.at/wp-content/uploads/2026/02/z03_5702-2-scaled.jpg" data-object-fit="cover"/><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim" style="background-color:#999eac"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Schreibe einen Titel …","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size"></p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

Das ist nur eines von unzähligen Beispielen, wie man mit etwas Tütfeln und Probieren auch mit Core-Blöcken zum gewünschten Ergebnis gelangen kann.

Mit WordPress 7.0 wird es übrigens mehr Kontrolle über die Darstellung von Blöcken geben, so auch die Sichtbarkeit von Elementen für Viewports zu steuern. Dann könnte man z.b. das Cover-Element in der 2. Spalte einfach für Mobiles ausblenden.