Page Builder
The Page Builder is the core of CODEFLUSS. Here you create, manage, and publish your websites. When you open a project in the editor, you first land on the Overview — the central dashboard for your project.
Editor Areas
The editor is divided into six main areas, accessible from the sidebar navigation:
| Area | Purpose |
|---|---|
| Overview | Project dashboard with settings, domain, and activity log |
| Planning | StoryBrand Framework (SB7) for your website strategy |
| Design | Design system with colors, typography, effects, and animations |
| Layout | Create grid sections and build page structure |
| Components | The basic building blocks of your website (Text, Images, Buttons, Forms, CMS) |
| Content | Insert text, format details, and define SEO metadata |
| Maintenance | Analytics and technical maintenance |
This workflow guides you step by step from strategy to finished website.
The Overview (Editor Dashboard)
When you open a project in the editor, you see three panels side by side:
1. Project Overview (left)
Shows the most important information about your project at a glance:
- Project Name: The name you assigned during creation
- Project ID: Unique identifier for technical purposes
- Status: Active, Archived, or Draft
- Project Type: e.g., Landing Page, Blog
- Creation Date and Last Update
- Edit: Opens a dialog to change the project name and description
- Delete: Permanently removes the project (with confirmation dialog)
2. Project Settings (center)
Here you configure how and where your project is accessible on the web. This area has three sections:
Website Configuration
- Domain: The domain where your website is published (e.g.,
my-company.codefluss.comor your custom domain) - SSL: Shows whether HTTPS is active (enabled by default)
- Deployment Status: Online, Offline, or Maintenance Mode
Project Path Configuration
The project path determines the URL under which your project is accessible. This is especially important when you run multiple projects under one domain:
- Project Path: The path after the domain (e.g.,
/for the homepage,/blogfor a blog project) - Full URL: Shows the complete URL, e.g.,
https://my-company.codefluss.com/blog - Edit: Click "Edit" to change the path. It must start with
/. - Copy URL: Copies the full URL to the clipboard
- Open Page: Opens the published website in a new tab
Example for multiple projects:
| Project | Type | Path | Full URL |
|---|---|---|---|
| Homepage | Landing Page | / | https://my-company.codefluss.com/ |
| Blog | Blog | /blog | https://my-company.codefluss.com/blog |
Activating Your Project
The "Project Active" toggle determines whether your project is publicly accessible:
- Active (toggle on): The project is publicly accessible at the configured URL
- Inactive (toggle off): The project is not publicly accessible — ideal for projects still in progress
Tip: You can work on your project while it's inactive. Only activate it when it's ready for publication.
Entry Page (Homepage)
If your project has multiple pages, you set here which page is displayed as the homepage when a visitor accesses the project path. This page is shown at the configured project path.
Note: You must first create a page in the editor before you can select an entry page.
Project Type
Displays your project's type (e.g., Landing Page, Blog). The project type is set during creation and determines which editor features and phases are available.
3. Activity (right)
The activity panel shows the audit log of your project — a chronological list of all changes and events:
- Who changed what and when?
- Settings changes
- Publications and status changes
Use the "View All Audit Logs" button to see the complete history.
Next Steps
After getting an overview, you can start with the next step:
- Run Planning: Define your website strategy with the StoryBrand Framework
- View Design System: Configure colors, fonts, and styles
- Create Layout: Build your page structure with Grid Sections
- Utilize Components: Learn everything about the content building blocks
- Add Content & SEO: Fill your pages with perfectly formatted text and optimize them for search engines
Availability
The overview is available in all plans — including the Free plan. Some advanced features like Planning (SB7) are available from the Essentials plan onwards.
For plan details, see Subscription.