Das schlanke CMS für statische Websites, das deine Kunden bearbeiten können.
Füge ColbeEdit zu jeder bestehenden HTML-Website hinzu und gib Kunden eine sichere, gezielte Möglichkeit, Texte und Bilder zu aktualisieren — ohne WordPress, Datenbank oder das Risiko, das Design zu beschädigen.
Sieh es in Aktion
ColbeEdit platziert die Bearbeitungswerkzeuge direkt auf der Live-Seite, sodass Kunden kein klassisches CMS-Dashboard erlernen müssen.
Willkommen in unserem Studio
Wir gestalten schöne Websites für Unternehmen, die in einem umkämpften Markt herausstechen wollen.
Klicken. Tippen. Speichern.
Dein Kunde sieht eine dezente Bearbeitungsschaltfläche auf jedem Inhalt, den du als bearbeitbar markiert hast. Er klickt, tippt die Änderung und speichert. Die Seite wird sofort aktualisiert — kein Admin-Bereich, keine Verwirrung beim Veröffentlichen.
- 1 Du markierst bearbeitbare Bereiche mit
class="colbe-content" - 2 Kunde sieht einen sauberen Inline-Editor, nichts weiter
- 3 Änderungen werden direkt ins HTML gespeichert — keine Datenbank
Mit der Maus darüberfahren, Ersetzen klicken und hochladen.
Wenn ein Kunde ein Teamfoto, ein Produktbild oder ein Hero-Bild aktualisieren möchte, fährt er über das Bild und klickt auf Ersetzen. ColbeEdit übernimmt den Upload und aktualisiert bei Galerien auch das verknüpfte Lightbox-Bild. Bereits hochgeladene Fotos lassen sich aus der eingebauten, durchsuchbaren Medienbibliothek wiederverwenden.
- 1 Kunde fährt über ein bearbeitbares Bild
- 2 Lädt eine neue Datei hoch oder wählt eine aus der Bibliothek
- 3 Seitenbild und verknüpftes Lightbox-Bild werden gemeinsam aktualisiert
Schneide nie das Falsche ab.
Wenn ein Kunde ein Bild ersetzt, kann er einen Fokuspunkt ziehen, um ColbeEdit mitzuteilen, welcher Teil des Fotos am wichtigsten ist. Bei verschiedenen Bildschirmgrößen passt sich der Zuschnitt um diesen Punkt an — so bleiben Gesichter und Hauptmotive immer sichtbar.
- 1 Kunde ersetzt ein Bild
- 2 Zieht einen Punkt auf den wichtigen Teil des Fotos
- 3 Desktop-, Tablet- und Mobil-Zuschnitte richten sich danach.
Eingebaute Werkzeuge, die pro Website Stunden sparen
Über das Inline-Editing hinaus liefert ColbeEdit ein kleines Set an Designer-Werkzeugen, die die mühsamen Teile der Kundenübergabe erledigen — Bildoptimierung, Medien-Wiederverwendung und das Bearbeiten von Seiten mit überlappenden Elementen.
Smarte Medienbibliothek
Jedes hochgeladene Bild landet in einer durchsuchbaren Bibliothek, aus der man bequem wählt — statt dasselbe Logo zehnmal neu hochzuladen. Eingebaute Werkzeuge zeigen, welche Seite welches Bild verwendet, löschen alle ungenutzten Bilder mit einem Klick, benennen Dateien um und schreiben automatisch jede Referenz in allen Seiten um, und schneiden serverseitig zu — kein Download nötig. Foto-Aufräumen, das früher eine FTP-Sitzung kostete, dauert jetzt dreißig Sekunden.
Demo-Video ansehenZu WebP optimieren — einzeln oder für die ganze Website
Konvertiere einzelne JPG-, PNG- oder GIF-Dateien in der Medienbibliothek zu WebP oder verarbeite mit Alle optimieren alle kompatiblen, verwendeten Bilder. Die Konvertierung ist verfügbar, wenn das Hosting GD oder Imagick mit WebP-Unterstützung bereitstellt — ohne separates Bildoptimierungs-Plugin.
Demo-Video ansehenBildfokus & smartes Skalieren
Bild anklicken, goldenes Fadenkreuz ziehen — und der wichtige Teil des Fotos bleibt sichtbar, egal wie aggressiv das Layout auf dem Smartphone zuschneidet. Im selben Modal lassen sich exakte Breite & Höhe, ein object-fit-Modus (cover / contain / fill) und ein Vorschau-Zoom einstellen — perfekt für Hero-Banner, Teamporträts und jedes Bild, dem auf dem Handy immer wieder das Gesicht abgeschnitten wird. Touch-tauglich, läuft auch auf dem iPad.
Einstellungen & Rollen-Trennung
Ein nicht-technisches Admin-Panel konfiguriert Edit-Modus (Auto-Erkennung oder explizit per colbe-content), Upload-Ordner, Session-Dauer, max. Dateigröße und erlaubte Endungen — ohne PHP zu bearbeiten. Getrennte Admin- und Kunden-Passwörter halten Einstellungen und gefährliche Aktionen aus den Händen der Kunden, lassen sie aber frei Texte bearbeiten, Bilder tauschen und Widgets umstellen. Eine Warnung schützt vor versehentlichem Schließen mit ungespeicherten Änderungen.
Markier-Modus
Wenn der Modus Nur explizit aktiv ist, kann der Kunde nur Elemente bearbeiten, die mit der Klasse colbe-content markiert sind. Der Mark-Modus ermöglicht es, diese Klasse visuell direkt auf der Seite hinzuzufügen oder zu entfernen — ohne den HTML-Code manuell zu bearbeiten. Nutze ihn, um genau festzulegen, welche Bereiche der Seite der Kunde bearbeiten darf, während der Rest des Designs gesperrt bleibt.
Demo-Video ansehenFlatten-Modus
Aktiviere das Fadenkreuz, klicke auf das Element, das deinen Text verdeckt — ein absolut positioniertes Hero-Overlay, ein dekorativer Layer, ein Sticky-Banner — und ColbeEdit entfernt vorübergehend Klasse, ID und Inline-Style, sodass der darunterliegende Inhalt bearbeitbar wird. Ein Klick stellt alles wieder her. Das gespeicherte HTML bleibt unverändert.
Demo-Video ansehenButtons- & Link-Editor
Sobald der Kunde mit der Maus über einen Link fährt, erscheint eine kleine Link bearbeiten-Pille. Ein Klick öffnet ein Modal, in dem sich der Buttontext ändern, das Ziel zwischen URL, E-Mail, Telefon oder WhatsApp umschalten (automatisch als mailto: / tel: / wa.me/ gespeichert), in neuem Tab öffnen aktivieren, eine vorgefertigte WhatsApp-Nachricht hinterlegen oder der Link komplett entfernen lässt. Schluss mit Tickets wie „Bitte den Kontakt-Button auf WhatsApp ändern“.
Alt-Text-Abfrage — SEO inklusive
Nach jedem Bildwechsel fragt ColbeEdit nach einem kurzen Alt-Text — vorausgefüllt mit der bisherigen Beschreibung, damit sie sich leicht übernehmen oder verfeinern lässt. Eine klare Beschreibung unterstützt die Barrierefreiheit für Screenreader und hilft Suchmaschinen, das Bild zu verstehen. „Überspringen“ lässt den bisherigen Text unberührt.
Demo-Video ansehenSeiten-Wechsler — alle Seiten direkt aus der Toolbar aufrufen
Der Seitenname in der Toolbar ist jetzt ein Dropdown, das jede .html-Datei der Site auflistet, nach Unterordnern gruppiert. Direkt zur Bearbeitung einer anderen Seite springen — ohne URL eintippen. Ein Dialog warnt vor ungespeicherten Änderungen, bevor die Seite gewechselt wird.
Andockbare Toolbar — oben, unten, links oder rechts
Vier kleine Icons am Ende der Toolbar erlauben es, die Toolbar an jede Bildschirmkante zu docken. Oben (Standard) schiebt den Seiteninhalt nach unten und verschiebt automatisch alle fixierten/sticky Navigationsleisten der Site. Links/Rechts verwandelt die Toolbar in eine 190 px breite Sidebar mit vertikal gestapelten Buttons. Die Position wird in localStorage gespeichert.
Link um ein Galeriebild bearbeiten
Wenn ein Bild in einem Link (<a href>) steckt, zeigt das Bild-Overlay neben Ersetzen und Fokus eine dritte Schaltfläche — 🔗 Link. Ein Klick öffnet den Link-Editor für den übergeordneten Anker: URL ändern, aus der Medienbibliothek wählen oder den Link ganz entfernen — ohne das Bild zu berühren.
Safe History — Wiederherstellen mit einem Klick
Vor jeder Speicherung legt ColbeEdit eine zeitgestempelte Kopie der Seite in /colbeedit/backups/ ab. Das Safe-History-Panel listet jede Version, lässt dich jede in einem neuen Tab in der Vorschau ansehen und die gewählte Version mit einem Klick wiederherstellen — und die Wiederherstellung selbst erzeugt zuerst einen frischen Snapshot, ist also ebenfalls rückgängig zu machen. Kunde hat versehentlich einen Absatz gelöscht? In fünf Sekunden zurückgesetzt.
Eigenständige Widget-Zonen
Lade ein ZIP mit HTML/CSS/JS und Bildern an jeder beliebigen Stelle der Seite hoch — ColbeEdit rendert es in einem sandboxed iframe. Ideal für Rechner, Videoplayer, interaktive Karten, 3D-Viewer oder kleine Vue/React-Inseln. Eine leuchtende Drop-Linie platziert die Zone exakt zwischen zwei Bereichen (Alt zielt auf das Elternelement), ein Auto-Fit-Button passt den iframe an seinen Inhalt an, und das seitlich andockbare Widgets-Panel listet jede Zone der Seite für schnelles Umordnen, Ersetzen oder Entfernen. Statt eines ZIPs reicht auch eine Video-URL: füge einen YouTube-, Vimeo- oder direkten .mp4-Link ein und ColbeEdit verpackt ihn. Die Hover-Toolbar bietet jetzt sowohl Breite (100%, 60%, 600px oder auto) als auch Höhe, damit ein Widget zwischen zwei Spalten exakt ins Layout passt.
Flexible Navigation — Site-Menü per Drag-and-Drop
Eine neue Toolbar-Schaltfläche 🧭 Nav (nur Admin) öffnet ein Panel, das jede .html-Seite deiner Site scannt und dich das Menü per Drag-and-Drop in einen Baum aufbauen lässt. Wähle Kopfzeile, Megamenü oder Hamburger (links/rechts), lege ein Markenlabel und Akzent-, Hintergrund- und Textfarben fest, ziehe Knoten zum Umordnen oder Verschachteln, füge eigene Links hinzu und aktiviere einen Sprachumschalter, der Besucher zur entsprechenden Seite in anderen Sprachen führt — fehlende Übersetzungen werden ausgegraut. Gespeichert in colbeedit/nav.json (vorherige Version in Safe History gesichert), beim Speichern automatisch auf jede Seite verteilt und auf der Live-Site von einem kleinen colbeedit/nav.js-Skript gerendert — ohne Build. Ein Klick auf Navigation von allen Seiten entfernen setzt alles zurück.
Mehrsprachiges Bearbeiten — gebaut für die Schweiz
ColbeEdit erkennt parallele Sprachversionen derselben Seite (index.html, de/index.html, fr/index.html, it/index.html — DE / FR / IT / ES / PT / NL und weitere) und blendet ein Flaggen-Dropdown in der Toolbar ein: Edit Deutsch, Edit Français, Edit Italiano wechselt direkt zur Bearbeitung der jeweiligen Sprache. Eine eigene Übersetzungs-Leiste vergleicht die aktuelle Seite mit einer Quellsprache, listet jeden Block als OK / Identisch / Leer / Markiert, kopiert auf Knopfdruck den Text aus der Hauptsprache und kennzeichnet Blöcke als Übersetzung nötig — persistent über Speichervorgänge hinweg mit einer dezenten gestrichelten Markierung auf der Seite. Admins finden im Sprachmenü zusätzlich + Übersetzung anlegen — ein Klick kopiert die aktuelle Seite in den richtigen Sprachordner, schreibt relative Asset-Pfade automatisch um (so funktionieren gemeinsame Ordner wie images/ oder css/ aus dem Unterordner weiterhin) und markiert jeden bearbeitbaren Block sofort als übersetzungsbedürftig, damit die Leiste exakt zeigt, was als Nächstes zu tun ist. Das Panel aktualisiert sich nach jedem Speichern automatisch. Wurde nach der Übersetzung ein neues Widget zur Originalseite hinzugefügt? Ein Klick auf ↻ Re-sync Deutsch from English im Sprachmenü baut die deutsche Kopie aus der aktuellen englischen Seite neu auf (die vorherige Version wandert vorher in Safe History — nichts geht verloren), und jeder Block ist erneut als übersetzungsbedürftig markiert. Ohne Plugin, ohne Datenbank.
Galerie- & Lightbox-kompatibel
ColbeEdit erkennt Galerien im HTML5UP-Stil, blockiert versehentliches Auslösen der Lightbox während der Bearbeitung und injiziert beim Speichern einen winzigen Patch, damit die Lightbox auch mit den neuen WebP-Dateien funktioniert — ohne das JavaScript deines Templates anzupassen.
Gesicherte Speichervorgänge & Auto-Reload
Bevor eine Seite überschrieben wird, erstellt ColbeEdit eine Sicherung mit Zeitstempel. Wurden Tools wie Flatten verwendet, lädt der Editor nach dem Speichern automatisch neu und zeigt die gerade geschriebene Version.
Deploy in Minuten, nicht Stunden
Keine CLI, kein npm und kein Datenbank-Setup. Paket hochladen, Schreibrechte für die Arbeitsordner setzen und ColbeEdit ist bereit.
Bearbeitbare Bereiche markieren
Füge class="colbe-content" zu den HTML-Elementen hinzu, die dein Kunde bearbeiten soll. Das war's. Alles andere bleibt gesperrt. Du kannst Bereiche später auch mit dem visuellen Mark-Tool markieren oder die Markierung entfernen.
Your headline here
</h1>
Dateien per FTP hochladen
Lade das ColbeEdit-Paket auf ein Hosting hoch, das die Serveranforderungen erfüllt: PHP 7.4+, die erforderlichen Erweiterungen, HTTPS, Unterstützung für Sicherheitsregeln und Schreibrechte. Keine Datenbank, kein npm install und kein Build-Schritt.
Bearbeitungs-URL übergeben
Schick deinem Kunden eine einzige URL. Er meldet sich mit einem einfachen Passwort an und die Bearbeitung ist live — direkt auf der Seite, die er jeden Tag sieht. Kein Dashboard. Keine Einstellungen, die falsch gesetzt werden können.
→ Kunde ist bereit zur Bearbeitung
Dein Template. Deine Regeln.
ColbeEdit arbeitet mit Standard-HTML/CSS/JS und ist darauf ausgelegt, bestehende Layouts, Lightboxen, Animationen und Karussells zu erhalten.
Jedes statische Template
Funktioniert mit HTML5UP, ThemeForest-Templates, handcodierten Layouts und allem anderen Standard-HTML/CSS/JS. Kein Template-Engine zu erlernen.
Eine Klasse zum Aktivieren
Füge class="colbe-content" zu Elementen hinzu, die der Kunde bearbeiten darf. Alles andere bleibt geschützt.
Deploy in Minuten
ColbeEdit-Paket per FTP hochladen. Keine Datenbank, CLI oder Build-Schritte. Die Kompatibilität hängt von den erforderlichen PHP-Erweiterungen, HTTPS, der Unterstützung für Sicherheitsregeln und Schreibrechten ab — prüfe das Hosting zuerst.
Kundensichere Bearbeitung
Kunden bearbeiten nur die Inhalte und Werkzeuge, die du freigibst. Template-Dateien, CSS und Seitenberechtigungen bleiben unter deiner Kontrolle.
White-Label-Übergabe
Kein sichtbares ColbeEdit-Branding wird in die Website deines Kunden eingefügt. Der Editor ist deins, um ihn als Teil deines Services zu präsentieren.
Für bestehende Frontends entwickelt
ColbeEdit ist für den Einsatz mit gängigen Lightboxen, Scroll-Animationen, Karussells und Galerien ausgelegt und erhält dabei die visuelle Struktur der Website.
Wie ein Dokument bearbeiten.
Kein Admin-Dashboard. Keine Einstellungsmenüs. Kein Veröffentlichungs-Workflow. Einfach auf das klicken, was geändert werden soll, aktualisieren und speichern.
Klicken, tippen, speichern
Texte direkt auf der Seite bearbeiten. Auf einen bearbeitbaren Bereich klicken, die Änderung eingeben und speichern. Was du siehst, sehen auch die Besucher.
Fotos einfach ersetzen
Fahre über ein Bild, klicke auf Ersetzen und lade deine neue Datei hoch. Kein Skalieren, kein FTP, kein Anruf beim Entwickler.
Fokuspunkt-Steuerung
Ziehe einen Punkt, um den wichtigsten Teil eines Fotos zu markieren. ColbeEdit stellt sicher, dass er bei jeder Bildschirmgröße sichtbar bleibt.
Keine Veröffentlichungsverwirrung
Was du speicherst, sehen Besucher sofort — keine Entwurfs-/Veröffentlichungs-Workflow, keine Genehmigungswarteschlange, keine Staging-Umgebung.
Funktioniert auf Telefon und Tablet
ColbeEdit ist auch für einfache Bearbeitungen auf Touch-Geräten ausgelegt. Öffnungszeiten jederzeit vom Handy aktualisieren.
Nichts kaputtmachen
Du bearbeitest nur die Inhalte und Werkzeuge, die dein Designer freigegeben hat. Das zugrunde liegende Template und CSS bleiben außerhalb des normalen Bearbeitungsablaufs.
"Wie ein Dokument bearbeiten. Ich klicke einfach auf den Text, ändere ihn und speichere. Ich musste meinen Designer seit Monaten nicht mehr anrufen."— So werden deine Kunden ColbeEdit beschreiben
ColbeEdit vs WordPress
für kleine statische Websites
ColbeEdit ist kein WordPress-Ersatz für Blogs, Shops oder dynamische Seiten. Es ist bewusst klein — und genau das ist der Punkt.
| Funktion |
ColbeEdit
Empfohlen für kleine Websites
|
WordPress |
|---|---|---|
| Datenbank | ✓ Keine benötigt — Inhalte werden direkt in der HTML-Datei gespeichert | ✗ MySQL/MariaDB auf jedem Host erforderlich |
| Hosting | ✓ Kompatibles PHP-7.4+-Hosting mit den erforderlichen Erweiterungen, HTTPS, Unterstützung für Sicherheitsregeln und Schreibrechten | Benötigt Datenbank, mehr RAM und regelmäßige Server-Updates |
| Seitengeschwindigkeit | ✓ Statisches HTML ist CDN-tauglich und leicht für Core Web Vitals optimierbar | Dynamisches PHP + Datenbank, wenn nicht vollständig mit Plugins gecacht |
| Kundeninterface | ✓ Nur die Schaltflächen, die der Kunde braucht — nichts weiter sichtbar | Vollständiger Adminbereich mit Menüs, Plugins, Einstellungen, die Kunden nicht benötigen |
| Wartung | ✓ Einmal hochladen, nur bei Bedarf aktualisieren | Core, Themes und Plugins brauchen laufende Updates, um sicher zu bleiben |
| Angriffsfläche | ✓ Keine Datenbank, kein öffentliches /wp-admin-Login, CSRF-geschützte Speichervorgänge | Großes Ökosystem — Patchstack erfasste 2024 7.966 veröffentlichte Schwachstellen; 96% betrafen Plugins |
| Am besten geeignet für | ✓ Broschurenwebsites, Portfolios, Restaurantseiten, Landingpages, lokale Unternehmen | Blogs, Shops, Mitgliedschaften, Buchungssysteme, komplexe dynamische Seiten |
| Preismodell | ✓ CHF 49 einmalig, lebenslange Lizenz | Kostenloser Core, aber Hosting, Premium-Themes und Plugins summieren sich monatlich |
Ehrliche Anmerkung: ColbeEdit ist nicht für Blogs mit Hunderten von Beiträgen, E-Commerce, Mitgliederbereiche, Buchungssysteme oder komplexe datenbankbasierte Websites. Dafür ist WordPress oder ein vollständiges CMS das richtige Werkzeug. ColbeEdit ist für die vielen kleinen, eleganten statischen Websites, bei denen Einfachheit und geringer Wartungsaufwand wichtiger sind als dynamische Funktionen — und für Designer, die müde von Plugin-Updates sind.
Einmal kaufen. Für immer nutzen.
Kein Abo. Eine Lizenz pro Domain — eine einmalige Zahlung aktiviert ColbeEdit dauerhaft auf dieser Website.
Einmalzahlung · Kein Abo · Keine Verlängerung
- ✓ Eine Lizenz pro Domain — eine pro Kundenprojekt kaufen
- ✓ Inline-Textbearbeitung — klicken, tippen, speichern
- ✓ Bildaustausch mit Lightbox-Unterstützung
- ✓ Fokuspunkt-Steuerung für intelligentes Zuschneiden
- ✓ CSS-Background-Image-Tile-Unterstützung
- ✓ CSRF-geschützte Speichervorgänge und Uploads
- ✓ White-Label — kein ColbeEdit-Branding auf Kundenseiten
- ✓ Läuft auf PHP-7.4+-Hosting, das die veröffentlichten Serveranforderungen erfüllt
- ✓ Keine Datenbank erforderlich
- ✓ Keine wiederkehrende Lizenzgebühr
Noch unsicher? ColbeEdit 24 Stunden kostenlos testen →
Gib deine E-Mail-Adresse ein und bestätige den einmaligen Link, um eine private Demo zu erstellen — ohne Installation oder Zahlung. Die Sandbox wird nach 24 Stunden gelöscht.
Häufige Fragen
Alles, was du wissen musst, bevor du entscheidest, ob ColbeEdit in deinen Workflow passt.
class="colbe-content" zu den Elementen hinzu, die du bearbeitbar machen möchtest. Kein Template-Engine oder spezielle Struktur erforderlich.Mach deine nächste statische Website in Minuten vom Kunden bearbeitbar.
Kaufe ColbeEdit einmal, lade es auf ein kompatibles PHP-Hosting hoch und gib deinem Kunden eine fokussierte Bearbeitungserfahrung — ohne WordPress, Datenbank oder das gesamte Template freizugeben.