Codefluss Logo

Page Builder

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:

AreaPurpose
OverviewProject dashboard with settings, domain, and activity log
PlanningStoryBrand Framework (SB7) for your website strategy
DesignDesign system with colors, typography, effects, and animations
LayoutCreate grid sections and build page structure
ComponentsThe basic building blocks of your website (Text, Images, Buttons, Forms, CMS)
ContentInsert text, format details, and define SEO metadata
MaintenanceAnalytics 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.com or 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, /blog for 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:

ProjectTypePathFull URL
HomepageLanding Page/https://my-company.codefluss.com/
BlogBlog/bloghttps://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:

  1. Run Planning: Define your website strategy with the StoryBrand Framework
  2. View Design System: Configure colors, fonts, and styles
  3. Create Layout: Build your page structure with Grid Sections
  4. Utilize Components: Learn everything about the content building blocks
  5. 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.