Bedienungsanleitung – Smart & Easy Editor
Ihr persönlicher Web-Editor — schlank · schnell · smart · barrierefrei.
Alles, was Sie brauchen um Ihre Website selbst zu verwalten — ohne Technikkenntnisse, ohne Wartungsabo.
Jede Website wird von Hand codiert und individuell nach Ihrer Corporate Identity gestaltet — Farbschema, Schriften und Layout ganz nach Ihren Wünschen. Der Editor ist inklusive: So können Sie Inhalte jederzeit selbst aktualisieren, ohne W3C-Konformität oder Barrierefreiheit zu gefährden.
v22.10.0 · vienna-webdesign.at · Entwickelt in Österreich 🇦🇹
KI-Assistent
Texte optimieren & Alt-Texte automatisch generieren
WCAG AAA
Vollständig barrierefrei — W3C- und AAA-konform
Auto-Backup
Bei jedem Speichern automatische Sicherungskopie
SEO ready
Meta-Daten, Google-Vorschau & Link Checker inklusive
Live-Vorschau
Desktop & Mobile — direkt im Editor sichtbar
Sicher
Automatische Abmeldung & Zugangsschutz
1. Anmeldung & Sicherheit
Der Zugang zum Editor erfolgt über: https://ihre-website.at/admin.php
- Adresse im Browser öffnen
- Persönliches Passwort eingeben
- Auf Zutritt gewähren klicken
🔒 Sicherheit: Nach 5 falschen Eingaben wird der Zugang für 15 Minuten gesperrt. Nach 2 Stunden Inaktivität werden Sie automatisch abgemeldet. Nicht gespeicherte Änderungen bleiben als Auto-Entwurf erhalten.
2. Benutzeroberfläche
| Bereich | Funktion |
|---|---|
| Linke Spalte oben | System-Navigation — Galerie, News, Kontakt, Statistik, Bausteine, FAQ, Testimonials, Layout, Slider, Einstellungen, Link Checker |
| Linke Spalte unten | Seiten-Struktur — alle Seiten auf einen Blick. 🟢 = Live, 🟡 = Nur Snippet |
| Mitte | Editor — Inhalt der gewählten Seite bearbeiten |
| Rechts im Editor | Live-Vorschau — aktualisiert sich alle 60 Sekunden automatisch |
3. Seiten bearbeiten
- In der linken Spalte auf den Seitennamen klicken
- Editor öffnet sich mit dem bestehenden Inhalt
- H1 Seitentitel oben ausfüllen (Pflichtfeld — siehe Punkt 4)
- Inhalt bearbeiten
- Auf 💾 Speichern klicken — erst dann werden Änderungen live
💡 Auto-Save: Alle 60 Sekunden wird automatisch ein Entwurf gespeichert (draft). Dieser ist kein offizielles Backup — erst manuelles Speichern macht die Änderung live.
📱 Mobile Vorschau: Mit dem 📱 Button in der Toolbar können Sie sehen wie die Seite auf einem Smartphone aussieht. Die Vorschau aktualisiert sich alle 60 Sekunden.
4. H1 Seitentitel (Pflichtfeld)
Jede Seite hat ein eigenes Textfeld für die H1 Hauptüberschrift — direkt über dem Editor. Dieses Feld ist ein Pflichtfeld und kann nicht leer gespeichert werden.
⚠️ Wichtig für Barrierefreiheit & SEO: H1 ist die wichtigste Überschrift einer Seite. Sie wird automatisch gesetzt — im Editor stehen nur noch H2, H3 und H4 zur Verfügung. Das garantiert eine korrekte Überschriften-Hierarchie (WCAG AAA).
5. Editor & Formatierung
| Funktion | Beschreibung |
|---|---|
| H2 / H3 / H4 | Überschriften-Hierarchie — H1 ist immer der Seitentitel oben |
| Fett, Kursiv, Unterstrichen, Durchgestrichen | Textformatierung |
| Textfarbe / Hintergrundfarbe | Nur WCAG-AAA konforme Farben — keine unlesbaren Farben möglich |
| Listen | Aufzählung (Bullets) und nummerierte Liste |
| Einzug | Text einrücken oder ausrücken |
| Tabellen | Tabellen einfügen, Zeilen/Spalten bearbeiten |
| Links | Interne und externe Links setzen |
| Bilder | Aus dem Bilder-Pool einfügen |
| </> HTML-Modus | Quelltext direkt bearbeiten. Generierten Code hier einfügen: auf </> klicken → Code einfügen → wieder auf </> klicken |
| Schriftart | Standard, Montserrat, Corradine, Arial, Georgia, Courier New |
💡 Tipp: Seiten mit eigenem CSS-Styling (Spezialseiten) werden als Read-Only angezeigt — Inhaltsänderungen bitte per FTP direkt in der content/*.php Datei.
Backups & Wiederherstellung
Bei jedem Speichern wird automatisch eine Sicherungskopie der vorherigen Version angelegt.
- Gewünschte Seite im Editor öffnen
- Ganz nach unten scrollen — dort die letzten 5 Backups mit Datum und Uhrzeit
- Auf einen Backup-Eintrag klicken — Inhalt wird geladen (gelber Hintergrund als Warnung)
- Auf 💾 Speichern klicken um diesen Stand zu übernehmen
⚠️ Das Backup überschreibt den aktuellen Stand erst wenn Sie speichern. Solange nicht gespeichert, kann die Aktion abgebrochen werden.
SEO & Meta-Daten
Meta-Daten beeinflussen wie Ihre Seite bei Google erscheint. Klicken Sie im Editor auf ⚙️ SEO:
| Feld | Beschreibung |
|---|---|
| Menü-Name | Wie die Seite in der Navigation heißt |
| Position | Reihenfolge im Menü (niedrige Zahl = weiter vorne) |
| Meta-Titel | Titel in Google-Suchergebnissen (max. 60 Zeichen) |
| Meta-Beschreibung | Kurztext unter dem Titel bei Google (max. 160 Zeichen) |
| Im Menü | Seite in der Navigation anzeigen oder ausblenden |
💡 Die Google-Vorschau oben im Editor aktualisiert sich in Echtzeit während Sie tippen.
6. Bilder einfügen
- Cursor im Editor an die gewünschte Position setzen
- In der Toolbar auf das Bild-Symbol klicken
- Bild aus dem Pool auswählen oder hochladen (JPG, PNG, GIF, WEBP — max. 1920px)
- Alt-Text eingeben — oder auf 🤖 KI klicken für automatische Generierung
- Auf Bild einfügen klicken
| Option | Beschreibung |
|---|---|
| Breite | Größe in % (relativ) oder px (absolut) |
| Ausrichtung | Zentriert, links mit Textumfluss, rechts mit Textumfluss |
| Eckenradius | Abgerundete Ecken in Pixeln |
| Schatten | Kein Schatten, sanfter oder starker Schatten |
| Rahmen | Dicke, Stil und Farbe des Rahmens |
| Alt-Text | Bildbeschreibung für Screenreader — Pflichtfeld für WCAG AAA |
7. KI-Assistent (Mistral AI)
Text optimieren:
- Text im Editor markieren
- Auf ✨ Optimieren klicken
- KI verbessert Stil und Grammatik des markierten Textes
Blog-Post generieren:
- Auf 📝 Blog-Post klicken
- Stichwörter oder Themensatz eingeben
- Fertigen strukturierten Artikel erhalten — immer durchlesen vor dem Speichern!
Alt-Text automatisch generieren:
- Bild im Editor anklicken
- Auf 🤖 KI klicken
- Alt-Text wird automatisch generiert — WCAG AAA auf Knopfdruck
🇪🇺 Datenschutz: Mistral AI — EU-Server (Frankreich). Keine Daten in die USA. Eingaben werden nach max. 30 Tagen automatisch gelöscht. Keine sensiblen Daten eingeben.
⚡ Nutzung: Der KI-Assistent steht Ihnen unbeschränkt zur Verfügung — bitte im Sinne fairer Nutzung (Fair Use) verwenden.
⚡ Nutzung: Der KI-Assistent steht Ihnen unbeschränkt zur Verfügung — bitte im Sinne fairer Nutzung (Fair Use) verwenden.
8. Button & CTA Generator
Klicken Sie in der Editor-Toolbar auf 🔘 Button:
Tab 🔘 Button — eigenen Button erstellen:
- Button-Text eingeben
- Ziel-Link eingeben (z.B. kontakt.php oder https://...)
- Stil wählen: Gefüllt, Outline oder Ghost
- Größe wählen: Klein / Mittel / Groß
- Farbe aus der AAA-konformen Palette wählen
- Live-Vorschau prüfen → auf ➕ In Seite einfügen klicken
Tab 📣 CTA Blöcke — fertige Inhaltsblöcke einfügen:
| Block | Wofür geeignet |
|---|---|
| 📣 Kontakt-Banner | Großer farbiger Aufruf mit Button — ideal als Abschluss einer Seite |
| 💡 Info-Box | Blauer Hinweiskasten — für wichtige Informationen |
| ⚠️ Warn-Box | Orangener Warnhinweis — für Achtung-Meldungen |
| ✅ Erfolgs-Box | Grüne Box — für positive Hinweise oder Bestätigungen |
| ⭐ Highlight-Box | Auffälliger Block in der Design-Akzentfarbe |
Bausteine — Cards
Unter 🃏 Bausteine – Cards in der linken Navigation:
- Card-Optik, Anzahl pro Reihe und Gesamtanzahl wählen
- Für jede Card: Icon, Titel und Text eingeben
- Auf 📋 Code kopieren klicken
- Gewünschte Seite im Editor öffnen
- In der Toolbar auf </> klicken (HTML-Modus)
- Code an der gewünschten Stelle einfügen
- Wieder auf </> klicken — zurück in den normalen Modus
- Auf 💾 Speichern klicken
FAQ-Konfigurator
Unter ❓ FAQ-Konfigurator in der linken Navigation:
- Fragen und Antworten eingeben — Reihenfolge per Position einstellbar
- Vorschau direkt im Panel sichtbar
- Auf 💾 FAQ speichern klicken
- Generierten Code kopieren und per HTML-Modus auf gewünschter Seite einfügen
9. News & Blog
Unter 📰 News in der linken Navigation:
- Auf ➕ Neuer Artikel — Titel, Teaser, Datum, Kategorie, Inhalt eingeben
- Titelbild hochladen (optional)
- Veröffentlichen anhaken — sofort sichtbar auf news.php
- Auf 💾 Speichern klicken
💡 Entwürfe (nicht veröffentlicht) sind nur im Admin sichtbar — nicht auf der öffentlichen Website.
10. Kontaktformular
Unter 📧 Kontaktformular — Generator mit Live-Vorschau:
| Einstellung | Beschreibung |
|---|---|
| Empfänger E-Mail | Wohin das Formular gesendet wird |
| E-Mail Betreff | Betreffzeile der E-Mail |
| Danke-Text | Text nach erfolgreichem Absenden |
| Telefon / Betreff | Optionale Felder aktivieren/deaktivieren |
Die Live-Vorschau rechts zeigt sofort wie das Formular aussehen wird. Klicken Sie auf ⚡ generieren & speichern um kontakt.php zu erstellen.
💡 Urlaubs-Modus: Unter Einstellungen → Urlaubs-Modus können Sie einen automatischen Hinweis mit Von/Bis-Datum aktivieren — erscheint automatisch auf der Startseite UND auf der Kontaktseite.
11. Galerie verwalten
- Unter 🖼 Galerie verwalten — Bilder hochladen (JPG, PNG, WEBP)
- Bilder werden automatisch auf max. 1920px komprimiert
- Beschriftung, Position und Sichtbarkeit pro Bild einstellbar
- „Nicht in Galerie zeigen" — Bild bleibt im Pool aber erscheint nicht auf galerie.php
- Auf 💾 Galerie speichern klicken
12. Layout & Design
Unter 🎨 Layout & Design — Live-Vorschau für alle Änderungen:
| Einstellung | Optionen |
|---|---|
| Menü-Position | Oben / Seitlich / Unten |
| Slider-Position | Vor Navigation / Nach Navigation / Kein Slider |
| Header-Stil | Logo links / Zentriert / Nur Text |
| Footer-Stil | Mehrspaltig / Einfach |
| Farbschema | Kühles Nass (Petrol) / Teal / Indigo Ink — individuell anpassbar |
🎨 Die angezeigten Farbschemata sind Beispiele. Jedes Farbschema wird individuell nach Ihrer Corporate Identity angepasst.
13. Slider-Editor
Unter 🖼️ Slider-Editor können Sie den Bild-Slider erstellen oder bearbeiten:
| Feld | Beschreibung |
|---|---|
| Titel | Große Überschrift im Slider |
| Untertitel | Beschreibungstext unter dem Titel |
| Button-Text & Link | Call-to-Action Button im Slider |
| Höhe | Klein (200px) / Mittel (320px) / Groß (460px) |
| Hintergrund | Design-Farbe oder eigene AAA-konforme Farbe |
| Hintergrundbild | Bild-URL eingeben — überschreibt Hintergrundfarbe |
14. Testimonials
Unter 💬 Testimonials in der linken Navigation können Sie Kundenstimmen verwalten:
- Auf ➕ Testimonial hinzufügen klicken
- Name, Funktion/Ort, Bewertungstext und Sterne eingeben
- Live-Vorschau und HTML-Code aktualisieren sich sofort beim Tippen
- Auf 💾 Testimonials speichern klicken
- Generierten Code per 📋 Code kopieren in eine Seite per HTML-Modus einfügen
💡 Der HTML-Code aktualisiert sich in Echtzeit — Sie sehen sofort wie der fertige Code aussehen wird.
15. Einstellungen
| Bereich | Beschreibung |
|---|---|
| Website-Name | Name der Website (erscheint im Browser-Tab) |
| Favicon | Das kleine Icon im Browser-Tab hochladen |
| Schriftarten | Eigene Schriftarten in header.php einbinden |
| Akzentfarbe | Die Hauptakzentfarbe der Website anpassen |
| Navigation | Reihenfolge und Sichtbarkeit der Menüpunkte |
| Urlaubs-Modus | Automatischer Hinweis mit Von/Bis-Datum |
| DSGVO-Check | Warnt automatisch bei externen Einbindungen (YouTube, Google Maps etc.) |
| 🔗 Link Checker | Prüft alle internen und externen Links auf allen Seiten — grün/rot Anzeige |
16. Neue Seite anlegen
- Oben rechts auf + Neue Seite klicken
- Felder ausfüllen:
- URL / ID: Technischer Name — nur Kleinbuchstaben und Bindestriche (z.B. ueber-uns)
- Menü-Name: Sichtbarer Name in der Navigation
- Position: Reihenfolge im Menü
- Meta-Titel & Beschreibung: Für Google
- Vollseite generieren aktivieren — erstellt eine fertige PHP-Seite
- Auf Seite anlegen klicken
💡 Grüner Punkt = Live (fertige Seite vorhanden und aufrufbar)
💡 Gelber Punkt = Nur Snippet — Seite existiert noch nicht als eigenständig aufrufbare Adresse sondern nur als Seite zum includen
💡 Gelber Punkt = Nur Snippet — Seite existiert noch nicht als eigenständig aufrufbare Adresse sondern nur als Seite zum includen
17. Abmelden
Klicken Sie oben rechts auf Logout. Sie werden sofort abgemeldet. Nach 2 Stunden Inaktivität erfolgt die automatische Abmeldung — der Auto-Entwurf bleibt dabei erhalten.