GZ Handwerker-Web

Was ist GZ Handwerker-Web?

GZ Handwerker-Web ist ein Website-Konfigurator für Handwerksbetriebe. Sie füllen ein paar Felder aus, wählen Farben und ein Design — und erhalten am Ende eine komplett fertige, professionelle Website als eine einzige HTML-Datei. Ohne Programmierkenntnisse, ohne Baukasten-Abo, ohne monatliche Gebühr.

Sie bauen z. B. die Seite für einen Maler-, Metallbau- oder Dachdeckerbetrieb: Startbereich mit Slogan, Leistungs-Karten, Referenz-Galerie, Über-uns, Kontakt, Impressum und Datenschutz — alles automatisch im gewählten Look.

Starten & Lizenz freischalten

1. Die Datei GZ Handwerker-Web.html per Doppelklick öffnen. Sie startet im Standard-Browser (Chrome, Edge, Firefox).
2. Beim ersten Start erscheint das Lizenz-Fenster. Geben Sie Ihren Lizenzschlüssel ein (Format GZWEB-PRO-XXXXXXXX-...), den Sie nach dem Kauf erhalten haben.
3. Auf Freischalten klicken. Der Schlüssel wird im Browser gespeichert — Sie müssen ihn nur einmal eingeben.
4. Danach öffnet sich der Konfigurator mit Live-Vorschau.

Die Oberfläche im Überblick

Der Bildschirm ist zweigeteilt:

• Links — der Konfigurator mit aufklappbaren Abschnitten (Firma, Design, Hintergrund, Farben, Inhalte …).
• Rechts — die Live-Vorschau. Jede Änderung erscheint sofort. Oben können Sie zwischen Desktop und Mobil umschalten.

Ganz oben rechts liegen drei Schaltflächen: Konfiguration sichern, Laden und Website exportieren.

Firma & Logo

Der erste Abschnitt legt die Grunddaten fest:

Design — Stil & Schrift

Stil-Vorlage

Neun in sich abgestimmte Vorlagen. Farben, Hintergrund und Kontraste passen automatisch zusammen:

Schriftart

Zehn Profi-Schriften — fünf Einzel-Schriften (Modern (Sans), Technisch (Grotesk), Klassisch (Serif), Robust (Slab), Freundlich (Rund)) und fünf Schrift-Paare, bei denen Überschriften und Fließtext bewusst unterschiedliche Schriften verwenden (z. B. Slab-Titel + Sans-Text oder Serif-Titel + Sans-Text) — das wirkt wie von einer Agentur gesetzt. Alle sind System-Schriften — sie werden nicht aus dem Internet geladen und funktionieren überall.

Farbverlauf — 3 Farben mischen

Hier mischen Sie aus drei frei wählbaren Farben einen Verlauf. Dieser Verlauf erscheint in Überschriften, Buttons und Akzenten — ähnlich einem Logo-Schriftzug.

1. Mit den drei Farbfeldern (Farbe 1, 2, 3) je eine Farbe wählen.
2. Oder unter Schnellauswahl einen fertigen Verlauf anklicken (Cyber, Sonnenuntergang, Stahl & Glut, Wald, Edelmetall, Ozean).
3. Der Vorschau-Balken zeigt das Ergebnis sofort.

Seiten-Hintergrund

Der Hintergrund liegt hinter der gesamten Seite (fixiert). Sie haben drei Möglichkeiten:

• Eigenes Bild hochladen — wird in die Website eingebettet.
• Eine Vorlage wählen — 24 lizenzfreie Muster: Beton (dunkel/hell), Stahl gebürstet, Holz dunkel, Blueprint, weicher Verlauf (dunkel/hell/warm), Leinen, Karbon, Riffelblech, Ziegel, Kohle, Punkte (dunkel/hell), Waben, Sand/Putz, Schiefer, Kupfer/Patina, Marmor, Rauten, Schraffur, Asphalt, Gitter (fein).
• Kein — der Standard-Hintergrund des gewählten Stils.

Mit dem Regler Lesbarkeits-Schleier legen Sie einen dunklen bzw. hellen Schleier über das Bild, damit der Text gut lesbar bleibt. Höherer Wert = ruhiger.

Farben pro Bereich

