Page Builder

Der Page Builder ist das Herzstück von CODEFLUSS. Hier erstellen, verwalten und veröffentlichen Sie Ihre Websites. Wenn Sie ein Projekt im Editor öffnen, landen Sie zuerst auf der Übersicht — dem zentralen Dashboard für Ihr Projekt.

Editor-Bereiche

Der Editor ist in sechs Hauptbereiche unterteilt, die über die Seitennavigation erreichbar sind:

Bereich	Zweck
Übersicht	Projekt-Dashboard mit Einstellungen, Domain und Aktivitätslog
Planung	StoryBrand-Framework (SB7) für Ihre Website-Strategie
Design	Design System mit Farben, Typografie, Effekten und Animationen
Layout	Grid Sections erstellen und Seitenstruktur aufbauen
Komponenten	Die Werkzeuge Ihrer Website (Texte, Bilder, Buttons, Formulare, CMS)
Content	Finale Inhalte einpflegen, formatieren und SEO-Metadaten hinterlegen
Wartung	Analyse und technische Wartung

Dieser Workflow führt Sie Schritt für Schritt von der Strategie bis zur fertigen Website.

Die Übersicht (Editor Dashboard)

Wenn Sie ein Projekt im Editor öffnen, sehen Sie drei Panels nebeneinander:

1. Projektübersicht (links)

Zeigt die wichtigsten Informationen zu Ihrem Projekt auf einen Blick:

Projektname: Der Name, den Sie beim Erstellen vergeben haben
Projekt-ID: Eindeutige Kennung für technische Zwecke
Status: Aktiv, Archiviert oder Entwurf
Projekttyp: z.B. Landing Page, Blog
Erstellungsdatum und letztes Update
Bearbeiten: Öffnet einen Dialog, um den Projektnamen und die Beschreibung zu ändern
Löschen: Entfernt das Projekt dauerhaft (mit Bestätigungs-Dialog)

2. Projekteinstellungen (Mitte)

Hier konfigurieren Sie, wie und wo Ihr Projekt im Web erreichbar ist. Dieser Bereich hat drei Abschnitte:

Website-Konfiguration

Domain: Die Domain, unter der Ihre Website veröffentlicht wird (z.B. mein-unternehmen.codefluss.com oder Ihre eigene Domain)
SSL: Zeigt an, ob HTTPS aktiv ist (standardmäßig aktiviert)
Bereitstellungsstatus: Online, Offline oder Wartungsmodus

Projektpfad-Konfiguration

Der Projektpfad bestimmt, unter welcher URL Ihr Projekt erreichbar ist. Das ist besonders wichtig, wenn Sie mehrere Projekte unter einer Domain betreiben:

Projektpfad: Der Pfad nach der Domain (z.B. / für die Startseite, /blog für ein Blog-Projekt)
Vollständige URL: Zeigt die komplette URL an, z.B. https://mein-unternehmen.codefluss.com/blog
Bearbeiten: Klicken Sie auf „Bearbeiten", um den Pfad zu ändern. Er muss mit / beginnen.
URL kopieren: Kopiert die vollständige URL in die Zwischenablage
Seite öffnen: Öffnet die veröffentlichte Website in einem neuen Tab

Beispiel für mehrere Projekte:

Projekt	Typ	Pfad	Vollständige URL
Startseite	Landing Page	`/`	`https://mein-unternehmen.codefluss.com/`
Blog	Blog	`/blog`	`https://mein-unternehmen.codefluss.com/blog`

Projekt aktiv schalten

Der „Projekt aktiv"-Schalter bestimmt, ob Ihr Projekt öffentlich erreichbar ist:

Aktiv (Schalter ein): Das Projekt ist unter der konfigurierten URL öffentlich zugänglich
Inaktiv (Schalter aus): Das Projekt ist nicht öffentlich erreichbar — ideal für Projekte, die noch in Arbeit sind

Tipp: Sie können an Ihrem Projekt arbeiten, während es inaktiv ist. Schalten Sie es erst aktiv, wenn es bereit zur Veröffentlichung ist.

Entry Page (Startseite)

Wenn Ihr Projekt mehrere Seiten hat, legen Sie hier fest, welche Seite als Startseite angezeigt wird, wenn ein Besucher den Projektpfad aufruft. Diese Seite wird unter dem konfigurierten Projektpfad angezeigt.

Hinweis: Sie müssen zuerst eine Seite im Editor erstellen, bevor Sie eine Entry Page auswählen können.

Projekttyp

Zeigt den Typ Ihres Projekts an (z.B. Landing Page, Blog). Der Projekttyp wird bei der Erstellung festgelegt und bestimmt, welche Editor-Funktionen und Phasen verfügbar sind.

3. Aktivität (rechts)

Das Aktivitäts-Panel zeigt den Audit-Log Ihres Projekts — eine chronologische Liste aller Änderungen und Ereignisse:

Wer hat wann was geändert?
Einstellungsänderungen
Veröffentlichungen und Statusänderungen

Über den Button „Alle Audit-Logs anzeigen" können Sie die vollständige Historie einsehen.

Nächste Schritte

Nachdem Sie sich einen Überblick verschafft haben, können Sie mit dem nächsten Schritt beginnen:

Planung durchführen: Definieren Sie Ihre Website-Strategie mit dem StoryBrand-Framework
Design System ansehen: Konfigurieren Sie Farben, Schriften und Styles
Layout erstellen: Bauen Sie Ihre Seitenstruktur mit Grid Sections auf
Komponenten einsetzen: Lernen Sie alles über die Inhaltsbausteine kennen
Content und SEO pflegen: Füllen Sie Ihre Seiten mit formatierten Inhalten und optimieren Sie diese für Suchmaschinen

Verfügbarkeit

Die Übersicht ist in allen Plänen verfügbar — auch im Free-Plan. Einige erweiterte Funktionen wie die Planung (SB7) sind ab dem Essentials-Plan verfügbar.

Details zu den Plänen finden Sie unter Abonnement.