Site Builder Handbuch

Einführung

Der NEXUS Site Builder ist ein KI-gestützter Website-Builder, der speziell für kleine Unternehmen entwickelt wurde. Erstellen Sie in Minuten eine professionell aussehende Website — ohne Programmierkenntnisse.

Was bekommen Sie?

• KI-generierte Inhalte — Die KI generiert Texte und Struktur basierend auf Ihren Geschäftsdaten
• 13 Abschnittstypen — Hero, Dienstleistungen, Bewertungen, Team, FAQ und mehr
• Live-Vorschau — Alle Änderungen erscheinen sofort in der Vorschau auf der rechten Seite
• Automatisches Speichern — Speichert automatisch nach 2 Sekunden Inaktivität
• Rückgängig/Wiederholen — Strg+Z / Strg+Y, bis zu 30 Schritte
• HTML-Download — Eine einzige, eigenständige HTML-Datei, überall hostbar

Erste Schritte

1. Zum Builder navigieren

Nach der Anmeldung ist der Builder verfügbar:

• Vom Chat Seitenkopf → "Site Builder" Button
• Von der Konto Seite → "Website-Builder" Button
• Direkt: /builder URL

2. Onboarding-Fragebogen

Wenn Sie noch keine Website haben, begrüßt Sie der Onboarding-Fragebogen. Geben Sie an:

• Unternehmensname (erforderlich) — z.B. "Schmidts Friseursalon"
• Typ (erforderlich) — wählen Sie die passende Kategorie
• Dienstleistungen — kommagetrennt, z.B. "Haarschnitt, Färben, Strähnen"
• Kontaktdaten — Telefon, Adresse, Öffnungszeiten
• Ton — professionell, freundlich oder verspielt
• Farbpalette — wählen Sie aus 8 vordefinierten Paletten

3. Generierung

Durch Klicken auf die Schaltfläche "Website generieren" erstellt die KI Ihre Website-Inhalte. Dies umfasst Texte, Abschnittsstruktur und den gewählten Stil. Die Generierung dauert 10-30 Sekunden.

KI-Generierung

Der NEXUS Site Builder verwendet das KI-Modell Ihrer Abonnementstufe zur Inhaltsgenerierung:

Neugenerierung

Wenn Ihnen das Ergebnis nicht gefällt, können Sie mit der "Neugenerieren" Schaltfläche in der Symbolleiste neue Inhalte anfordern — mit denselben Onboarding-Antworten. Die vorherige Version kann mit Strg+Z wiederhergestellt werden.

Die Editor-Oberfläche

Der Editor besteht aus drei Hauptteilen:

Linkes Panel — Abschnittsliste & Stile

Es gibt zwei Registerkarten:

• Abschnitte — Liste aller Abschnitte in Reihenfolge. Klicken Sie auf einen Abschnitt, um ihn zu bearbeiten.
• Stile — globale Einstellungen: Farbpalette, Schriftarten, benutzerdefinierte Farben, Geschäftsinformationen, SEO, Footer, Social Links.

Steuerung des aktiven Abschnitts

Wenn Sie einen Abschnitt auswählen, erscheinen Aktionsschaltflächen:

• ▲ / ▼ — Abschnitt nach oben/unten verschieben
• ⧉ — Abschnitt duplizieren
• ● — Abschnitt ein-/ausschalten (sichtbar/versteckt)
• ✕ — Abschnitt löschen

Mittleres Panel — Abschnittseditor

Hier bearbeiten Sie die Felder des ausgewählten Abschnitts. Jeder Abschnittstyp hat eigene Felder. Unten finden Sie die Abschnittsstil-Steuerung: Hintergrundfarbe, Textfarbe, Ausrichtung, Padding, Margin.

Rechtes Panel — Live-Vorschau

Echtzeit-Vorschau der Website. Jede Änderung erscheint sofort. In der Symbolleiste können Sie zwischen Desktop und Mobil Ansicht wechseln.

Hero-Abschnitt

Ein auffälliger Abschnitt oben auf der Website. Dies ist das Erste, was Besucher sehen.

Felder

