Layouts erstellen über Customizer, Page- & Container-Settings

von

Dieser Artikel ist noch in Arbeit …

Mit GP & GB können globale Site- und individuelle Page-Layouts sehr flexibel definiert werden:

  • Global im Customizer kann die Breite und Abstände des Contents eingestellt werden über Layouts > Containers
  • Auf einzelnen Pages oder Posts können in den Post-Settings einer Seite kann das Layout > Content Container für Default, Full-Width & Contained eingestellt werden
  • Innerhalb des Editors gibt es für einzelne GB-Container-Blocks (und anderen Layout-Blöcken) 2 weitere Optionen, über die für Full-Width, Wide-Width & Contained Width eingestellt werden: Toolbar und Block-Settings

Weiterhin können im Customizer noch ein globales Container-Layout (One- oder Separate-Containers) sowie das Container-Alignment (Text oder Boxes) definiert werden.

Diese Flexibilität erfordert eine gewisse Disziplin und idealerweise auch ein Regelwerk, um sich bei der Entwicklung einer Website jederzeit im Klaren darüber zu sein, welche Auswirkungen der Einsatz diese verschiedenen Optionen auf das Layout haben, auch in Wechselwirkung zueinander.

In den nachfolgenden Bilderreihen zeige ich, wie sich verschiedene Einstellungen auf das Seiten-Layout auswirken, auch in Kombination von Einstellungen an den verschiedenen Stellen (Customizer, Post-Settings & Block-Settings).

In der ersten Reihe habe ich über den Customizer zunächst eine globale Container-Breite von 1020px, One-Container & Text-Alignment definiert:

Auf einer Page habe ich im Content eine Headline & einen Container (mit 100x & 40px Padding) eingestellt. Wie sich die 3 Post-Settings auf das Layout dieser Page auswirken, und zeige ich hier in der Galerie:

Post-Settings > Layout: Default (damit wirken die Customizer Layout-Settings)
Post-Settings > Layout: Full-Width (damit werden die Customizer Layout-Settings überschrieben)
Post-Settings > Layout: Contained (auch damit werden die Customizer Layout-Settings überschrieben)

Unterschied zwischen dem Standard-GeneratePress-Container und den Containern mit full-width, die du in GenerateBlocks verwenden kannst.

Body max-width 1920px & Customizer Container 1200px

Im Customizer können die Layouts & Schriftgrößen für Desktop, Tablet und Mobile global definiert werden. Für den Content-Container ist meistens eine maximale Breite von 1200px voreingestellt, allerdings gibt es keine Begrenzungsmöglichkeit für den „Outer-Content“ bzw. Body.

Wenn z.B. ein Hero-Header bzw. Full-Width-Content mittels Cover-Blocks oder GB-Container platziert wird, erstreckt sich dieser bis an die Ränder von größeren Screens, was extrem unproportional aussieht.

Eine Lösung hierfür ist, einen Site-Wrapper hinzuzufügen per Child-Theme und über CSS die Grenzen zu definieren. Aktuell gibt es jedoch einen Konflikt mit dem Header-Element in der Pro-Version von GP: Wenn die Hero-Sektion mit dem Header „mergen“ soll, sodass die Sektion sich bis zum oberen Rand erstreckt und hinter dem Logo und Nav-Menu angezeigt werden soll, kann dies nicht über „Merge“ im Header-Element umgesetzt werden. In dem Fall müsste für die Sektion eine negative Top-Margin über CSS deklariert werden, z.B. margin-top: -140px

Ressourcen