WBCE CMS Forum

rudi222

Member

FlexLayout - Modul zur flexiblen Layout-Gestaltung

Hallo zusammen,
hier möchte ich ein Modul zur flexiblen Layouterstellung vorstellen.

Da ich das "Basteln" von Webseiten nur als zweites Hobby mache, ist das Modul aus der Not geboren. Wie bekomme ich eine ansehnliche Webseite, ohne mich Tagelang mit Grid-Systemen und CSS-Codieren rumzuärgern.
Ich habe meine Vorstellungen ChatGPT mitgeteilt und nach überschaubarer Zeit ist das Modul „FlexLayout“ herausgekommen.

Ich denke, das Modul ist weitgehend selbsterklärend. Hier eine kurze Beschreibung:

Reihen:
Im Modul können Reihen angelegt werden. Jede Reihe kann als Typ „Boxed“ oder „Fullwidth“ gewählt werden. Es kann eine Hintergrundfarbe für die Reihe angelegt werden. Die Abstände oben/unten (in px), die Ränder links/rechts und die Abstände zwischen den Spalten können definiert werden (in px oder %).

Spalten:
In der Reihe können mehrere Spalten angelegt werden. In den Spalten kann ein oder mehrere Abschnitte (Sections) eingefügt werden. Die Abschnitte können per DragnDrop verschoben werden (auch in andere Spalten). Die Breite der Spalten (in px oder %) können definiert werden. Die Rehenfolge der Spalten bei den Responsive-Breakpoints können definiert werden.
Die einfügbaren Abschnitte müssen auf der selben Seite angelegt werden.

Reihen-Typen:
Type „Boxed“ sollte mit jedem Template funktionieren. Type „Fullwidth“ benötigt ein Template mit einem Block. Bei meinen Tests haben diese Templates funktioniert: acourdesz, caminar-wbce, capacity, intensivstation, LLook-01, nexus-responsive, verti-blue, webezeheh und zweinullig.
Ich habe einige Templates (z.B. darkspace) mit wenig Aufwand anpassen können.

Wünsche viel Spass bein testen.

Viele Grüße
Rudi

florian

Administrator

Re: FlexLayout - Modul zur flexiblen Layout-Gestaltung

Die einfügbaren Abschnitte müssen auf der selben Seite angelegt werden.

...und dem Block "nicht zeigen" o.ä. zugeordnet sein, sonst erscheinen sie logischerweise einmal im Flexlayout und einmal stumpf untereinander ;-)
Sollte es im Template keinen solchen Block geben, in der info.php des Templates

$block[99]='nicht zeigen';

ergänzen - das war es schon.

Mit PHP 8.4 kommt es zu folgender Deprecated-Meldung im Errorlog:

2026-02-14T12:14:57+00:00 [Deprecated] /modules/flexlayout/ajax_render.php:[154] from /modules/flexlayout/ajax_render.php:[324] fl_render_section "Creation of dynamic property Frontend::$section_id is deprecated"

Noch eine Frage zum Layout "Fullwidth" - welche Anpassungen sind dafür konkret erforderlich? Bei "Darkspace" hängt der FW-Bereich zu weit links (teilweise nicht sichtbar, rechts Lücke) und bei WBCETik/WBCEZon zu weit rechts.

Last edited by florian (14.02.2026 13:39:24)

---

Sorgen sind wie Nudeln: man macht sich meist zu viele.

rudi222

Member

Re: FlexLayout - Modul zur flexiblen Layout-Gestaltung

Beim Template Darkspace muss der Block [2] raus. Dann passt es. Zur zeit geht es nur bei Templates mit einem Block bzw. wenn nur ein Block ausgegeben wird.

Der Layout-Typ Fullwidth spannt sich über die berechnete Bildschirmbreite:
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
Das scheint aber noch nicht bei allen Templates zu funktionieren. Das muss ich nochmal prüfen ...

Bei Templates mit seitlicher Begrenzung wie WBCETik macht der Layout-Typ Fullwidth keinen Sinn bzw war auch nicht dafür gedacht.
Mir ging es darum bei Templates wie capacity die volle Bildschirmbreite nutzen zu können.

rudi222

Member

Re: FlexLayout - Modul zur flexiblen Layout-Gestaltung

Unten nochmal eine aktualisierte Version. Jetzt funktioniert das Fullwidth ohne Änderung der Blöcke.

Desweiteren kann man die Responsive-Breakpoints für Tablet und Mobile definieren.

Last edited by rudi222 (15.02.2026 07:09:02)

florian

Administrator

Re: FlexLayout - Modul zur flexiblen Layout-Gestaltung

Oha, das hat sich ja ordentlich verändert.
Fullwidth funktioniert jetzt ohne Versprünge und der Deprecated-Hinweis ist auch weg.

