[ad_1]
Ich habe mit dem Theme Twenty Twenty-Three eine neue Seite erstellt, das Template „Leer“ zugewiesen und dann diese Blöcke eingefügt:
<!-- wp:columns {"align":"full"} -->
<div class="wp-block-columns alignfull"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:cover {"url":"https://wp.test/wp-content/uploads/2023/08/alex-lvrs-bB_q5FqErEI-unsplash-scaled.jpg","id":1557,"dimRatio":0,"minHeight":100,"minHeightUnit":"vh","isDark":false,"layout":{"type":"constrained"}} -->
<div class="wp-block-cover is-light" style="min-height:100vh"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span><img class="wp-block-cover__image-background wp-image-1557" alt="" src="https://wp.test/wp-content/uploads/2023/08/alex-lvrs-bB_q5FqErEI-unsplash-scaled.jpg" data-object-fit="cover"/><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 -->
<!-- wp:column {"style":{"spacing":{"padding":{"top":"0","bottom":"0","left":"var:preset|spacing|30","right":"var:preset|spacing|30"}}}} -->
<div class="wp-block-column" style="padding-top:0;padding-right:var(--wp--preset--spacing--30);padding-bottom:0;padding-left:var(--wp--preset--spacing--30)"><!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->Du kannst den Code einfach kopieren, wechselt im Editor über das Drei-Punkte-Menü oben rechts in den Code-Editor und fügst ihn dort mit Strg-V ein. Danach kannst du in den visuellen Editor zurückwechseln und die Inhalte nach Belieben austauschen. (Das Bild wird dir nach Einfügen der Blöcke nicht angezeigt, weil eine Adresse aus meiner lokalen Testinstallation verwendet wird. Das musst du also auf jeden Fall austauschen.)
Das sieht dann so aus:
Herzlichen Dank für den Code. Dieser ändert aber das Template, ist das korrekt? Oder könnte ich auch einen Block erstellen mit diesen Fullscreen-Eigenschaften?
Der Code wirkt sich nur auf die Seite aus. Damit kein Seitentitel und keine Ränder ausgegeben werden, habe ich ein Template „Leer“ verwendet, das Bestandteil des Themes Twenty Twenty-Three ist:
Andere Themes (keine Ahnung, welches du verwendest – du hast nichts angegeben) nennen das auch schon mal „Canvas“, weil du die Blöcke wie auf einer leeren Leinwand platzieren kannst.
Wichtig ist, dass du beim Cover-Block die Darstellung auf volle Bildschirmhöhe ändern kannst. Dafür gibt es ein eigenes Icon:
Der Cover-Block hat außerdem den Vorteil, dass du beliebig Blöcke über das Bild legen kannst – z.B. einen Absatz mit farbigem Hintergrund:
Zum Platzieren des Absatzes habe ich das Icon mit den Punkten verwendet:
… und da es öfters Verwirrung gibt, wo du die Webseite bearbeitest: Das Menü Design > Website-Editor ändert das Layout der gesamten Website. Um das Layout einer einzelnen Seite zu ändern, musst du im Menü Seiten die gewünschte Seite bearbeiten.
Ah jetzt ist es mir einiges klarer. Danke für die ausführliche Beschreibung!
Ich verwende auch das Theme twenty-twenty-three. Mittlerweile war ich auch beider Cover-Lösung angelangt. Und die Platzierungs- und Grössen-Hilfe mit den Icons ist ja ganz cool 🙂
Nochmals herzlichen Dank!
- Diese Antwort wurde geändert vor 1 Stunde, 59 Minuten von .
Dann markiere ich den Thread jetzt als gelöst. Wenn dir noch was einfällt, meldest du dich bitte.
Eine Frage ist tatsächlich noch aufgetaucht, und zwar betreffend Responsive-Ansicht.
In der Desktop-Ansicht wird das Bild links und der Text rechts angezeigt. Auf der nächsten Reihe habe ich es aber vielleicht genau umgekehrt, also Text links und Bild rechts. In der Mobile-Ansicht möchte ich es aber immer gleich: Bild oben, Text unten, Bild oben, Text unten. Ist das mit dem Blockeditor umsetzbar?