Bolzenbraus v5.47 – Handbuch

© 2026 Bernhard Lickert – Entwickelt mit Unterstützung von Claude (Anthropic)

Haftungsausschluss: Die Nutzung erfolgt vollständig auf eigene Gefahr. Es wird keinerlei Gewähr für Funktion, Eignung oder Fehlerfreiheit übernommen; eine Haftung für Schäden jeglicher Art ist – soweit gesetzlich zulässig – ausgeschlossen.

Ältere Versionshinweise stehen gesammelt in der Versionshistorie am Ende dieses Handbuchs.

Was ist Bolzenbraus?

Bolzenbraus ist ein visueller Website-Editor für den Desktop – ein sogenannter WYSIWYG-HTML-Editor (What You See Is What You Get). Du gestaltest Webseiten direkt auf einer Zeichenfläche, siehst das Ergebnis in Echtzeit, und das Programm erzeugt daraus sauberes, fertiges HTML – das du direkt per FTP auf deinen Webserver hochladen kannst.

Das Besondere: Bolzenbraus läuft vollständig lokal auf deinem Rechner, braucht keine Internetverbindung zum Arbeiten, kein Abonnement, keinen Account und keine Cloud. Du behältst jederzeit volle Kontrolle über deine Daten und deinen Code.

Wofür eignet sich Bolzenbraus?

• Kleine bis mittelgroße Websites, Landingpages, Präsentationsseiten
• Schnelle HTML-Prototypen ohne Programmierkenntnisse
• Nutzer, die lieber visuell arbeiten als Code schreiben
• Entwickler, die einen schnellen visuellen Ausgangspunkt wollen, den sie dann im Code verfeinern

Was Bolzenbraus nicht ist

Kein Content-Management-System (kein WordPress, kein Drupal), keine Datenbank, kein Hosting. Bolzenbraus erstellt statische HTML-Dateien – du bist für Hosting und Serverinfrastruktur selbst verantwortlich.

Funktionsübersicht

🖼 Canvas – die Zeichenfläche

Alle Elemente werden frei auf dem Canvas platziert, verschoben, skaliert und gedreht. Das Raster und die Hilfslinien helfen beim präzisen Ausrichten. Mehrere Elemente lassen sich gemeinsam markieren und bearbeiten. Der Zoom funktioniert per Mausrad oder Tastatur.

📦 Element-Typen

📱 Responsives Design

Drei Ansichten in einem Projekt: Desktop, Tablet und Mobil. Für jeden Breakpoint lassen sich Position, Größe und Sichtbarkeit der Elemente separat festlegen. Auf Mobil werden Elemente automatisch gestapelt (Auto-Stack). Der HTML-Export erzeugt vollständige Media Queries.

📄 Seitenverwaltung

Ein Projekt kann beliebig viele Seiten enthalten. Seiten lassen sich benennen, verschieben, duplizieren, importieren und als Vorlagen (Templates) markieren – neue Seiten können dann per Deepcopy auf einer Vorlage basieren. Masterseiten definieren gemeinsame Elemente (z. B. Header, Footer), die auf allen zugehörigen Seiten automatisch erscheinen.

🎨 Globale Designvariablen

Projektweite Farb- und Schrift-Variablen, die mit beliebig vielen Elementen verknüpft werden können. Ändert sich eine Variable, aktualisieren sich alle verknüpften Elemente sofort. Im HTML-Export erscheinen sie als CSS Custom Properties (:root { --bb-name: value; }).

📤 Export und Veröffentlichung

• HTML exportieren (Strg+E): Erzeugt eine vollständige HTML-Datei pro Seite, inklusive eingebettetem CSS, Media Queries und JavaScript.
• FTP-Veröffentlichung (Strg+P): Direktes Hochladen auf einen Webserver aus dem Programm heraus – kein separates FTP-Programm nötig.
• Browser-Vorschau (Strg+Shift+P): Öffnet die aktuelle Seite im Standard-Browser für eine realistische Vorschau.

↩ Undo-Verlauf mit Jump-to-State

Alle Aktionen sind unbegrenzt rückgängig machbar (Strg+Z). Das Undo-Verlauf-Panel zeigt die komplette History als klickbare Liste – per Klick auf einen Eintrag springt die Seite direkt auf diesen Zustand zurück.

🔧 Anpassbare Oberfläche

Toolbars, das linke Werkzeuge-Panel und die Dock-Panels sind frei konfigurierbar: Buttons ein-/ausblenden, Reihenfolge per Drag & Drop ändern. Panel-Farben (Titelleisten, Inhaltsbereiche, Abschnittsüberschriften) sind unter Ansicht → Darstellungs-Einstellungen frei wählbar. Das 2-Spalten-Dock-Layout rechts (Eigenschaften + Tabs für Effekte, Design-Variablen, Undo-Verlauf) passt sich der Arbeitssituation an.

