Branding
Hier bekommt deine öffentliche Seite das Aussehen deines Studios – Farben, Logo und ein Stimmungsbild. Du brauchst keinerlei Technik- oder Design-Kenntnisse.
In 2 Minuten fertig: Wähle unten eine Farbwelt-Vorlage, lade dein Logo hoch, speichern. Den Rest kannst du später verfeinern.
Was die einzelnen Felder bewirken
1. Farben (die zwei Hero-Farben)
Deine Seite nutzt oben einen Farbverlauf aus zwei Farben:
- Hero-Farbe 1 (Primär) – deine Hauptfarbe. Sie färbt Buttons, Links und Akzente.
- Hero-Farbe 2 (Sekundär) – die zweite Verlaufsfarbe oben. Leer lassen = automatisch ein dunklerer Ton von Farbe 1. Gleiche Farbe wie Farbe 1 = einfarbig ohne Verlauf.
So gibst du eine Farbe ein: aufs Farbfeld klicken und im Farbwähler auswählen – oder einen Hex-Code eintippen (z. B. #E94C82). Hex-Codes findest du z. B. in deinem Logo-Programm oder über eine schnelle Web-Suche „Farbwähler".
Kein Auge fürs Design? Nutze unten „Farbwelt-Vorlage": Du wählst eine fertige, abgestimmte Kombination und übernimmst sie mit einem Klick. Danach kannst du sie frei anpassen.
2. Browser-/App-Farbe
Färbt die schmale Leiste oben im Handy-Browser und in der installierten Web-App. Leer = es wird automatisch Hero-Farbe 1 genommen. Hier musst du meist nichts tun.
3. Logo
Deine Wortmarke, die oben auf der Seite erscheint – und im Kopf jeder Gäste-Mail.
- Format: am besten PNG mit transparentem Hintergrund (auch JPG oder WebP). SVG wird seit 23.08.2026 nicht mehr angenommen – eine SVG-Datei kann Programmcode enthalten und lag im selben Web-Bereich wie die Verwaltung; das war ein Sicherheitsrisiko. Bereits hochgeladene Logos bleiben unverändert.
- Form: quer (Breite > Höhe), ca. 400 × 120 px, max. 2 MB.
- Tipp: ein Logo mit transparentem Hintergrund wirkt auf jeder Farbe sauber.
4. Favicon / App-Icon
Das kleine Symbol im Browser-Tab und das Icon, wenn jemand deine Seite als App installiert.
- Format: PNG, quadratisch, mindestens 192 × 192 px, max. 1 MB.
- Tipp: nimm dein Bildzeichen/Symbol – feine Schrift ist im kleinen Icon schlecht lesbar.
5. Hero-Hintergrundbild (optional – ohne Bild zeigt PaintSlots einen Farbverlauf aus deinen beiden Hero-Farben; das sieht bewusst ordentlich aus, nicht leer)
Ein Stimmungsbild ganz oben auf deiner Startseite – z. B. ein Foto aus deinem Studio.
- Format: quer, ca. 1600 × 700 px (JPG/PNG), max. 4 MB.
- Mit Bild = größerer, fotolastiger Hero. Ohne Bild = schlanker Farbverlauf (ebenfalls sehr ansprechend).
6. Studio-Website – lässt du das Feld leer, fehlt einfach der Rückweg zu deiner eigenen Seite; alles andere funktioniert normal
Hast du eine eigene Website? Trag die Adresse ein, dann erscheint im Kopf deiner Buchungsseite ganz vorne im Menü ein Link dorthin. Leer = kein Link.
Daneben steht „Beschriftung des Links": Hier bestimmst du, wie der Menüpunkt heißen soll – zum Beispiel „zurück zur Homepage". Lässt du das Feld leer, steht dort wie bisher „zur Studio-Website". Höchstens 40 Zeichen, denn der Platz im Menü ist knapp.
Auf dem Handy wird daraus ein Haus-Symbol statt eines Textes – dort ist die Kopfzeile zu schmal für eine weitere Beschriftung. Ab Tablet-Breite steht dein Text. (Bis zum 10. August 2026 fehlte der Link auf dem Handy ganz.)
7. Eigenes CSS (nur für Profis)
Für Fortgeschrittene: eigene Stilregeln, die alles im Frontend überschreiben (auch Schriften). Lass dieses Feld leer, wenn du dir unsicher bist – die Vorlagen reichen für ein stimmiges Bild völlig aus.
Feste Anker auf der Startseite (stabil, ändern sich bei Updates nicht): #hero = der große farbige Kopfbereich mit Überschrift und Untertitel · #kalender = die Kalender-Spalte · #angebote = die Angebots-Liste daneben · #demnaechst = „Demnächst bei uns" · header = die Kopfleiste mit Logo und Menü (nicht der Hero!) · footer = Fußbereich. Dazu die Farb-Variablen --color-brand-50 … 900, --hero-from, --hero-to und die Klassen .btn-* und .gc-*. Kurze Baukasten-Klassen wie rounded-3xl oder px-4 bitte nicht ansprechen – die können sich ändern.
Beispiel: Hero-Bereich ausblenden – einen Schalter dafür gibt es nicht, aber eine Zeile genügt:
#hero { display: none !important; }Tipp: Oft reicht es, den Hero schlanker zu machen – die drei Texte stellst du ohne CSS unter Einstellungen → Startseite ein, das Bild hier unter Branding.
Nicht header ausblenden, um den Hero loszuwerden – das ist die Kopfleiste mit Logo und Menü. Und section:first-of-type träfe neben dem Hero auch die Kalender-Spalte.
Best Practice
- Erst Vorlage, dann Feintuning: mit „Vorlage übernehmen" startest du in 5 Sekunden mit einem harmonischen Farbschema.
- Logo transparent: spart dir Ärger mit Hintergrundfarben.
- Weniger ist mehr: eine klare Hauptfarbe + dein Logo wirken professioneller als viele bunte Elemente.
- Vorschau prüfen: nach dem Speichern oben rechts „Meine Seite öffnen" – so siehst du deine Seite wie deine Gäste.
Häufige Fragen
Ich habe keinen Hex-Code für meine Farbe
Kein Problem – klick aufs Farbfeld und wähle die Farbe im Farbwähler. Oder nimm eine Farbwelt-Vorlage.
Mein Logo sieht zu groß/klein aus
Die Anzeige skaliert automatisch auf eine angenehme Höhe. Lade es als querformatige Wortmarke hoch (ca. 400 × 120 px), dann passt es gut.
Wie sieht mein Logo in den E-Mails aus?
Genauso wie hochgeladen, nur kleiner: PaintSlots misst dein Bild aus und behält das Seitenverhältnis. Eine quere Wortmarke bleibt quer, ein quadratisches Signet bekommt einen runden Rahmen. Du musst nichts einstellen.
Mein Logo fehlt in den E-Mails, auf der Buchungsseite ist es aber da
Dann liegt es in einem Format, das E-Mail-Programme nicht kennen – das kommt vor, wenn eine Datei nur auf .jpg umbenannt wurde. Lade es als PNG neu hoch.
Die Änderungen sind nicht sichtbar
Hast du Speichern geklickt? Lade danach die öffentliche Seite neu (ggf. einmal hart neu laden / Cache leeren).
Kann ich später alles ändern?
Ja, jederzeit – Branding ist komplett frei änderbar.