WBCE CMS Forum

rudi222

Developer

Modul für flexibles Layout 2.0 - FlexSection

Hallo Zusammen,

möchte hier meine Weiterentwicklung des Moduls FlexLayout zum neuen Modul FlexSection mit Euch teilen.

Ich habe versucht die Erkenntnisse von FlexLayout und die geplanten Verbesserungen in das neue Modul  umzusetzen.

Nach einigen Stunden der Entwicklung mit Chat-GPT und kaum nutzbaren Ergebnissen, habe ich das Modul dann mit Claude gebaut. Nach kurzer intensiver Planung konnte Claude mir bereits nach ca. 1,5 Std schon ein benutzbares Modul liefern.

Hier die Readme (nicht ganz aktuell)

FlexSection
Version: 0.1.7 
Plattform: WBCE CMS 1.5.x 
PHP: 8.x 
Lizenz: MIT
---
Was ist FlexSection?
FlexSection ist ein WBCE-Sections-Modul für flexible Inhaltsbereiche. Eine Modulinstanz entspricht genau einem Bereich auf der Seite – mit konfigurierbarem Spalten-Layout, Hintergrund-Optionen und responsiver Steuerung.
FlexSection ist kein Page Builder. Es ergänzt das klassische WBCE-Abschnitts-System um moderne Layout-Möglichkeiten, ohne die gewohnte Arbeitsweise zu verändern.
---
Features
1–5 Spalten pro Bereich, dynamisch hinzufügbar und entfernbar
Preset-Breiten (50/50, 60/40, 33/33/33 usw.) plus freie Prozentwerte
Responsive Breiten pro Spalte für Desktop, Tablet und Mobil
Reihenfolge-Steuerung für Tablet und Mobil (CSS `order`)
Vier Layout-Modi: Boxed, Fullwidth, Fullwidth bis Rand
Fullwidth: konfigurierbarer Max-Breite und Seitenabstand
Hintergrund: Farbe, Bild, Position, Größe, Wiederholung
Overlay: Farbe und Deckkraft (wird nur angezeigt wenn ein Hintergrundbild gesetzt ist)
Innenabstände (Padding) oben/unten für die Section und pro Spalte
Vertikale Ausrichtung der Spalten (stretch, oben, mitte, unten)
Spaltenabstand (Gap) separat für Desktop, Tablet und Mobil
WYSIWYG-Editor pro Spalte (nutzt den in WBCE konfigurierten Editor)
CSS-ID und CSS-Klassen für Section und Spalten
Sauberes BEM-HTML ohne überflüssige Wrapper
Keine PHP-`calc()`-Berechnungen – Layoutlogik liegt im CSS
---
Installation
ZIP-Datei im WBCE-Adminbereich unter Erweiterungen → Module hochladen
Modul installieren
Auf einer Seite unter Seiten → Bearbeiten einen neuen Abschnitt mit dem Modul FlexSection anlegen
---
Deinstallation
Unter Erweiterungen → Module → FlexSection → Deinstallieren. Dabei werden alle gespeicherten Daten aus der Datenbank entfernt.
---
Backend – Bedienung
Tab „Basis"
Allgemein
Titel / Bezeichnung (intern, erscheint nicht im Frontend)
CSS-ID (für Anker-Links, z.B. `#hero`)
Zusätzliche CSS-Klassen
Layout
Layoutmodus wählen (Boxed / Fullwidth / Fullwidth bis Rand)
Bei Fullwidth: Max-Breite des Inhalts und Seitenabstand einstellbar
Innenabstand oben / unten (Preset-Größen XS–XL)
Spaltenabstand (Gap) separat für Desktop, Tablet, Mobil
Spalten-Konfiguration
Preset wählen oder individuelle Breiten eingeben
Grafische Vorschau der Spaltenverteilung
Responsive Breiten: Desktop / Tablet / Mobil pro Spalte
Reihenfolge für Tablet und Mobil (1 = zuerst, leer = Dokumentreihenfolge)
Vertikale Ausrichtung der Spalten
Hintergrund
Hintergrundfarbe (Colorpicker + Hex-Eingabe)
Hintergrundbild (URL-Pfad)
Größe, Position, Wiederholung
Overlay-Farbe und Deckkraft (erscheint nur bei gesetztem Hintergrundbild)
Tabs „Spalte 1", „Spalte 2", …
Pro Spalte gibt es einen eigenen Tab mit:
Spaltenname (wird als Tab-Bezeichnung verwendet)
CSS-Klasse
Innenabstand oben / unten
WYSIWYG-Editor für den Inhalt
Spalten hinzufügen / entfernen
Mit den + und − Buttons in der Tab-Leiste. Das Formular wird automatisch gespeichert und die Seite neu geladen – der neue Tab ist direkt aktiv.
---
Frontend – CSS-Struktur
FlexSection nutzt BEM-Klassennamen und CSS Custom Properties:
```html
<section class="fs-row fs-row--full" id="hero" style="--fs-gap-d:24px; ...">
    <div class="fs-row__bg"></div>
    <div class="fs-row__overlay"></div>
    <div class="fs-row__inner">
        <div class="fs-col fs-w-60 fs-w-t-100 fs-w-m-100">
            <!-- Inhalt Spalte 1 -->
        </div>
        <div class="fs-col fs-w-40 fs-w-t-100 fs-w-m-100">
            <!-- Inhalt Spalte 2 -->
        </div>
    </div>
</section>
```
CSS Custom Properties (Template-Überschreibung)
```css
/* Breakpoints (Standard) */
/* Tablet: 1024px, Mobil: 768px – werden von view.php im <head> ausgegeben */

/* Max-Breite für Boxed und Fullwidth-Inhalt */
.fs-row { --fs-max-width: 1200px; }

/* Äußerer Seitenabstand */
.fs-row { --fs-outer-pad: 20px; }
```
---
Technische Hinweise
Daten werden als JSON in einer einzelnen Datenbankspalte gespeichert
Das Frontend-CSS (`frontend.css`) wird einmalig pro Seite eingebunden
Breakpoint-Styles werden einmalig im `<head>` ausgegeben
Keine Abhängigkeit von jQuery oder anderen JS-Bibliotheken im Frontend
Backend nutzt eigenes Tab-System ohne EasyTabs
---
Dateistruktur
```
flexsection/
├── info.php              Modulinfo
├── install.php           Datenbanktabelle anlegen
├── uninstall.php         Datenbanktabelle entfernen
├── upgrade.php           Migrationsskript
├── add.php               Neuen Datensatz anlegen
├── delete.php            Datensatz löschen
├── modify.php            Backend-Logik
├── save.php              Speicherlogik
├── view.php              Frontend-Logik
├── backend.css           Backend-Styles
├── frontend.css          Frontend-Styles
├── languages/
│   ├── DE.php            Deutsche Texte
│   └── EN.php            Englische Texte
└── templates/
    ├── modify.tpl.php    Backend-Template
    └── view.tpl.php      Frontend-Template
```
---
Lizenz
MIT License – freie Verwendung, Veränderung und Weitergabe erlaubt.

