Grid Sections

In der Grid Sections-Phase gestalten Sie wiederverwendbare Sektionsblöcke, die später zu vollständigen Seiten zusammengesetzt werden können. Hierbei setzen Sie das elementare Prinzip von CODEFLUSS ein: Alles ist zu 100% Grid-basiert.

Das Prinzip: What You See Is What You Get (WYSIWYG)

Im Gegensatz zu klassischen, stark verschachtelten Box-Modellen (Flexbox, Div-Container), verwenden wir ein absolutes CSS Grid System als Basis für den Canvas (Arbeitsbereich).

Dadurch können Sie per Drag-and-Drop Elemente punktgenau platzieren:

• Einfachheit: Es ist keine komplizierte Verschachtelung von Containern mehr nötig.
• Schnelligkeit: Positionieren Sie Elemente visuell exakt dort, wo sie stehen sollen.
• Responsivität: Das Grid-System erlaubt es Ihnen, für verschiedene Viewports (Desktop, Tablet, Mobile) die Positionierung und Größe der Elemente separat und gezielt anzupassen.

Funktionsweise: Drag & Drop

1. Komponenten finden: In der linken Seitenleiste ("Komponenten") finden Sie elementare Bausteine wie Text, Bild, Button etc.
2. Auf den Canvas ziehen: Ziehen Sie eine Komponente mit gedrückter Maustaste einfach in den Editor.
3. Im Grid platzieren: Der Canvas ist in Spalten unterteilt. Lassen Sie das Element an der gewünschten Grid-Position los.
4. Größe ändern: Ziehen Sie an den Rändern des Elements, um es über mehrere Grid-Spalten zu spannen.

Dieses System garantiert, dass Ihre Layouts absolut standardkonform bleiben, selbst wenn Sie völlig asymmetrische und moderne Layouts entwerfen !

Viewport Management

Am oberen Rand des Editors finden Sie die Viewport-Steuerung:

• Desktop
• Tablet
• Mobile

Schalten Sie zwischen den Viewports hin und her, um die Positionierung der Komponenten in der Grid Section für jede Größe feinzujustieren. Änderungen an der Positionierung in der mobilen Ansicht beeinflussen das Desktop-Layout nicht.

Das System speichert die Layouts auf dem "Draft vs Save"-Prinzip lokal ab, damit Sie Layouts ohne Risiko ausprobieren können. Lesen Sie im Layouts Überblick mehr über den reibungslosen Speicherzyklus unserer Plattform.