Konditionale Layout-Breite mit GP-Elements & per Child-Theme (Full Width)

Mit GeneratePress und GenerateBlocks ist es möglich, nahezu jegliche Layout-Anforderungen umzusetzen.

Häufig sollen beispielsweise Landingpages erstellt werden, auf denen sich ein farbiger Hintergrund einzelner Sektionen über die gesamte Bildschirmbreite erstreckt. Der Content soll aber in den Sektionen innerhalb der global definierten Content-Width bleiben.

GP & GB ermöglichen solche Layouts, indem Content-Width (per Theme & Editor) und Container-Width (maximale Ausdehnung der Blöcke) optimal aufeinander abgestimmt werden.

Inhalte in voller Bildschirmbreite anzeigen

Im Editor stellt GP in den Post-Settings > Layout > Content Container die Möglichkeit bereit, den gesamten Inhalt auf die global eingestellte Content-Width zu begrenzen, oder sich über die gesamten Bildschirmbreite zu erstrecken. In diesen Settings stehen dafür die Parameter Default, Full Width & Contained zur Verfügung:

Wenn wir hier Full Width einstellen, erstreckt sich allerdings der gesamte Content über die volle Breite, also auch die Überschriften, Textabschnitte, Bilder etc.

Das kann im Frontend die Lesbarkeit stark beeinträchtigen, erst Recht, wenn Überschriften und Textabschnitte nicht in Spalten untergliedert werden.

Content Container: Full Width & dabei Inhalte begrenzen auf globale Content-Breite

Wenn in den Post/Page-Settings die Content Container auf Full Width gesetzt sind, kann durch konsequenten Einsatz der Container-Blöcke einzelne Bereiche auf die volle Breite ausdehnen, oder wahlweise die globale Content-Breite begrenzen.

Um farbige Hintergrund-Bereiche oder welche mit Hintergrund-Bildern in voller Breite zu zeigen, sollten diese im Outer-Container angewendet werden.

Andere Inhalte, die innerhalb der globalen Content-Width angezeigt werden sollen, müssen im Inner-Container platziert werden. Der Inner-Container sollte dabei die folgenden Block-Settings haben:

Inner-Container Block-Settings
> Layout: Flex
> Sizing: max-width = content/global
> Spacing: margin-left/right = auto

Siehe auch https://docs.generatepress.com/article/content-container/

Lösung über Elements – Konditionale Breite

Falls mehrere Post auf deiner Site Bereiche enthalten, die sich über die volle Breite erstrecken sollen, ist es sinnvoller, hierfür ein Layout-Element einzusetzen und dieses über die Display Rules auf mehrere Locations (also Posts, Pages etc.) zu beschränken.

Siehe auch https://docs.generatepress.com/article/layout-element-overview/#content-1.