202 lines
8.8 KiB
Markdown
202 lines
8.8 KiB
Markdown
# Website-Template für Autolackierereien — Ausfüllanleitung
|
||
|
||
## Für wen ist dieses Template?
|
||
|
||
Dieses Template ist eine fertige, moderne One-Page-Website für **Autolackierer,
|
||
Lackier- und Karosseriebetriebe**. Es entstand aus einer echten Kundenwebsite und
|
||
wurde vollständig **anonymisiert**: Alle personen- und firmenbezogenen Daten wurden
|
||
durch Platzhalter ersetzt. So kann es für **jeden beliebigen Lackierbetrieb**
|
||
wiederverwendet werden.
|
||
|
||
Die Website enthält bereits ausformulierte, branchentypische Texte (Hero, Leistungen,
|
||
Über-uns, Philosophie). Diese Texte sind allgemeingültig gehalten und können 1:1
|
||
übernommen oder nach Belieben angepasst werden. **Konkret ausgefüllt werden müssen nur
|
||
die unten aufgelisteten Platzhalter** — alles, was in doppelten eckigen Klammern steht,
|
||
z. B. `Karosseriebau Woll`.
|
||
|
||
---
|
||
|
||
## So füllst du das Template aus
|
||
|
||
1. Öffne `index.html`.
|
||
2. Suche (Suchen & Ersetzen im Editor) nach den Platzhaltern `[[…]]` und ersetze sie
|
||
durch die echten Werte des Betriebs.
|
||
3. Ersetze das Logo und (optional) die Bilder — siehe Abschnitte **Logo** und **Bilder**.
|
||
4. Fertig. Die Seite ist eine statische Datei plus `support.js` (Framework) und den
|
||
Assets im Ordner `assets/`.
|
||
|
||
> **Tipp:** Jeder Platzhalter kommt teils mehrfach vor (z. B. `mail@kabawos.de` in Kontakt-
|
||
> block und Footer). „Alle ersetzen" verwenden, damit keine Fundstelle übrig bleibt.
|
||
|
||
---
|
||
|
||
## Benötigte Daten (Platzhalter-Liste)
|
||
|
||
### Firma & Marke
|
||
| Platzhalter | Bedeutung | Beispiel |
|
||
|---|---|---|
|
||
| `Karosseriebau Woll` | Kurzer Markenname (Logo-Alt, Google-Badge, Footer) | Musterlack |
|
||
| `Karosseriebau Woll (Inh. Alexander Woll)` | Vollständiger Firmenname inkl. Rechtsform | Musterlack GmbH |
|
||
| `Schellweiler` | Standort/Stadt (Footer, Über-uns, Karte) | Musterstadt |
|
||
| `2026` | Jahr für den Copyright-Hinweis im Footer | 2026 |
|
||
|
||
### Inhaber / Über uns
|
||
| Platzhalter | Bedeutung | Beispiel |
|
||
|---|---|---|
|
||
| `Alexander Woll` | Name der Inhaberin / des Inhabers (Über-uns-Abschnitt) | Max Mustermann |
|
||
|
||
### Kontakt & Anschrift
|
||
| Platzhalter | Bedeutung | Beispiel |
|
||
|---|---|---|
|
||
| `Etschberger Str. 1-3` | Straße + Hausnummer | Musterstr. 1 |
|
||
| `66869` | Postleitzahl | 12345 |
|
||
| `Schellweiler` | Ort (siehe oben, gleicher Wert) | Musterstadt |
|
||
| `06381 995668` | Telefonnummer, wie angezeigt | 01234 / 56 78 90 |
|
||
| `+496381995668` | Telefonnummer im Link-Format (international, ohne Leerzeichen) | +4912345678900 |
|
||
| `` | Faxnummer (falls vorhanden) | 01234 / 56 78 91 |
|
||
| `mail@kabawos.de` | E-Mail-Adresse | info@musterlack.de |
|
||
|
||
### Öffnungszeiten
|
||
| Platzhalter | Bedeutung | Beispiel |
|
||
|---|---|---|
|
||
| `Mo-Fr` | Erste Zeile: Tage | Montag – Freitag |
|
||
| `17:30-20:00 Uhr` | Erste Zeile: Zeiten | 09:00 – 13:00 · 14:00 – 17:00 |
|
||
| `Sa` | Zweite Zeile: Tage | Samstag & Sonntag |
|
||
| `09:00-17:00 Uhr` | Zweite Zeile: Zeiten | Geschlossen |
|
||
|
||
### Social Media
|
||
| Platzhalter | Bedeutung | Beispiel |
|
||
|---|---|---|
|
||
| `` | Link zur Facebook-Seite (Referenzen + Footer) | https://www.facebook.com/musterlack |
|
||
|
||
### Google-Bewertungen (Badge + Bewertungskarte)
|
||
| Platzhalter | Bedeutung | Beispiel |
|
||
|---|---|---|
|
||
| `5,0` | Durchschnittliche Sternebewertung | 4,8 |
|
||
| `8` | Anzahl der Bewertungen | 112 |
|
||
| `` | Google Place ID des Betriebs | ChIJ… |
|
||
| `Michael B.` | Name Rezensent 1 (Demo/Fallback) | Sabine M. |
|
||
| `Schnelle, saubere Arbeit zu einem fairen Preis. Der Schaden am Kotflügel ist perfekt und unsichtbar behoben. Sehr freundlicher und persönlicher Kontakt.` | Text Rezension 1 | „Kratzer war komplett verschwunden …" |
|
||
| `Sandra K.` | Name Rezensent 2 | Thomas K. |
|
||
| `Kompetente Beratung und top Lackierergebnis. Man merkt, dass hier echte Handwerker mit Herzblut am Werk sind. Jederzeit wieder!` | Text Rezension 2 | „Top Beratung, saubere Arbeit …" |
|
||
| `Thomas W.` | Name Rezensent 3 | Petra L. |
|
||
| `Unkomplizierte Abwicklung des Unfallschadens, alles wie versprochen und pünktlich fertig. Absolut empfehlenswerter Betrieb.` | Text Rezension 3 | „Delle wie neu, gerne wieder …" |
|
||
|
||
> **Hinweis zu Google-Bewertungen:** Die drei Rezensionen sind nur ein Fallback für die
|
||
> Vorschau. In der produktiven Umgebung können sie über einen eigenen Backend-Endpunkt
|
||
> `/api/reviews` **live** aus Google Places geladen werden. Der Google-API-Key bleibt
|
||
> dabei server-seitig. Ohne Backend werden einfach die eingetragenen Demo-Werte gezeigt.
|
||
|
||
### Standort-Karte (MapLibre)
|
||
| Platzhalter | Bedeutung | Beispiel |
|
||
|---|---|---|
|
||
| `` | Längengrad des Standorts (im `<script>`, Konstante `LNG`) | 7.7269 |
|
||
| `` | Breitengrad des Standorts (im `<script>`, Konstante `LAT`) | 49.4443 |
|
||
| `Etschberger Str. 1-3, 66869 Schellweiler` | Zieladresse für „Route planen" (URL-kodiert) | Musterstr.+1,+12345+Musterstadt |
|
||
|
||
> Die Karte ist als Vorbelegung auf die **geografische Mitte Deutschlands** gesetzt,
|
||
> damit sie auch ohne Eintrag funktioniert. Für den echten Standort die Werte `LNG`/`LAT`
|
||
> in der `initMap()`-Funktion in `index.html` eintragen. Koordinaten findest du z. B.,
|
||
> indem du den Standort in Google Maps mit Rechtsklick anwählst.
|
||
|
||
---
|
||
|
||
## Logo
|
||
|
||
Das Logo ist ein **Platzhalter**: `assets/logo-placeholder.svg` (zeigt „IHR LOGO").
|
||
Es wird an zwei Stellen eingebunden (Navigation oben + Footer).
|
||
|
||
- **Einfachste Variante:** Eigenes Logo als `assets/logo-placeholder.svg` (oder z. B.
|
||
`assets/logo.png`) ablegen und die beiden `src="assets/logo-placeholder.svg"` in
|
||
`index.html` anpassen.
|
||
- Empfohlen: helles/weißes Logo, da der Hintergrund dunkel ist. Höhe in der Navigation
|
||
ist auf 26 px begrenzt.
|
||
|
||
---
|
||
|
||
## Bilder & Video
|
||
|
||
**Beibehaltene Medien (bereits im Template enthalten):**
|
||
|
||
- `assets/leistungen-video.mp4` — **Video im Leistungen-Bereich (bewusst beibehalten).**
|
||
- `assets/hero-tankklappe.jpg` — Hintergrundbild Hero (stimmungsvoll, blau eingefärbt).
|
||
- `assets/bg-radkasten.jpg` — Hintergrundbild Referenzen.
|
||
- `assets/bg-vorderlicht.jpg` — Hintergrundbild Kontakt.
|
||
|
||
Diese Hintergrundbilder sind stark gefiltert und dienen als Textur/Atmosphäre. Sie
|
||
können übernommen oder durch eigene Werkstatt-/Fahrzeugfotos ersetzt werden (gleicher
|
||
Dateiname genügt).
|
||
|
||
**Entfernt:**
|
||
|
||
- Der **Vorher/Nachher-Vergleich** (Schieberegler mit Werkstattfotos) im Referenzen-
|
||
Bereich wurde entfernt und durch eine **Foto-Galerie mit leeren Platzhaltern** ersetzt.
|
||
|
||
**Zu befüllen — Foto-Platzhalter (Drag & Drop):**
|
||
|
||
Diese nutzen die Komponente `assets/image-slot.js`. Einfach ein Bild per Drag & Drop in
|
||
den Platzhalter ziehen (oder anklicken zum Auswählen).
|
||
|
||
| Slot-ID | Ort | Zweck |
|
||
|---|---|---|
|
||
| `profil-inhaber` | Über uns | Profilbild der Inhaberin / des Inhabers |
|
||
| `ref-1` | Referenzen | Großes Projektfoto (z. B. Vorher/Nachher) |
|
||
| `ref-2` … `ref-5` | Referenzen | Weitere Projektfotos |
|
||
|
||
---
|
||
|
||
## Rechtliches (nicht vergessen!)
|
||
|
||
Die Footer-Links **Impressum** und **Datenschutz** (`#impressum`, `#datenschutz`) sind
|
||
aktuell nur Anker. Vor dem Livegang müssen ein rechtskonformes **Impressum** und eine
|
||
**Datenschutzerklärung** ergänzt werden (Pflicht in Deutschland).
|
||
|
||
---
|
||
|
||
## Technische Struktur (Kurzüberblick)
|
||
|
||
```
|
||
template/
|
||
├─ index.html ← die Website (hier alle [[…]] ersetzen)
|
||
├─ support.js ← Framework (unverändert lassen)
|
||
├─ AUSFUELLEN.md ← diese Anleitung
|
||
└─ assets/
|
||
├─ logo-placeholder.svg ← Logo ersetzen
|
||
├─ leistungen-video.mp4 ← Video (beibehalten)
|
||
├─ hero-tankklappe.jpg ← Hero-Hintergrund
|
||
├─ bg-radkasten.jpg ← Referenzen-Hintergrund
|
||
├─ bg-vorderlicht.jpg ← Kontakt-Hintergrund
|
||
├─ image-slot.js ← Foto-Platzhalter-Komponente
|
||
├─ benefit01–03.svg ← Icons Hero-Benefits
|
||
└─ review.svg ← Sterne-Grafik Google-Badge
|
||
```
|
||
|
||
Die Farbe des Designs (Akzentfarbe) lässt sich oben im `<script>`-Datenblock bzw. über
|
||
`--accent` steuern (Voreinstellung Blau `#2FA4F0`).
|
||
|
||
---
|
||
|
||
## Farbwelt (ab Anreicherung 2.0)
|
||
|
||
Alle markentragenden Farben stehen als CSS-Variablen im Block zwischen
|
||
`/* WK-THEME-START */` und `/* WK-THEME-END */` ganz oben im `<style>`.
|
||
Wer das Template von Hand einfärben will, ändert nur diesen Block — der Rest
|
||
der Seite folgt automatisch (Sektionen, dekorative Bänder, Buttons, Overlays
|
||
und der `hue-rotate`-Winkel der Hintergrundfotos).
|
||
|
||
Die Anreicherungs-Routine ersetzt genau diesen Block pro Betrieb mit einer aus
|
||
dem Logo abgeleiteten, kontrastgeprüften Palette und legt sie zusätzlich als
|
||
`.webklar-theme.json` im Repo ab.
|
||
|
||
## Texte pro Betrieb (`data-wk-copy`)
|
||
|
||
Elemente mit `data-wk-copy="…"` (Hero-Subline, Leistungskarten, Über-uns,
|
||
Philosophie, Kontakt-Intro) sind die Stellen, die pro Betrieb neu geschrieben
|
||
werden. Der Inhalt darf komplett ersetzt werden; die Struktur bleibt.
|
||
|
||
## Leere Bereiche (`data-wk-section`)
|
||
|
||
`data-wk-section="referenzen"` und `data-wk-section="inhaber-foto"` werden
|
||
ausgeblendet (`hidden`), wenn dafür keine echten Bilder vorliegen — statt ein
|
||
leeres Gerüst zu zeigen.
|