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 14: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 08: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 09: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.

---

Slugger

Developer

Re: FlexLayout - Modul zur flexiblen Layout-Gestaltung

Weil ich das gerade am testen bin.

FlexLayout 1.6.2.2 — PHP 8.5 Bugfix
ajax_render.php · Stand: 23. März 2026

Modul

FlexLayout — Modul zur flexiblen Layout-Gestaltung
Autor: rudi222
Forum: FlexLayout Entwicklungs-Thread

Fehlermeldung (Florian, 14.02.2026)

[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"

Ursache

PHP 8.2+ deprecates das dynamische Setzen von Properties auf Klassen die diese nicht deklarieren.
In ajax_render.php wurde $GLOBALS['wb']->section_id direkt gesetzt ohne vorher zu prüfen ob die Property existiert.

render_ssr.inc.php hatte denselben Fix bereits korrekt mit property_exists() — ajax_render.php war nicht konsistent.

Fix — ajax_render.php

// vorher
if (isset($GLOBALS['wb']) && is_object($GLOBALS['wb'])) {
    $GLOBALS['wb']->section_id = $sid;
}

// nachher
if (isset($GLOBALS['wb']) && is_object($GLOBALS['wb']) && property_exists($GLOBALS['wb'], 'section_id')) {
    $GLOBALS['wb']->section_id = $sid;
}

Ergebnis

"Great news. No errors reported" — kein Eintrag im Errorlog nach dem Fix.
Getestet mit 2-Spalten-Layout, Boxed-Modus, Template WBCEZon.

Umgebung

• FlexLayout Version: 1.6.2.2

• WBCE: 1.6.5

• PHP: 8.5.2

Last edited by Slugger (23.03.2026 23:09:59)

---

Hoster: ALL-INKL *** Grundsätzliche WBCE Konfig ***
WBCE: 1.6.5 • BE: 2.1.0 • PHP: 8.x * Alle • BE: Argos
Status Projekt 1-4:  OK

Slugger

Developer

Re: FlexLayout - Modul zur flexiblen Layout-Gestaltung

FlexLayout — Feedback & Entwicklungsvorschläge
Konstruktives Feedback · März 2026

Hallo rudi222,

zunächst ein großes Dankeschön für FlexLayout!
Eine sehr gute Idee, ein Layout-Modul das ohne Bootstrap auskommt, responsive ist und
trotzdem keine Template-Änderung erfordert.
Wir haben es ausgiebig getestet und möchten dir ein paar
konstruktive Gedanken mitgeben, damit chatGPT das noch einmal vergleichen kann.
Vielleicht kommt er zum selben Ergebnis.

Was bereits sehr gut funktioniert

• SSR-First Ansatz — Inhalte ohne JavaScript sichtbar ✅

• Drag & Drop im Backend — intuitiv bedienbar ✅

• Boxed und Fullwidth Reihen — flexibel einsetzbar ✅

• Responsive Breakpoints konfigurierbar ✅

• Kein Bootstrap nötig — läuft mit jedem Template ✅

Was uns also Claude und mir aufgefallen ist

1. Inline-CSS ist sehr komplex

Der aktuelle Output erzeugt sehr lange Inline-Styles mit verschachtelten CSS Custom Properties:

--fl-col-w:calc((100% - (1 * var(--fl-gap-active, var(--fl-gap, var(--fl-gap-default))))) * 50 / 100)

Das funktioniert — ist aber schwer lesbar, schwer debuggbar und
gibt Designern wenig Angriffsfläche für eigene Anpassungen.

2. CSS-Klassen als Gestaltungshooks fehlen

Das Modul gibt feste Klassen aus (fl-row, fl-col, fl-embedded usw.)
aber es fehlen optionale Modifier-Klassen die der Redakteur im Backend wählen kann —
z.B. für Kachel-Design, Hero-Bereich oder Info-Box.

Entwicklungsvorschläge

Vorschlag 1 — Inline-CSS vereinfachen

Spaltenbreiten als direkte CSS-Werte statt verschachtelter Custom Properties:

/* einfacher, klarer, wartbarer */
.fl-col { width: 50%; }

Vorschlag 2 — Modifier-Klassen im Backend wählbar machen

Optionales Klassen-Feld je Reihe und Spalte im Backend:

• Reihe: z.B. fl-row--highlight, fl-row--hero, fl-row--card

• Spalte: z.B. fl-col--card, fl-col--center

Designer steuert dann das Aussehen zentral per CSS — Redakteur wählt nur die Klasse.
Das entspricht exakt dem WBCE-Prinzip: Inhalt und Design trennen.

Vorschlag 3 — frontend.css ausbauen

Sinnvolle Basis-Styles mitliefern damit das Modul "out of the box" schön aussieht:

/* Beispiel Basis-Styles */
.fl-col { box-sizing: border-box; }
.fl-row--highlight { background: #f0f4f8; padding: 2rem 0; }
.fl-col--card { background: #fff; border-radius: 8px; padding: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,.1); }

Vorschlag 4 — Dokumentation der CSS-Klassen

Eine kurze Übersicht welche Klassen das Modul ausgibt und
wie Designer sie nutzen können — das macht FlexLayout
für Template-Bauer und Agenturen viel attraktiver.

Mein Plan

Ich habe das Modul gerade als Testlauf in einem aktuellen Projekt und arbeite die Vorschläge schrittweise durch.

Danke für deine Arbeit.

März 2026

---

Hoster: ALL-INKL *** Grundsätzliche WBCE Konfig ***
WBCE: 1.6.5 • BE: 2.1.0 • PHP: 8.x * Alle • BE: Argos
Status Projekt 1-4:  OK

rudi222

Member

Re: FlexLayout - Modul zur flexiblen Layout-Gestaltung

Hallo Slugger,

herzlichen Dank für Deinen Beitrag und das Feedback.

Leider bin ich in den letzten Wochen aus Zeitgründen nicht viel weiter gekommen.
Punkt 2: Die CSS-Klassen im Backend sind aber aktuell schon umgesetzt. Werde es zeitnah hier einstellen.

Danke und Gruß
Rudi