Anmerkung - das jetzt bitte nicht als Kritik verstehen: Der Content wird im Frontend ja per Ajax reingeladen.
Mit geblocktem JavaScript sieht man also nix.
Auch in Punkto SEO sowie Accessibility könnte das möglicherweise von Nachteil sein.

Last edited by florian (15.02.2026 08:25:02)

---

Sorgen sind wie Nudeln: man macht sich meist zu viele.

rudi222

Member

Re: FlexLayout - Modul zur flexiblen Layout-Gestaltung

Danke für die Anmerkungen. Der Funktionsumfang ist für mich erstmal Ausreichend. Dann steht jetzt das Serverseitige rendern ohne ajax an.

rudi222

Member

Re: FlexLayout - Modul zur flexiblen Layout-Gestaltung

Hier nochmal ein Update:

Für "Fullwidth" getestete Templates: Acourdesz, capacity, distinctive, fg-grey, intensivstation, King Content, LLook-01, nexus responsive, solid-state, Verti-Blue, WeBeCeEh (eingeschränkt), zweinullig.

Changelog:

1.6.2.2 - 17.02.2026
- Breakpoint inputs fixed
- Tablet/Mobile side padding fixed (SSR)
- Stable baseline

1.6.2.1
- SSR-first (Content ohne JS sichtbar)
- Ajax nur noch Fallback
- Kein Fullwidth-Portal
- Templates mit Sidebar offiziell “nicht supported”
- Frontend/Backend stabil
- Accordion / Module funktionieren

FlexLayout 1.6.2.2 – Template-Vorgaben

FlexLayout ist ein Layout-Modul, das eigene Rows/Columns rendert (boxed/fullwidth) und andere WBCE-Sections darin ausgibt. Damit das zuverlässig funktioniert, müssen Templates ein paar Bedingungen erfüllen.

Unterstützter Template-Typ

Unterstützt: Templates mit einem Content-Block (Block 1).
Nicht unterstützt: Templates mit fester Seitenspalte (Block 2), wenn diese im Layout mitläuft.
Wenn FlexLayout genutzt wird, muss die Sidebar im Template entfernt/abgeschaltet werden.

Pflicht: Ausgabe der Inhalte
Das Template muss mindestens Block 1 ausgeben, klassisch:

```php
<?php echo page_content(1); ?>
```

Weitere Blöcke (z.B. Headerbilder Block 3) sind ok, solange sie nicht das Content-Layout seitlich verschieben oder einklemmen.

## Layout-Container: was erlaubt ist

Der Container, in dem `page_content(1)` liegt, darf die Breite normal begrenzen (z.B. `max-width` für boxed Inhalte). FlexLayout macht fullwidth selbst.

✅ ok:

* `max-width: ...`
* `margin: 0 auto`
* normale `padding-left/right` für boxed Layout

❌ nicht ok (typische Fullwidth-Killer):

* `overflow-x: hidden/auto/scroll` auf `html`, `body` oder dem Haupt-Wrapper
* `transform` (auch `transform: translateZ(0)`) auf einem Parent-Container von `page_content(1)`
* `position: relative` + negative Offsets / ungewöhnliche `left/right` Konstrukte, die den Content verschieben
* feste Grid-Layouts, die Block 1 und Block 2 zusammen als “Gesamtbreite” behandeln

## Fullwidth-Vorgabe

Fullwidth funktioniert zuverlässig nur, wenn der Content nicht “geclippt” oder in einem transformierten Parent steckt.

Wichtig:

* `body` sollte keinen seitlichen Margin haben (`body { margin:0; }`)
* horizontales Clipping muss aus sein (kein `overflow-x:hidden` am Body/Wrapper)

Wenn ein Template zwingend `overflow-x:hidden` braucht (wegen eigener Effekte), ist Fullwidth nicht garantiert.

CSS-Konflikte vermeiden

Templates dürfen FlexLayout-Elemente nicht global überschreiben. Besonders kritisch:

* `.fl-row-inner` darf nicht auf `display:block`/`display:grid` gesetzt werden
* `.fl-col` darf nicht global `width:100%` oder `float:left` bekommen

Wenn das Template sehr “aggressives” CSS hat (z.B. `div { width:100% }` oder `.row > div { float:left }`), muss es angepasst werden.

Empfehlung: “FlexLayout-kompatibler” Template-Modus

Wenn du ein Template “kompatibel” machen willst:

1. Sidebar/Block2 entfernen oder komplett deaktivieren
2. `overflow-x` nicht blockieren
3. keinen `transform` auf Wrapping-Containern um `page_content(1)`
4. globale Layout-Regeln nicht auf `.fl-*` anwenden

---

Kurzfassung für Tester

* FlexLayout braucht 1-Spalten-Templates (ohne Sidebar).
* Fullwidth geht nur ohne `overflow-x:hidden`/`transform` um den Content.
* Wenn Spalten untereinander landen: Template-CSS überschreibt FlexLayout.

---