Weitere Features

• Smart Snap: Elemente rasten an Kanten, Mitten und Hilfslinien ein
• Raster (Strg+Shift+G): einblendbares Ausrichtungsgitter mit einstellbarer Schrittweite
• Format Painter (Strg+Shift+C): Stil eines Elements auf andere übertragen
• Suchen & Ersetzen (Strg+F): in Texten und Element-Namen
• Ebenen-Panel: Stapelreihenfolge, Sichtbarkeit, Sperren, Gruppen
• Duplizieren (Strg+D): Auswahl mit einem Tastendruck kopieren
• Google Fonts: Eigene Schriften direkt aus dem Eigenschaften-Panel
• Anker-Links: In-Page-Navigation mit <a id="...">
• HTML-Quelltext-Editor: Globaler und pro-Element-JavaScript/CSS-Code
• Externe HTML-Seiten: Bestehende HTML-Dateien ins Projekt einbinden
• Multi-Select: Mehrere Elemente gemeinsam verschieben und skalieren
• Element-Ausrichten (Bearbeiten → Ausrichten): Mehrere markierte Elemente links/rechts/oben/unten ausrichten, horizontal/vertikal zentrieren oder gleichmäßig verteilen (mind. 2 Elemente auswählen). Shortcuts: Strg+Shift+←↑→↓ für Kanten, Strg+Alt+H / Strg+Alt+M für Zentrierung

Panel-Layout

2-Spalten-Anordnung rechts

Der rechte Dock-Bereich ist in zwei Spalten aufgeteilt:

Die Tabs der rechten Spalte erscheinen oben. Beim ersten Start und nach „Panel-Layout zurücksetzen" (Ansicht-Menü) wird diese Anordnung automatisch wiederhergestellt.

Optionale Panels öffnen und schließen

Ansicht-Menü → 🎨 Design-Variablen oder ↩ Undo-Verlauf (Häkchen = sichtbar). Der Zustand wird sofort gespeichert und beim nächsten Start automatisch wiederhergestellt – auch nach Versions-Updates.

Undo-Verlauf-Panel

Das Undo-Verlauf-Panel zeigt alle gespeicherten Zustände der aktuellen Seite als klickbare Timeline an. Damit lässt sich jeder frühere Zustand direkt anspringen.

Panel öffnen

Ansicht-Menü → ↩ Undo-Verlauf (Häkchen = sichtbar).
Das Panel erscheint als Tab in der rechten Spalte neben Effekte & Animation.

Jump-to-State – Zustand direkt anspringen

Panel-Farben einstellen

Ansicht → 🎨 Darstellungs-Einstellungen… → Abschnitt Panel-Farben.

Verfügbare Farbwähler

Autosave

Bolzenbraus speichert Projekte automatisch in regelmäßigen Abständen als Sicherheitskopie – falls das Programm unerwartet abstürzt oder der Rechner ausgeht.

Einstellungen

Einstellungen → 💾 Autosave…:

• Autosave aktiviert – ein/ausschalten
• Intervall – 1 bis 60 Minuten (Standard: 5 Minuten)

So funktioniert es

Scroll-Schutz in Panels

Zahlenfelder (SpinBox), Dropdowns (ComboBox) und Schieberegler (Slider) in allen Panels reagieren nicht auf das Mausrad, solange sie keinen Tastaturfokus haben.

Wert ändern: Erst ins Feld klicken, dann Mausrad oder Tastatur benutzen.
Panel scrollen: Einfach über das Panel scrollen – kein Feld verändert sich.

Globale Designvariablen

Panel öffnen

Ansicht-Menü → 🎨 Design-Variablen (Häkchen = sichtbar).

Variable anlegen

Variable mit Element verknüpfen

Variable ändern → automatische Propagierung

Doppelklick auf eine Variable → Wert ändern → OK.
Alle verknüpften Elemente aktualisieren sich sofort auf dem Canvas.

Verknüpfung lösen

Element auswählen → Eigenschaft im Dropdown wählen → ✂ Trennen.
Das Element behält seinen aktuellen Farbwert, ist aber nicht mehr gebunden.

HTML-Export

:root {
  --bb-primaerfarbe: #1a3d6b;
  --bb-akzentfarbe:  #ff6600;
}
<div style="background-color:var(--bb-primaerfarbe);">

Bindbare Eigenschaften

Seiten-Template (Vorlagen)

Eine Seite kann als Vorlage markiert werden. Neue Seiten lassen sich dann auf dieser Vorlage basieren – alle Elemente und Seiteneinstellungen werden per Deepcopy übertragen, die neue Seite ist vollständig unabhängig.

