Zum Inhalt springen

So branden Sie diesen Starter in fünf Minuten um

Name, Farben, Schriften und Texte stehen in einer einzigen Datei. Wir zeigen Schritt für Schritt, wie aus der Beispielagentur Ihre eigene Website wird.

Team Nordwerk 1 Min. Lesezeit

Diese Website ist ein Starter: Sie sehen gerade die fiktive Digitalagentur „Nordwerk“. Mit wenigen Handgriffen wird daraus die Seite einer Rösterei, einer Praxis oder eines Architekturbüros – ohne eine Zeile Programmcode anzufassen.

Schritt 1: Live ausprobieren im Branding-Studio

Unten links finden Sie die Schaltfläche „Umbranden“. Dort können Sie eine der mitgelieferten Vorlagen wählen oder Name, Farben, Schrift, Eckenradius und Hero-Texte direkt ändern. Alle Änderungen sehen Sie sofort auf der ganzen Seite.

Das Studio speichert Ihren Entwurf nur in Ihrem Browser. Andere Besucherinnen und Besucher sehen weiterhin die veröffentlichte Version.

Schritt 2: Konfiguration exportieren

Wenn Ihnen der Entwurf gefällt, klicken Sie auf „Als site.json exportieren“. Sie erhalten eine Datei, die alle Einstellungen enthält.

Schritt 3: Datei austauschen und neu bauen

Legen Sie die Datei als content/site.json in das Projekt und bauen Sie das Image neu:

docker build -t meine-website .
docker run -d -p 8080:80 meine-website

Beim Build wird jede Seite vorgerendert; Sitemap, RSS-Feed und Favicon werden aus Ihrer Marke erzeugt.

Was steckt in der site.json?

Bereich Inhalt
brand Name, Kürzel für das Logo, Slogan
theme Primär- und Akzentfarbe, hell/dunkel, Schrift, Eckenradius
seo Seitentitel, Beschreibung, Domain, Schlagworte
hero bis faq Alle Texte der Startseite
contact Kontaktdaten und optional der Endpunkt des Formular-Dienstes
legal Angaben für das Impressum

Schritt 4: Das Studio ausschalten

Für die endgültige Kundenseite setzen Sie "studio": { "enabled": false }. Dann erscheint die Schaltfläche nicht mehr – und der Code des Studios wird gar nicht erst geladen.