Sections

Sections sind die Bausteine einer Seite. Jede Section enthält Komponenten und hat eigene Styling-Optionen.

Endpunkte

Methode	Endpunkt	Beschreibung
`GET`	`/api/v1/editor/grid-sections-files`	Alle Sections auflisten
`POST`	`/api/v1/editor/grid-sections-files`	Neue Section erstellen
`GET`	`/api/v1/editor/grid-sections-files/{id}`	Einzelne Section abrufen
`PUT`	`/api/v1/editor/grid-sections-files/{id}`	Section aktualisieren
`DELETE`	`/api/v1/editor/grid-sections-files/{id}`	Section löschen

Das Section-Objekt

{
  "id": "sec_abc123",
  "pageId": "page_xyz789",
  "projectId": "proj_def456",
  "type": "hero",
  "name": "Hero Banner",
  "order": 0,
  "visible": true,
  "content": {
    "headline": {
      "de": "Willkommen",
      "en": "Welcome"
    },
    "subheadline": {
      "de": "Ihr Partner für digitale Lösungen",
      "en": "Your partner for digital solutions"
    },
    "cta": {
      "text": { "de": "Mehr erfahren", "en": "Learn more" },
      "link": "/about"
    }
  },
  "styles": {
    "backgroundColor": "#1a1a2e",
    "textColor": "#ffffff",
    "padding": {
      "top": 80,
      "bottom": 80
    },
    "backgroundImage": "https://cdn.codefluss.com/media/hero_bg.jpg",
    "backgroundOverlay": "rgba(0,0,0,0.5)"
  },
  "responsive": {
    "mobile": {
      "padding": { "top": 40, "bottom": 40 }
    }
  },
  "createdAt": "2026-01-12T10:00:00Z",
  "updatedAt": "2026-01-22T16:00:00Z"
}

Attribute

Attribut	Typ	Beschreibung
`id`	string	Eindeutige Section-ID
`pageId`	string	Zugehörige Seite
`projectId`	string	Zugehöriges Projekt
`type`	string	Section-Typ (z.B. `hero`, `features`, `cta`)
`name`	string	Anzeigename im Editor
`order`	integer	Reihenfolge auf der Seite
`visible`	boolean	Ob die Section sichtbar ist
`content`	object	Inhaltsdaten (mehrsprachig)
`styles`	object	Styling-Konfiguration
`responsive`	object	Responsive Anpassungen
`createdAt`	string	Erstellungszeitpunkt
`updatedAt`	string	Letzte Aktualisierung

Section-Typen

CODEFLUSS unterstützt verschiedene vordefinierte Section-Typen:

Typ	Beschreibung
`hero`	Hero-Banner mit Headline und CTA
`features`	Feature-Grid oder -Liste
`cta`	Call-to-Action Bereich
`testimonials`	Kundenstimmen-Karussell
`pricing`	Preistabelle
`faq`	FAQ-Akkordeon
`gallery`	Bildergalerie
`contact`	Kontaktformular
`text`	Freier Textbereich
`video`	Video-Embed
`custom`	Benutzerdefinierte Section

Sections auflisten

GET /api/v1/editor/grid-sections-files

Query-Parameter

Parameter	Typ	Default	Beschreibung
`pageId`	string	Pflicht	Seiten-ID
`visible`	boolean	–	Filter nach Sichtbarkeit

Beispiel-Response

{
  "success": true,
  "data": [
    {
      "id": "sec_001",
      "type": "hero",
      "name": "Hero Banner",
      "order": 0,
      "visible": true
    },
    {
      "id": "sec_002",
      "type": "features",
      "name": "Feature Grid",
      "order": 1,
      "visible": true
    },
    {
      "id": "sec_003",
      "type": "cta",
      "name": "Newsletter CTA",
      "order": 2,
      "visible": false
    }
  ]
}

Section erstellen

POST /api/v1/editor/grid-sections-files

Request-Body

{
  "pageId": "page_xyz789",
  "projectId": "proj_def456",
  "type": "features",
  "name": "Unsere Vorteile",
  "order": 1,
  "content": {
    "title": {
      "de": "Warum wir?",
      "en": "Why us?"
    },
    "items": [
      {
        "icon": "rocket",
        "title": { "de": "Schnell", "en": "Fast" },
        "description": { "de": "Blitzschnelle Ladezeiten", "en": "Lightning fast loading" }
      },
      {
        "icon": "shield",
        "title": { "de": "Sicher", "en": "Secure" },
        "description": { "de": "Höchste Sicherheitsstandards", "en": "Highest security standards" }
      }
    ]
  },
  "styles": {
    "backgroundColor": "#f8f9fa",
    "padding": { "top": 60, "bottom": 60 }
  }
}

Section aktualisieren

PUT /api/v1/editor/grid-sections-files/{id}

Inhalt aktualisieren

{
  "content": {
    "headline": {
      "de": "Aktualisierte Überschrift",
      "en": "Updated Headline"
    }
  }
}

Reihenfolge ändern

{
  "order": 2
}

Sichtbarkeit ändern

{
  "visible": false
}

Styles-Objekt

Das styles-Objekt unterstützt folgende Eigenschaften:

{
  "styles": {
    // Farben
    "backgroundColor": "#ffffff",
    "textColor": "#1a1a2e",
    "accentColor": "#3b82f6",
    
    // Hintergrund
    "backgroundImage": "url(...)",
    "backgroundSize": "cover",
    "backgroundPosition": "center",
    "backgroundOverlay": "rgba(0,0,0,0.3)",
    
    // Abstände
    "padding": {
      "top": 80,
      "right": 20,
      "bottom": 80,
      "left": 20
    },
    "margin": {
      "top": 0,
      "bottom": 0
    },
    
    // Layout
    "maxWidth": 1280,
    "alignment": "center",
    
    // Animation
    "animation": "fade-in",
    "animationDuration": 0.5,
    "animationDelay": 0
  }
}

Responsive-Objekt

Definieren Sie Breakpoint-spezifische Überschreibungen:

{
  "responsive": {
    "tablet": {
      "padding": { "top": 60, "bottom": 60 },
      "styles": {
        "textAlign": "center"
      }
    },
    "mobile": {
      "padding": { "top": 40, "bottom": 40 },
      "visible": true,
      "content": {
        "showDescription": false
      }
    }
  }
}

Breakpoints

Breakpoint	Bildschirmbreite
`desktop`	≥1280px
`laptop`	1024px - 1279px
`tablet`	768px - 1023px
`mobile`	<768px

Section duplizieren

Es gibt keinen direkten Duplikat-Endpunkt. Erstellen Sie stattdessen eine neue Section mit den Daten der bestehenden:

// 1. Bestehende Section abrufen
const original = await fetch(`/api/v1/editor/grid-sections-files/${sourceId}`);
const data = await original.json();

// 2. Neue Section erstellen
const duplicate = await fetch('/api/v1/editor/grid-sections-files', {
  method: 'POST',
  body: JSON.stringify({
    ...data.data,
    id: undefined,
    name: `${data.data.name} (Kopie)`,
    order: data.data.order + 1
  })
});

Section löschen

DELETE /api/v1/editor/grid-sections-files/{id}

Hinweis: Beim Löschen werden die order-Werte der nachfolgenden Sections automatisch angepasst.

Fehler

Code	Beschreibung
`400`	Ungültiger Section-Typ oder Content-Format
`401`	Nicht authentifiziert
`403`	Keine Berechtigung
`404`	Section nicht gefunden

Nächste Schritte

Media – Bilder für Sections hochladen
Design System – Styling-Werte definieren