Wie immer gerne Kritik, Fehlermeldungen und Änderungswünsche.

Gruß Rudi

florian

Administrator

Re: Modul für flexibles Layout 2.0 - FlexSection

Cooles Teil. Funktioniert reibungslos.
Eine search.php wäre noch gut, damit darin hinterlegte Inhalte auch über die Website-Suche gefunden werden.

Momentan erzeugt es noch Debug-Ausgaben im Errorlog.

[19-May-2026 05:58:00 UTC] FlexSection save: section_id=67 cols=3 action=update
[19-May-2026 05:58:16 UTC] FlexSection save: section_id=67 cols=3 action=update
[19-May-2026 06:00:25 UTC] FlexSection save: section_id=68 cols=2 action=update
[19-May-2026 06:00:28 UTC] FlexSection save: section_id=68 cols=3 action=update
[19-May-2026 06:00:30 UTC] FlexSection save: section_id=68 cols=4 action=update
[19-May-2026 06:01:23 UTC] FlexSection save: section_id=68 cols=4 action=update

---

Nicht ärgern. Nur wundern.

rudi222

Developer

Re: Modul für flexibles Layout 2.0 - FlexSection

search.php kommt auf die ToDo-Liste.

Hier die aktuelle Version.

Neuerungen:
0.3.30 – Hex-Eingabe bei Farbpickern + Spalten-Hintergrund
0.3.31 – Boxed-Offset für Spalten-Padding
0.3.33 – Spalten-Padding pro Breakpoint
0.3.37 – Standard-Seitenabstand auf 0px
0.3.38 – Einheitliches Breakpoint-System
0.3.39 – Umfangreiche UI-Überarbeitung + neue Sprachen
0.3.40 - 0.3.43 - diverse UI-Fixes
0.3.44 – Parallax-Effekt für Hintergrundbild
0.3.46 – 0.3.50 – Parallax-Höhe Bugfixes

florian

Administrator

Re: Modul für flexibles Layout 2.0 - FlexSection

Das sehr aufgeräumt aus funktioniert auch schon ganz gut.

Der Colorpicker pickt zwar, der Wert wird aber nicht übernommen.

Vielleicht auch eher einen Browser-Colorpicker (jquery o.ä.) statt den Betriebssystem-CP einbinden. Vielleicht so wie beim Modul News with Images > Eepertenmodus > Tags > Tag bearbeiten.

Hinsichtlich der Struktur, wie das derzeit in der DB gespeichert wird, - derzeit werden Spaltenformatierung und Spalteninhalt zusammen gespeichert. Das wird es schwer machen, ansehnliche Suchergebnisse zu generieren. Wir arbeiten an einre neuen SuFu für WBCE 1.7, da würden dann, wenn nur wenig Text in der jeweiligen Spalte ist, auch Formatanweisungen zumindest anteilig ausgegeben. Auch bei der klassischen Suche wird das voraussichtlich so sein.

Last edited by florian (21.05.2026 08:16:01)

---

Nicht ärgern. Nur wundern.

rudi222

Developer

Re: Modul für flexibles Layout 2.0 - FlexSection

Danke für die Hinweise!