Anleitung · 6 Min. Lesezeit

Vom ZIP zur Live-Website in drei Schritten.

Keine Build-Tools, keine Datenbank, kein CMS. Eine Vorlage ist ein Ordner mit HTML-, CSS- und JavaScript-Dateien und Bildern — wer eine Textdatei bearbeiten und einen Ordner hochladen kann, kann sie ausliefern. Diese Anleitung liegt auch jedem ZIP bei (START-HERE.md, auf Englisch).

01

Herunterladen & entpacken

Nach der Zahlung erhalten Sie einen Download-Link per E-Mail. Entpacken Sie das ZIP an einem beliebigen Ort auf Ihrem Computer.

Was drin ist

Jede Vorlage liegt in einem eigenen Ordner, nach Branchen sortiert. Beim Einzelkauf erhalten Sie nur die gewählten Ordner.

START-HERE.md     Anleitung (Englisch)
UPUTSTVO.md       Anleitung (BKS)
LICENSE.txt       was Sie dürfen
TEMPLATES.csv     Liste der Vorlagen
templates/
  restaurants-inns/
    weisses-lamm/
      index.html    Startseite
      zimmer.html   …weitere Seiten
      assets/img/   alle Fotos
      CREDITS.md    Bildquellen

Ansehen

Doppelklick auf index.html öffnet die Website im Browser. Für alles (Videos, WebGL-Effekte) nutzen Sie einen kleinen lokalen Server — die kostenlose Live-Server-Erweiterung in VS Code oder einen einzigen Befehl:

cd templates/restaurants-inns/weisses-lamm
python3 -m http.server 8000
# http://localhost:8000 öffnen
02

Texte, Logo, Farben & Fotos ändern

Öffnen Sie den Vorlagenordner in einem Code-Editor — Visual Studio Code ist kostenlos. Mit „In Dateien suchen“ (Strg/Cmd + Umschalt + F) finden Sie jede Stelle mit Name, Telefonnummer oder E-Mail.

Name & Logo

Suchen Sie den Demo-Firmennamen und ersetzen Sie ihn. Für ein Bildlogo legen Sie die Datei in assets/img ab und verweisen im Header darauf.

<img src="assets/img/logo.svg"
     alt="Name des Kunden" height="40">

Farben & Schriften

Die Farben sind CSS-Variablen ganz oben im Stylesheet. Einmal ändern — die ganze Website folgt. Schriften sind ein einziger <link> im <head>.

:root {
  --accent: #b23a2e;   /* Markenfarbe */
  --ink: #1d1a16;
}

Texte & SEO

Ändern Sie die Wörter zwischen den HTML-Tags. Danach <title>, Meta-Beschreibung, Open-Graph-Tags und Canonical-URL mit den Daten und der Domain des Kunden aktualisieren.

<title>Kunde — Leistung in Stadt</title>
<meta name="description"
      content="Ein klarer Satz…">

Fotos

Am einfachsten: Das Foto des Kunden unter exakt demselben Dateinamen speichern und das alte in assets/img überschreiben. Ähnliches Format, etwa 1600–2000 px breit, JPEG/WebP mit ca. 80 % (squoosh.app). Alt-Text anpassen.

Kontaktformular

Die Formulare arbeiten nur im Frontend. Sie binden sie in wenigen Minuten an — z. B. Formspree (kostenloser Tarif) oder Netlify Forms — und entfernen den Demo-Handler, falls die Vorlage einen hat.

<form action="https://formspree.io/f/IHRE_ID"
      method="POST">
03

Online stellen

Laden Sie den Inhalt des Vorlagenordners so hoch, dass index.html auf der obersten Ebene der Website liegt. Jedes statische Hosting funktioniert.

Netlify Drop — ohne Einrichtung

app.netlify.com/drop öffnen und den Vorlagenordner ins Browserfenster ziehen. In Sekunden haben Sie eine Live-URL; die Domain des Kunden fügen Sie in den Website-Einstellungen hinzu.

Vercel

CLI einmal installieren und dann im Vorlagenordner ausführen (Framework „Other“, kein Build-Befehl).

npm i -g vercel
cd weisses-lamm
vercel

cPanel / klassisches Hosting

Dateimanager öffnen (oder FileZilla per FTP) und alle Dateien und Ordner nach public_html/ hochladen — bzw. in den Ordner der Domain. HTTPS aktivieren.

Funktioniert auch auf

GitHub Pages, Cloudflare Pages, S3 — jedem Hosting, das statische Dateien ausliefert.

Weißes Lamm
Das Ergebnis: dieselbe Vorlage, live auf der Domain des Kunden. Lighthouse mobil 72 für diese Vorlage, unverändert.

04

Bevor Sie an den Kunden übergeben

  • Name, Logo und Favicon überall ersetzt (Header, Footer, Titel, Rechtsseiten)
  • Alle Demo-Kontaktdaten ersetzt — Telefon, WhatsApp, E-Mail, Adresse, Öffnungszeiten, Social Links, Karte
  • Texte, Preise und Leistungen für den Kunden geschrieben — keine erfundenen Bewertungen
  • Fotos nach Möglichkeit ersetzt, Alt-Texte aktualisiert, CREDITS.md beachtet
  • Kontakt- und Buchungsformulare angebunden und mit einer echten Nachricht getestet
  • Rechtsseiten (Impressum, Datenschutz) für das Land des Kunden erstellt
  • <title>, Meta-Beschreibung, Open-Graph-Bild, Canonical-URL, sitemap.xml und robots.txt aktualisiert
  • Auf Smartphone, Tablet und Desktop getestet; HTTPS aktiv

Bereit loszulegen?

Alle Vorlagen — 250 €Einzeln auswählen — 10 € pro Vorlage