knso/preview-kiesmueller-gmbh-co-kg
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
preview-kiesmueller-gmbh-co-kg/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. Kiesmüller.

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

Benötigte Daten (Platzhalter-Liste)

Firma & Marke

Platzhalter Bedeutung Beispiel
Kiesmüller Kurzer Markenname (Logo-Alt, Google-Badge, Footer) Musterlack
Kiesmüller GmbH & Co. KG 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
Hans Kiesmüller Name der Inhaberin / des Inhabers (Über-uns-Abschnitt) Max Mustermann

Kontakt & Anschrift

Platzhalter Bedeutung Beispiel
Stuttgarter Straße 10 Straße + Hausnummer Musterstr. 1
80807 Postleitzahl 12345
München Ort (siehe oben, gleicher Wert) Musterstadt
089 358122-0 Telefonnummer, wie angezeigt 01234 / 56 78 90
+498935812200 Telefonnummer im Link-Format (international, ohne Leerzeichen) +4912345678900
`` Faxnummer (falls vorhanden) 01234 / 56 78 91
info@kiesmueller.eu E-Mail-Adresse info@musterlack.de

Öffnungszeiten

Platzhalter Bedeutung Beispiel
Mo–Do Erste Zeile: Tage Montag – Freitag
07:30–12:00 & 13:00–17:00 Uhr Erste Zeile: Zeiten 09:00 – 13:00 · 14:00 – 17:00
Fr Zweite Zeile: Tage Samstag & Sonntag
07:30–14: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
4.4 Durchschnittliche Sternebewertung 4,8
83 Anzahl der Bewertungen 112
`` Google Place ID des Betriebs ChIJ…
Thomas B. Name Rezensent 1 (Demo/Fallback) Sabine M.
Schnelle, saubere Lackierung nach einem Parkrempler – der Wagen sah aus wie neu. Ehrliche und freundliche Beratung. Text Rezension 1 „Kratzer war komplett verschwunden …"
Sabine K. Name Rezensent 2 Thomas K.
Unfallschaden komplett abgewickelt, alles unkompliziert mit der Versicherung. Top Handwerk, gerne wieder. Text Rezension 2 „Top Beratung, saubere Arbeit …"
Michael R. Name Rezensent 3 Petra L.
Traditionsbetrieb mit viel Erfahrung, faire Preise und ein Ergebnis, das man vom Original nicht unterscheiden kann. 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
Stuttgarter Straße 10, 80807 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/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