Seite als Vorlage markieren

Neue Seite auf Basis einer Vorlage

Vorlage-Markierung aufheben

Rechtsklick auf die Vorlage-Seite → 📄 Vorlage aufheben.

Werkzeuge-Panel anpassen

Rechtsklick auf das linke Werkzeuge-Panel → „🔧 Werkzeuge anpassen…"

• Checkboxen: Buttons ein- oder ausblenden
• ⠿-Symbol: Reihenfolge per Drag & Drop ändern
• Einstellungen werden automatisch gespeichert

Vollständige Shortcut-Übersicht

Versionshistorie

Systemvoraussetzungen & Starten

• Python 3.10 oder neuer (nur für Quellcode-Start bzw. EXE-Build – nicht für die fertige EXE nötig)
• PyQt6 (pip install PyQt6) (ebenfalls nur für Quellcode-Start bzw. Build)
• Windows 10/11, Linux, macOS

▶ Empfohlen: Fertige EXE starten (Windows, kein Python nötig)

Die einfachste und sicherste Startart unter Windows: Doppelklick auf bolzenbraus_v5_47.exe. Python und PyQt6 sind darin bereits vollständig eingebettet – auf dem Rechner, auf dem die EXE läuft, muss nichts installiert werden, kein Python, kein PyQt6, kein Terminal.

Alternative: Direkt aus dem Python-Quellcode starten

Sinnvoll unter Linux/macOS (dort gibt es keine EXE), oder für Entwickler, die am Code mitarbeiten. Setzt eine lokale Python- und PyQt6-Installation voraus (siehe Systemvoraussetzungen oben).

▶ Windows

Doppelklick auf start_bolzenbraus.bat – oder im Terminal:

python bolzenbraus.py

▶ Linux

Terminal öffnen, in den Programmordner wechseln:

cd /pfad/zum/ordner
python3 bolzenbraus.py

Oder das mitgelieferte Shell-Skript verwenden (einmalig ausführbar machen):

chmod +x start_bolzenbraus.sh
./start_bolzenbraus.sh

PyQt6 installieren falls nicht vorhanden:

pip3 install PyQt6

▶ macOS