• Überschrift — die wichtigste Botschaft, große Schriftgröße
• Untertitel — ergänzender Text, kleinere Schriftgröße
• Button-Text — CTA-Button-Beschriftung, z.B. "Termin buchen"
• Button-Link — wohin der Button zeigen soll (z.B. #kontakt)
• Layout — Links / Mitte / Rechts Ausrichtung
• Hintergrundbild — laden Sie ein Bild für den Hero-Hintergrund hoch (mit Farbverlauf-Overlay)

Dienstleistungen

Anzeige Ihrer Dienstleistungen oder Produkte im Kartenformat.

Felder

• Abschnittstitel — z.B. "Unsere Dienstleistungen"
• Untertitel — optionaler ergänzender Text
• Spalten — 2, 3 oder 4 Spalten Layout

Kartenfelder

• Name — Dienstleistungsname
• Beschreibung — kurzer Beschreibungstext
• Preis — optional, z.B. "50 €"
• Symbol — wählen Sie aus 25 SVG-Symbolen (Schere, Auto, Herz, usw.)

Mit der Schaltfläche "+ Dienstleistung hinzufügen" erweitern Sie die Liste, mit der "Löschen"-Schaltfläche der Karte entfernen Sie Einträge.

Über uns

Vorstellungsabschnitt mit Text und optionalem Bild.

Felder

• Titel — z.B. "Über uns"
• Text — Ihre Unternehmensgeschichte, Werte
• Layout — Text links (Bild rechts), Text rechts (Bild links), Nur Text
• Bild — hochladbares Bild neben dem Text

Galerie

Bildergalerie im Rasterlayout. Ideal zur Präsentation Ihrer Arbeiten, Produkte oder Ihres Geschäfts.

Felder

• Titel und Untertitel
• Spalten — 2, 3 oder 4 Spalten
• Bilder — hochladbare Bilder, jeweils mit optionalem Alt-Text

Bewertungen

Kundenbewertungen mit Sternbewertung anzeigen.

Felder pro Bewertung

• Name — Kundenname
• Position — optional, z.B. "Stammkunde"
• Bewertung — der Bewertungstext (in Anführungszeichen)
• Bewertung — 1-5 Sterne
• Profilbild — optionales Foto

Team

Teamvorstellung mit Fotos, Positionen und Kontaktinformationen.

Felder pro Mitglied

• Profilbild — wird als Kreis angezeigt
• Name und Position
• Bio — kurze Vorstellung
• Telefon und E-Mail — werden als klickbare Links angezeigt

Angebote

Hervorhebung von Aktionen und Rabatten. Durchgestrichener Originalpreis + Aktionspreis + Badge.

Felder pro Angebot

• Angebotsname und Beschreibung
• Originalpreis — durchgestrichen dargestellt
• Aktionspreis — hervorgehoben, große Schrift
• Badge — z.B. "AKTION", "-20%", "NEU" — wird gedreht in der Ecke angezeigt

FAQ (Häufig gestellte Fragen)

Aufklappbare Frage-Antwort-Liste. Besucher können durch Klicken die Antworten öffnen.

Felder pro Frage

• Frage — die klickbare Überschrift
• Antwort — der aufklappbare Inhalt

CTA-Banner

Ein aufmerksamkeitsstarker, handlungsorientierter Banner. Ideal in der Mitte oder gegen Ende der Website.

Felder

• Überschrift — z.B. "Bereit?"
• Text — kurzer motivierender Text
• Button-Text und Button-Link
• Hintergrundfarbe — benutzerdefinierte Farbe für den CTA-Banner

Statistiken

Heben Sie Zahlen und Erfolge in einem großen, aufmerksamkeitsstarken Format hervor.

Felder pro Statistik

• Wert — z.B. "500+", "10 Jahre", "98%"
• Label — z.B. "Zufriedener Kunde", "Erfahrung"

Preise

Preispakete im Kartenformat vergleichen. Das hervorgehobene Paket ist größer und umrandet.

Felder pro Paket

• Paketname, Preis, Zeitraum (z.B. "/Mo")
• Funktionen — eine Funktion pro Zeile, mit Häkchen-Symbol
• Hervorgehoben — Kontrollkästchen, hervorgehobenes Paket ist größer und umrandet
• Button-Text

Kontakt

Kontaktinformationen und optionales Kontaktformular.

Felder

• Titel und Text
• Formular anzeigen — ein/aus Schalter
• Formspree-Endpunkt — wenn das Formular aktiviert ist (siehe Formspree-Abschnitt)

Kontaktinformationen (Telefon, E-Mail, Adresse, Öffnungszeiten) kommen aus dem Stile → Unternehmen Panel.

Partnerlogos

Anzeige von Partner- und Referenzlogos. Standardmäßig Graustufen, farbig bei Hover.

Felder pro Logo

• Logo — hochladbares Bild
• Alt-Text — Partnername
• Link-URL — optional, klickbarer Link

Farbpaletten

Wählen Sie aus 8 vordefinierten Paletten im Bereich Stile:

Benutzerdefinierte Farben

Unter der Palette können Sie jede Farbe mit benutzerdefinierten Farbwählern optimieren: Primary, Secondary, Accent, Background, Surface, Text, TextMuted.

Schriftarten

Sie können zwei Schriftarten einstellen: Überschrift und Text. Verfügbare Google Fonts:

• Inter — modern, sauber (Standard)
• Open Sans — lesbar, weit verbreitet
• Roboto — Google Material Stil
• Playfair Display — elegante Serife
• Montserrat — geometrisch, stark
• Lora — klassische Serife
• Poppins — abgerundet, freundlich
• Raleway — leicht, luftig

Abschnittsstile

Am unteren Ende jedes Abschnittseditors finden Sie die Stilsteuerung:

• Hintergrundfarbe — Farbwähler, "X"-Schaltfläche setzt zurück
• Textfarbe — überschreibt die Textfarbe des Abschnitts
• Textausrichtung — Links / Mitte / Rechts
• Padding oben/unten — innerer Abstand, z.B. "4rem", "80px"
• Margin oben/unten — äußerer Abstand

Symbole

Wählen Sie aus 25 SVG-Symbolen für die Dienstleistungs-Karten:

Die Symbole sind im Lucide-Stil, 24x24 SVG-Format, und erhalten automatisch die Primärfarbe.

Bildverwaltung

Unterstützte Formate

• WebP — empfohlen, kleine Größe, gute Qualität
• AVIF — kleinste Dateigröße
• PNG — für transparente Hintergründe
• JPEG — Fotos

Größenbeschränkung

Maximal 5 MB pro Datei.

Wo können Sie Bilder verwenden?

• Hero-Hintergrundbild
• Über-uns-Bild
• Galeriebilder
• Team-Mitglieder-Profilbilder
• Bewertungs-Profilbilder
• Partnerlogos
• Firmenlogo

SEO & Meta-Daten

Bearbeiten Sie im Bereich Stile → SEO / Meta:

• Seitentitel — der Text im Browser-Tab und in Google-Ergebnissen
• Meta-Beschreibung — die Kurzbeschreibung in Google-Ergebnissen (max. 160 Zeichen empfohlen)

Open-Graph-Meta-Tags (og:title, og:description) werden automatisch daraus generiert.

Social-Media-Links

Social-Media-Links können Sie im Bereich Stile → Footer / Social hinzufügen. Unterstützte Plattformen:

• Facebook, Instagram, TikTok, YouTube, LinkedIn, X (Twitter), GitHub, Website

Links werden als SVG-Symbole im Footer angezeigt und bei Hover mit der Primärfarbe hervorgehoben.

Wie hinzufügen?

1. Klicken Sie auf die Schaltfläche "+ Social Link"
2. Wählen Sie die Plattform aus dem Dropdown
3. Fügen Sie die vollständige Profil-URL ein (z.B. https://facebook.com/ihrunternehmen)

Kontaktformular (Formspree)

Das Kontaktformular verwendet Formspree. Es ist ein kostenloses Formular-Backend — kein eigener Server nötig.

Einrichtungsschritte

1. Registrieren Sie sich bei formspree.io (kostenloser Tarif reicht)
2. Erstellen Sie ein neues Formular im Dashboard
3. Kopieren Sie die Endpunkt-URL — Format: https://formspree.io/f/xxxxx
4. Wählen Sie im Builder den Kontakt-Abschnitt aus
5. Fügen Sie die Endpunkt-URL in das Feld "Formspree-Endpunkt" ein

Download & Hosting

Download

Durch Klicken auf die Schaltfläche "Download" in der Symbolleiste erhalten Sie eine eigenständige .html-Datei. Sie enthält:

• Alle CSS inline (keine externen Dateien)
• Google Fonts Laden
• Responsive Darstellung (mobil + desktop)
• Smooth-Scroll-Navigation
• Mobiles Hamburger-Menü

Wo können Sie es hosten?

• GitHub Pages — kostenlos, einfach
• Netlify — kostenloser Tarif, Drag & Drop
• Vercel — kostenlos, automatisches HTTPS
• Jeder Webhosting — Hochladen per FTP
• Eigener Server — Apache, Nginx

Tastaturkürzel

FAQ (Allgemein)