8.6 KiB
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. Danninger.
So füllst du das Template aus
- Öffne
index.html. - Suche (Suchen & Ersetzen im Editor) nach den Platzhaltern
[[…]]und ersetze sie durch die echten Werte des Betriebs. - Ersetze das Logo und (optional) die Bilder — siehe Abschnitte Logo und Bilder.
- Fertig. Die Seite ist eine statische Datei plus
support.js(Framework) und den Assets im Ordnerassets/.
Tipp: Jeder Platzhalter kommt teils mehrfach vor (z. B.
info@auto-danninger.dein Kontakt- block und Footer). „Alle ersetzen" verwenden, damit keine Fundstelle übrig bleibt.
Benötigte Daten (Platzhalter-Liste)
Firma & Marke
| Platzhalter | Bedeutung | Beispiel |
|---|---|---|
Danninger |
Kurzer Markenname (Logo-Alt, Google-Badge, Footer) | Musterlack |
Danninger Karosseriebau und Kraftfahrzeugservice GmbH |
Vollständiger Firmenname inkl. Rechtsform | Musterlack GmbH |
München |
Standort/Stadt (Footer, Über-uns, Karte) | Musterstadt |
2026 |
Jahr für den Copyright-Hinweis im Footer | 2026 |
Inhaber / Über uns
| Platzhalter | Bedeutung | Beispiel |
|---|---|---|
| `` | Name der Inhaberin / des Inhabers (Über-uns-Abschnitt) | Max Mustermann |
Kontakt & Anschrift
| Platzhalter | Bedeutung | Beispiel |
|---|---|---|
Wilramstraße 10 |
Straße + Hausnummer | Musterstr. 1 |
81669 |
Postleitzahl | 12345 |
München |
Ort (siehe oben, gleicher Wert) | Musterstadt |
089 686470 |
Telefonnummer, wie angezeigt | 01234 / 56 78 90 |
+4989686470 |
Telefonnummer im Link-Format (international, ohne Leerzeichen) | +4912345678900 |
| `` | Faxnummer (falls vorhanden) | 01234 / 56 78 91 |
info@auto-danninger.de |
E-Mail-Adresse | info@musterlack.de |
Öffnungszeiten
| Platzhalter | Bedeutung | Beispiel |
|---|---|---|
| `` | Erste Zeile: Tage | Montag – Freitag |
| `` | Erste Zeile: Zeiten | 09:00 – 13:00 · 14:00 – 17:00 |
| `` | Zweite Zeile: Tage | Samstag & Sonntag |
| `` | 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 |
|---|---|---|
4,8 |
Durchschnittliche Sternebewertung | 4,8 |
45 |
Anzahl der Bewertungen | 112 |
| `` | Google Place ID des Betriebs | ChIJ… |
Thomas K. |
Name Rezensent 1 (Demo/Fallback) | Sabine M. |
Schnelle, saubere Arbeit zu einem fairen Preis. Kann ich uneingeschraenkt weiterempfehlen. |
Text Rezension 1 | „Kratzer war komplett verschwunden …" |
Sandra M. |
Name Rezensent 2 | Thomas K. |
Sehr freundliches Team, kompetente Beratung und das Ergebnis war top. Gerne wieder. |
Text Rezension 2 | „Top Beratung, saubere Arbeit …" |
Michael B. |
Name Rezensent 3 | Petra L. |
Unkomplizierte Abwicklung, alles bestens erklaert. Auto sah aus wie neu. |
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/reviewslive 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 |
|---|---|---|
11.60471 |
Längengrad des Standorts (im <script>, Konstante LNG) |
7.7269 |
48.11469 |
Breitengrad des Standorts (im <script>, Konstante LAT) |
49.4443 |
Wilramstraße 10, 81669 München |
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/LATin derinitMap()-Funktion inindex.htmleintragen. 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 beidensrc="assets/logo-placeholder.svg"inindex.htmlanpassen. - 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.