Jeder Abschnitt der Website kann eigene Farben bekommen: Hero, Leistungen, Galerie, Über uns, Aufruf-Banner (CTA) und Kontakt. Pro Bereich gibt es drei Farbfelder:

Mit dem ↺-Knopf neben einem Feld setzen Sie es auf den Stil-Standard zurück (Feld bleibt „leer" = erbt automatisch).

Inhalte: Hero, Leistungen, Galerie, Bewertungen

Startbereich (Hero)

• Kleiner Obertitel — Schlagworte über dem großen Titel (z. B. „Schlosserei · Metallbau · Schweißtechnik").
• Hero-Bild — Ihr bestes Referenzfoto, groß oben rechts. Ohne Bild zeigt die Seite einen dezenten Platzhalter.
• Vertrauens-Punkte — drei kurze Stichworte (z. B. „Meister", „Region", „Eigene Fertigung").

Leistungen

Beliebig viele Leistungs-Karten mit Titel und kurzem Text. Mit + Leistung hinzufügen erweitern, mit × entfernen. Mit den Pfeilen ▲ ▼ ändern Sie die Reihenfolge der Karten — so steht Ihre wichtigste Leistung ganz oben.

Karten-Stil

Der Abschnitt Karten-Stil — Standard für alle Bereiche legt die Grund-Optik fest. Diese Werte gelten überall, solange ein Bereich nichts Eigenes vorgibt:

Über uns (mit Text-Vorlagen)

Im Abschnitt Über uns gestalten Sie den Vorstellungs-Block frei — jedes Feld lässt sich selbst schreiben oder per Vorlage befüllen:

• Überschrift — die große Zeile über dem Text. Über das Auswahlfeld „↳ Vorlage einsetzen …" übernehmen Sie eine von mehreren allgemeinen Überschriften und passen sie danach an.
• Beschreibung — der Fließtext darunter. Auch hier gibt es ein Vorlagen-Auswahlfeld mit fertigen, branchenneutralen Formulierungen, die Sie nach Belieben überschreiben.
• Vorteils-Punkte (mit ✓) — die Liste mit den grünen Häkchen. Über „↳ Vorlagen-Set einsetzen …" laden Sie ein komplettes 4er-Set (z. B. „Vertrauen & Service", „Erfahrung & Qualität", „Familienbetrieb"). Jeden Punkt können Sie einzeln bearbeiten, mit ▲ ▼ sortieren, mit × löschen oder über + Punkt hinzufügen ergänzen.

Navigation / Menü-Beschriftungen

Im Abschnitt Navigation / Menü-Beschriftungen ändern Sie die Texte der Menüpunkte oben im Kopf der Website — also was die Besucher dort lesen. Sie können z. B. „Home" in „Start" umbenennen oder „Leistungen" in „Was wir tun":

• Startseite-Link (Standard: „Home") — springt nach ganz oben.
• Leistungen-Link — springt zum Leistungen-Bereich.
• Referenzen-/Galerie-Link — erscheint nur, wenn Galerie-Bilder vorhanden sind.
• Über-uns-Link — springt zum Über-uns-Bereich.
• Kontakt-Link — springt zum Kontaktbereich.

Galerie / Referenzfotos

Mehrere Bilder auf einmal hochladen. Die Seite zeigt sie als anklickbare Galerie mit Großansicht (Lightbox).

Firmen-Vorstellung (Bild + Text, beliebig viele)

Im Abschnitt Firmen-Vorstellung stellen Sie Ihre Firma mit beliebig vielen Bild-und-Text-Blöcken vor — etwa Team, Werkstatt, Firmengeschichte oder Maschinenpark. Geben Sie dem Bereich eine Überschrift und optional einen Einleitungstext. Mit + Bild-Text-Block hinzufügen legen Sie so viele Blöcke an, wie Sie möchten; jeder Block hat ein Bild, eine Überschrift und einen Text.

• Die Blöcke werden auf der Website abwechselnd dargestellt (Bild links / Bild rechts) und passen ihr Layout auf dem Handy automatisch an.
• Mit den Pfeilen ▲ ▼ ordnen Sie die Reihenfolge, mit × löschen Sie einen Block.
• Die Bilder übernehmen automatisch Ihren Karten-Stil (Ecken-Rundung, Rahmen, Schatten). Fehlt ein Bild, erscheint ein dezenter Platzhalter.
• Über das Häkchen Firmen-Vorstellung anzeigen blenden Sie den ganzen Bereich an oder aus. Der passende Menüpunkt erscheint nur, wenn der Bereich aktiv ist und mindestens ein Block Inhalt hat.

Kundenstimmen / Bewertungen

Im Abschnitt Kundenstimmen / Bewertungen tragen Sie echte Referenz-Zitate selbst ein: Zitat, Name, optionaler Ort und eine Sterne-Bewertung (1–5). Auf der Website erscheinen sie als ansprechende Karten-Reihe mit Sternen. Über das Häkchen Bewertungs-Bereich anzeigen blenden Sie den ganzen Bereich an oder aus.

Kontakt & Rechtstexte

Kontakt

Telefon, E-Mail, Adresse, Öffnungszeiten, anzuzeigende Domain und ein optionaler Google-Maps-Link. Das Kontaktformular lässt sich an- und abschalten; es öffnet beim Absenden das E-Mail-Programm des Besuchers (keine Server-Übertragung).

Öffnungszeiten — Text oder Wochen-Tabelle

Bei Öffnungszeiten — Darstellung wählen Sie zwischen zwei Varianten:

Rechtstexte (Impressum & Datenschutz)

Felder für verantwortliche Person, Firmenbezeichnung, Anschrift, Telefon, E-Mail und (optional) USt-IdNr. Daraus erzeugt die Website ein Impressum und eine Datenschutzerklärung als aufklappbare Fenster.

Das Impressum ist auf dem aktuellen Stand: Angaben gemäß § 5 DDG (Digitale-Dienste-Gesetz, seit 2024 anstelle des § 5 TMG) und die Verantwortlichkeit nach § 18 Abs. 2 MStV (Medienstaatsvertrag, anstelle des früheren § 55 RStV).

Die Datenschutzerklärung ist ein ausführliches DSGVO-Muster mit Abschnitten zu Verantwortlichem, Hosting/Server-Logfiles, Kontaktaufnahme, Speicherdauer, Betroffenenrechten (Auskunft, Berichtigung, Löschung u. a.) und Beschwerderecht bei der Aufsichtsbehörde. Bitte passen Sie es an Ihre tatsächliche Datenverarbeitung an — etwa wenn Sie ein bestimmtes Hosting, Analyse-Tools oder externe Schriftarten einsetzen.

SEO (Suchmaschinen)

Drei Felder helfen beim Gefundenwerden bei Google:

• Seitentitel — erscheint als Tab-Titel und in den Suchergebnissen.
• Beschreibung — der kurze Text unter dem Titel im Suchergebnis.
• Schlagwörter — kommagetrennte Begriffe.

Zusätzlich wird automatisch ein LocalBusiness-Schema erzeugt — strukturierte Daten, die Google den Betrieb (Adresse, Telefon, Öffnungszeiten) maschinenlesbar mitteilen.

Speichern & Website exportieren

1. Konfiguration sichern — speichert Ihre Eingaben als kleine Konfigurations-Datei (zum späteren Weiterbearbeiten oder als Sicherung). Es öffnet sich ein „Speichern unter"-Dialog; Sie wählen Ort und Namen selbst.
2. Laden — lädt eine zuvor gesicherte Konfiguration wieder ein.
3. Website exportieren — erzeugt die fertige Website als eine einzige HTML-Datei. Diese Datei ist Ihre echte Website.

Website online stellen

Die exportierte index.html ist eine ganz normale Website. So bringen Sie sie ins Netz:

1. Datei in index.html umbenennen (falls nötig).
2. Bei Ihrem Webhoster (z. B. über das Kundenmenü oder per FTP) in das Web-Verzeichnis hochladen.
3. Ihre Domain zeigt nun auf die Seite — fertig.

Warum alles offline läuft

GZ Handwerker-Web sendet keine Daten ins Internet — weder das Programm noch die fertige Website. Das ist bewusst so gebaut:

Fehlerbehebung

Rechtliche Hinweise

Verwenden Sie nur Bilder, an denen Sie die Rechte besitzen. Achten Sie auf eine vollständige, ladungsfähige Anschrift im Impressum.

Kontakt & Support

Bei Fragen oder Problemen: