Ihre Website –
Ihre Kontrolle.
Diese Anleitung erklärt Ihnen Schritt für Schritt, wie Sie Ihre Website selbstständig bearbeiten. Texte ändern, Bilder tauschen, neue Inhalte hinzufügen – alles ohne technisches Wissen.
Zugang zum CMS
Das CMS (Content Management System) ist der Bereich, in dem Sie Ihre Website-Inhalte bearbeiten. Sie erreichen ihn über diese Adresse:
Tippen Sie die Adresse oben in die Adressleiste Ihres Browsers (Chrome, Firefox, Safari) ein und drücken Sie Enter.
Sie sehen einen grünen Button „Mit GitHub anmelden". Klicken Sie darauf. GitHub ist das System, das Ihre Website-Daten sicher speichert.
Falls Sie noch nicht bei GitHub eingeloggt sind, geben Sie Ihren Benutzernamen und Ihr Passwort ein. Sie erhalten die Zugangsdaten von Ihrer Agentur.
Nach dem Login sehen Sie das CMS-Dashboard mit der Navigationsleiste auf der linken Seite.
So sieht der Login-Bildschirm aus. Klicken Sie auf den grünen Button.
Dashboard-Übersicht
Nach dem Login sehen Sie das Dashboard. Links befindet sich die Navigation mit allen Bereichen, die Sie bearbeiten können.
Das Dashboard nach dem Login. Links sehen Sie die Navigation.
| Bereich | Was ist das? | Typ |
|---|---|---|
| Hauptbanner | Der große Banner ganz oben auf der Website | Einzelbereich |
| Ihre Vorteile | Die 4 Vorteils-Boxen (24h, Effektiv, Umweltbewusst, Zuverlässig) | Einzelbereich |
| Ablauf | Die 3 Schritte „So läuft es ab" | Einzelbereich |
| Vertrauenspunkte | Die Stichpunkte-Liste im Vertrauens-Bereich | Einzelbereich |
| Kontaktdaten | Telefon, E-Mail, Stadt | Einzelbereich |
| Leistungen | Die 8 Service-Karten (Ratten, Insekten, Reinigung…) | Liste |
| Galerie | Die Foto-Galerie auf der Website | Liste |
| FAQ | Die häufig gestellten Fragen und Antworten | Liste |
Hauptbanner (Hero)
Der Hauptbanner ist der erste große Bereich, den Besucher sehen. Hier stehen der Name, der Slogan, die Buttons und Ihre Telefonnummer.
In der linken Navigation unter „Seiteninhalte".
Klicken Sie in das jeweilige Feld und ändern Sie den Text.
Klicken Sie oben rechts auf „Speichern". Die Website aktualisiert sich automatisch innerhalb von 1–2 Minuten.
Die Bearbeitungsmaske für den Hauptbanner
| Feldname | Was es ist | Empfohlene Länge |
|---|---|---|
| Eyebrow | Kleiner Text über der Überschrift | max. 50 Zeichen |
| Überschrift Zeile 1 | Erster Teil der großen Überschrift | max. 30 Zeichen |
| Überschrift Akzent | Zweiter Teil, wird grün angezeigt | max. 30 Zeichen |
| Unterzeile | Kurzer Beschreibungssatz | max. 120 Zeichen |
| Button 1 Text | Text des grünen Hauptbuttons | max. 20 Zeichen |
| Button 2 Text | Text des zweiten Buttons | max. 20 Zeichen |
| Telefon (Link) | Nummer mit Ländercode, z.B. +4917656949097 | genau so lassen |
| Telefon (Anzeige) | Nummer wie sie erscheint | Standard |
Ihre Vorteile (USPs)
Die 4 Vorteils-Boxen direkt unter dem Banner: 24h, Effektiv, Umweltbewusst, Zuverlässig. Jede Box hat ein Symbol, einen Titel und einen kurzen Text.
Jeder Vorteil hat ein Symbol, einen Titel und einen Text
| Feldname | Was es ist | Beispiel |
|---|---|---|
| Symbol/Kürzel | Kleines Zeichen oder Emoji in der Box | 24h · ✓ · ❧ · € |
| Titel | Überschrift der Vorteils-Box | Schnell · Effektiv |
| Beschreibung | Kurzer Erklärungstext | max. 100 Zeichen |
Ablauf (So läuft es ab)
Die 3 nummerierten Schritte, die erklären, wie die Zusammenarbeit abläuft. Schritt 1: Inspektion, Schritt 2: Durchführung, Schritt 3: Nachkontrolle.
| Feldname | Was es ist | Beispiel |
|---|---|---|
| Nummer | Die große Zahl links (01, 02, 03) | 01 · 02 · 03 |
| Badge-Text | Kleines Label über dem Titel | Schritt 1 · Schritt 2 |
| Titel | Überschrift des Schritts | Inspektion & Analyse |
| Beschreibung | Erklärungstext | max. 200 Zeichen |
Vertrauenspunkte
Eine Liste von Stichpunkten, die Ihr Unternehmen positiv darstellen. Zum Beispiel: „Über 10 Jahre Erfahrung", „Zertifiziertes Personal".
Klicken Sie in ein Textfeld und ändern Sie den Stichpunkt.
Klicken Sie auf „+ Eintrag hinzufügen" am Ende der Liste.
Klicken Sie auf das Mülleimer-Symbol neben dem Eintrag.
Jeder Stichpunkt kann frei bearbeitet werden.
Kontaktdaten
Telefonnummer, E-Mail-Adresse und Stadt. Diese Angaben erscheinen im Kontaktbereich und im Google-Datensatz Ihrer Website.
| Feldname | Was es ist | Aktueller Wert |
|---|---|---|
| Telefon (Link) | Technisches Format für Anruf-Links | +4917656949097 |
| Telefon (Anzeige) | Nummer wie sie der Besucher sieht | 0176 56949097 |
| Kontakt-E-Mail-Adresse | info@jt-umweltservice.de | |
| Stadt | Ihr Standort | Berlin |
Leistungen
Die 8 Service-Karten auf Ihrer Website. Jede Karte hat einen Titel, eine Kategorie, einen Beschreibungstext und ein Bild. Sie können Karten bearbeiten, neue hinzufügen oder löschen.
Alle Leistungen auf einen Blick. Klicken Sie „Bearbeiten" für eine Karte.
In der linken Navigation unter „Inhalts-Listen".
Neben der Leistung, die Sie ändern möchten.
Titel, Kategorie, Beschreibungstext anpassen. Bild optional tauschen.
Oben rechts auf „Speichern" klicken.
Aktuell: maeusefangen.png
Bearbeitungsmaske einer Leistung
| Feldname | Was es ist | Hinweis |
|---|---|---|
| Titel | Name der Leistung | max. 30 Zeichen |
| Kategorie | Kleines Label auf der Karte | z.B. Schädlinge, Hygiene, Reinigung |
| Beschreibungstext | Kurze Erklärung der Leistung | max. 150 Zeichen |
| Bild | Foto der Leistung | JPG oder PNG, mind. 800×600px |
| Dunkle Karte | Hebt die Karte besonders hervor | Nur für 24h-Service aktiviert |
Neue Leistung hinzufügen
Oben rechts auf der Leistungen-Übersicht.
Titel, Kategorie, Text und ein Bild hochladen.
Die neue Karte erscheint auf Ihrer Website.
Leistung löschen
Galerie
Die Fotogalerie auf Ihrer Website. Aktuell 7 Bilder. Sie können Bilder tauschen, neue hinzufügen oder löschen. Außerdem können Sie steuern, ob ein Bild breiter oder höher dargestellt wird.
Um ein bestehendes Bild zu tauschen oder die Einstellungen zu ändern.
Im Bild-Feld auf den Upload-Bereich klicken oder ein Bild hineinziehen.
Optional: „Breit" für 2 Spalten, „Hoch" für 2 Zeilen Höhe aktivieren.
Aktuell: reinigung.jpg
Ein Galerie-Bild kann als „Breit" oder „Hoch" markiert werden.
| Feldname | Was es ist | Hinweis |
|---|---|---|
| Bildbezeichnung | Interner Name für die Verwaltung | Erscheint nicht auf der Website |
| Bild | Das Foto selbst | JPG oder PNG, mind. 1000px breit |
| Breit | Bild nimmt 2 Spalten ein | Für Panorama-Fotos geeignet |
| Hoch | Bild nimmt 2 Zeilen ein | Für Hochformat-Fotos geeignet |
FAQ (Häufige Fragen)
Die 6 Fragen und Antworten am Ende Ihrer Website. Kunden klicken auf eine Frage und die Antwort klappt auf. Sie können Fragen bearbeiten, neue hinzufügen oder löschen.
FAQ-Übersicht. Mit „Bearbeiten" öffnen Sie Frage und Antwort zum Bearbeiten.
Beide Felder können Sie frei bearbeiten.
| Feldname | Was es ist | Hinweis |
|---|---|---|
| Frage | Die Frage, die der Besucher sieht | Als vollständige Frage formulieren, mit Fragezeichen |
| Antwort | Die Antwort, die beim Aufklappen erscheint | Klar und verständlich, max. 300 Zeichen |
Änderungen speichern
Nach jeder Änderung müssen Sie auf „Speichern" klicken – sonst gehen die Änderungen verloren.
Der grüne Button befindet sich immer oben rechts auf der Bearbeitungsseite.
Ein kurzes „Erfolgreich gespeichert" erscheint oben auf der Seite.
Die Website aktualisiert sich automatisch. Nach ca. 1–3 Minuten ist die Änderung live.
Tipps & Hinweise
| Frage | Antwort |
|---|---|
| Welche Bildformate kann ich hochladen? | JPG, PNG und WebP. JPG empfohlen für Fotos. Max. 2 MB pro Bild. |
| Wie groß sollten Bilder sein? | Mindestens 800×600 Pixel. Für die Galerie empfohlen: 1200×900 Pixel. |
| Wie lange dauert es bis Änderungen live sind? | In der Regel 1–3 Minuten nach dem Speichern. |
| Kann ich Änderungen rückgängig machen? | Gelöschte Einträge können nicht wiederhergestellt werden. Texte können Sie jederzeit erneut ändern. |
| Die Website zeigt noch alte Inhalte – was tun? | Browser-Cache leeren: Strg+Shift+R (Windows) oder Cmd+Shift+R (Mac). Oder 5 Minuten warten. |
| Kann ich versehentlich etwas kaputtmachen? | Nein – alle Änderungen werden auf GitHub versioniert. Im Notfall kann Ihre Agentur jeden Stand wiederherstellen. |
| Ich sehe kein Bild nach dem Hochladen – was tun? | Stellen Sie sicher, dass Sie nach dem Hochladen auf „Speichern" geklickt haben. |
| Wer kann mir helfen wenn etwas nicht funktioniert? | Kontaktieren Sie Ihre Agentur: create2flow – wir helfen schnell weiter. |
- CMS öffnen:
jt-umweltservice.vercel.app/keystatic - Mit GitHub anmelden
- Bereich in der linken Navigation wählen
- Felder bearbeiten
- Oben rechts „Speichern" klicken
- 1–3 Minuten warten – fertig!