knso/preview-karosserie-und-lackierzentrum-grathwohl-gmbh
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
preview-karosserie-und-lack…/AUSFUELLEN.md

7.7 KiB
Raw Permalink Blame History

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. Grathwohl.

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. info-kaiserslautern@klz-grathwohl.de in Kontakt- block und Footer). „Alle ersetzen" verwenden, damit keine Fundstelle übrig bleibt.

Benötigte Daten (Platzhalter-Liste)

Firma & Marke

Platzhalter Bedeutung Beispiel
Grathwohl Kurzer Markenname (Logo-Alt, Google-Badge, Footer) Musterlack
Karosserie- und Lackierzentrum Grathwohl GmbH Vollständiger Firmenname inkl. Rechtsform Musterlack GmbH
Kaiserslautern 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
Ländelstraße 62 Straße + Hausnummer Musterstr. 1
67657 Postleitzahl 12345
Kaiserslautern Ort (siehe oben, gleicher Wert) Musterstadt
0631 / 3 40 47 47 Telefonnummer, wie angezeigt 01234 / 56 78 90
+496313404747 Telefonnummer im Link-Format (international, ohne Leerzeichen) +4912345678900
0631 / 3 40 47 46 Faxnummer (falls vorhanden) 01234 / 56 78 91
info-kaiserslautern@klz-grathwohl.de E-Mail-Adresse info@musterlack.de

Öffnungszeiten

Platzhalter Bedeutung Beispiel
Montag – Donnerstag Erste Zeile: Tage Montag – Freitag
07:30 – 12:15 · 13:00 – 18:30 Erste Zeile: Zeiten 09:00 – 13:00 · 14:00 – 17:00
Freitag Zweite Zeile: Tage Samstag & Sonntag
07:00 – 12:00 · 13:00 – 17:00 · Sa n. Vereinbarung 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,5 Durchschnittliche Sternebewertung 4,8
91 Anzahl der Bewertungen 112
ChIJQaYSGegSlkcRB2GMH-2-TYo Google Place ID des Betriebs ChIJ…
Sabine M. Name Rezensent 1 (Demo/Fallback) Sabine M.
„Kratzer war komplett verschwunden – schnelle Terminvergabe und faires Angebot.“ Text Rezension 1 „Kratzer war komplett verschwunden …"
Thomas K. Name Rezensent 2 Thomas K.
„Top Beratung, saubere Arbeit, Auto kam sogar gereinigt zurück.“ Text Rezension 2 „Top Beratung, saubere Arbeit …"
Petra L. Name Rezensent 3 Petra L.
„Delle wie neu, Farbton perfekt getroffen – gerne wieder!“ 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
7.783197 Längengrad des Standorts (im <script>, Konstante LNG) 7.7269
49.450041 Breitengrad des Standorts (im <script>, Konstante LAT) 49.4443
Laendelstrasse+62,+67657+Kaiserslautern 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.

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).

Reference in New Issue View Git Blame Copy Permalink