Terminal öffnen (Spotlight: Cmd+Leertaste → „Terminal"):

cd /pfad/zum/ordner
python3 bolzenbraus.py

Oder Shell-Skript:

chmod +x start_bolzenbraus.sh
./start_bolzenbraus.sh

PyQt6 installieren:

pip3 install PyQt6
# Bei Homebrew-Python oder neuem macOS ggf.:
pip3 install --break-system-packages PyQt6

⚙ EXE erstellen (Windows, PyInstaller)

Für Entwickler/Ersteller – so entsteht die unter „▶ Empfohlen" beschriebene fertige EXE.

Die mitgelieferte bolzenbraus.ico wird automatisch als EXE-Icon verwendet (6 Größen: 16–256 px).

Doppelklick auf build_bolzenbraus.bat – oder im Terminal:

python -m PyInstaller bolzenbraus_v5_47.spec --noconfirm

Die fertige EXE liegt danach unter dist\bolzenbraus_v5_47.exe – diese Datei ist es, die Endnutzer:innen anschließend einfach per Doppelklick starten (siehe oben).

📱 Social-Media-Buttons v3.48

Mit dem Social-Media-Buttons-Element fügst du Profil-Links zu deinen Social-Media-Auftritten ein – als saubere Inline-SVG-Icons ohne externe Abhängigkeiten (kein CDN, kein Tracking).

Element einfügen

Klicke in der Toolbar auf 📱 Social. Der Einstellungen-Dialog öffnet sich sofort.

Verfügbare Plattformen

Alle Plattformen sind standardmäßig deaktiviert. Du wählst per Häkchen genau die aus, die du benötigst:

Stil-Optionen

• Form: Rund (Kreis) oder Eckig (abgerundetes Rechteck)
• Größe: Klein (28 px) · Mittel (40 px) · Groß (56 px)
• Farbe: Markenfarben (jede Plattform in ihrer offiziellen Farbe) · Monochrom (Dunkelgrau) · Eigene Farbe (freie Wahl)
• Anordnung: Horizontal (nebeneinander) oder Vertikal (untereinander)
• Beschriftung: Optional den Plattformnamen unter jedem Icon anzeigen

Export

Beim HTML-Export werden alle Icons als Inline-SVG direkt in die HTML-Datei eingebettet. Kein externer Font, kein CDN, kein Tracking-Request. Die Links öffnen in einem neuen Tab (target="_blank"), E-Mail-Links im selben Tab.

Hinweise

• Mastodon, Signal, Threema: Diese Felder sind leer vorbelegt – trage deine vollständige Profil-URL ein. Ohne URL verlinkt der Button auf die allgemeine Plattform-Startseite.
• WhatsApp: Nutze das internationale Format ohne + und Leerzeichen (z. B. https://wa.me/491701234567)
• Die Icons sind hover-animiert (leichte Transparenz beim Überfahren)

🌙 Dark Mode v3.48

Über Einstellungen → 🌙 Dark Mode lässt sich die App-Oberfläche auf ein dunkles Erscheinungsbild umschalten. Der Canvas selbst (die weiße Seite) bleibt dabei immer hell – Dark Mode betrifft nur die App-Chrome (Menüs, Panels, Dialoge, Toolbar).

Die Einstellung wird automatisch gespeichert und beim nächsten Start wiederhergestellt.

📦 ZIP-Export v3.48

Im Menü Datei stehen zwei ZIP-Export-Funktionen bereit:

📦 Projekt als ZIP sichern

Erstellt ein portables ZIP-Archiv mit der .bolzen-Projektdatei und dem kompletten images/-Ordner. Das ZIP kann auf einem anderen Rechner entpackt und direkt geöffnet werden – alle Bilder bleiben verknüpft.

🗜 Website als ZIP exportieren

Führt den HTML-Export durch und verpackt alle generierten Dateien (HTML-Seiten, Bilder, Sitemap) in ein ZIP-Archiv. Ideal zum Weitergeben oder direkten Hochladen auf den Webserver – einfach entpacken, fertig.

🔍 SEO-Felder pro Seite v3.50

Jede Seite kann jetzt mit vollständigen SEO-Meta-Tags versehen werden. Die Einstellungen findest du unter Datei → Seiteneinstellungen → SEO / Meta-Tags.

Verfügbare Felder

Twitter Card

Wird automatisch aus den Open-Graph-Feldern befüllt – kein separater Aufwand nötig. Im Export erscheinen twitter:card, twitter:title, twitter:description und twitter:image.

Robots-Optionen

❌ Projekt schließen v3.50

Unter Datei → Projekt schließen lässt sich das aktive Projekt-Tab schließen. Bei ungespeicherten Änderungen erscheint eine Rückfrage. Wird das letzte Tab geschlossen, öffnet Bolzenbraus automatisch ein neues leeres Projekt.

Hinweis: Dasselbe war vorher nur über das ✕-Symbol direkt am Tab möglich.

🔧 Toolbar-Layout v3.50

Die obere Toolbar wurde neu geordnet. Häufig genutzte Aktionen sind jetzt direkt erreichbar:

Die Toolbar ist weiterhin vollständig anpassbar unter Ansicht → Toolbar anpassen – dort können Buttons per Drag & Drop umsortiert und ein- oder ausgeblendet werden.

🌐 Favicon v3.50

Das Favicon wird unter Datei → Seiteneinstellungen → Favicon per Datei-Explorer ausgewählt. Unterstützte Formate: .ico, .png, .svg, .gif, .jpg.

Beim Export wird die Favicon-Datei automatisch in das Export-Verzeichnis kopiert und im <head> als relativer Pfad eingetragen:

<link rel="icon" href="favicon.ico">

Hinweis: Empfohlen ist eine quadratische .ico- oder .png-Datei (32×32 oder 64×64 px). Browser zeigen das Favicon im Tab und in Lesezeichen an.

📱 Responsive Vorschau v3.51

Die In-App-Vorschau (Ansicht → In-App Vorschau oder Strg+Shift+P) zeigt die Seite direkt in Bolzenbraus – ohne externen Browser. Über die Viewport-Buttons kann die Breite live umgeschaltet werden:

Der aktive Modus wird blau hervorgehoben. Beim Öffnen der Vorschau wird automatisch der aktive Canvas-Breakpoint übernommen – wer also im Tablet-Modus arbeitet, sieht die Vorschau direkt bei 768 px.

Hinweis: Die Vorschau benötigt PyQt6-WebEngine. Falls der Button fehlt, muss das Paket manuell installiert werden: pip install PyQt6-WebEngine

🚫 404-Fehlerseite v3.52

Im Seiten-Panel gibt es den Button 404. Ein Klick legt eine neue Seite mit dem Dateinamen 404.html und dem Namen „404 – Seite nicht gefunden" an.

Die Seite wird beim Export wie jede andere Seite exportiert. Damit sie als Fehlerseite funktioniert, muss der Hoster entsprechend konfiguriert sein:

Hinweis: Die 404-Seite wird automatisch mit robots: noindex, nofollow versehen – sie soll nicht in Suchmaschinen erscheinen.