Dokumentation

Schnellstart

  1. Script einbinden:
    <script src="Rizo-CMS.js"></script>
  2. Elemente markieren:
    <h1 data-editable="mein-titel">Titel</h1>
  3. Edit-Modus aktivieren:

    Drücke ALT + E

Attribute

data-editable

Markiert ein Element als editierbar. Der Wert ist ein eindeutiger Name.

<p data-editable="intro-text">Editierbarer Text</p>

data-editable-type

Definiert den Typ des editierbaren Elements. Standard ist "text".

TypBeschreibung
textStandard-Textbearbeitung
htmlRich-Text mit HTML
imageBild-Upload via File-Picker
linkLink-Bearbeitung

Tastenkürzel

ALT + EEdit-Modus ein/ausschalten
ESCEdit-Modus beenden / Modal schließen

SEO-Analyse

Das Inline CMS beinhaltet einen integrierten SEO-Analyzer, der dir hilft, deine Inhalte zu optimieren:

Lesbarkeit

Flesch-Reading-Ease Score, Wörter pro Satz

Keyword-Analyse

Top Keywords mit Häufigkeit und Dichte

Überschriften-Struktur

H1/H2/H3 Hierarchie-Check

Meta-Tags

Title, Description, OG-Tags Optimierung

Vollständiges Beispiel

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Meine Webseite</title>
  <meta name="description" content="Beschreibung">
</head>
<body>
  <header>
    <h1 data-editable="site-title">Willkommen</h1>
  </header>
  
  <main>
    <section>
      <h2 data-editable="section-title">Über uns</h2>
      <p data-editable="section-text">
        Hier steht ein editierbarer Text.
      </p>
      <img 
        data-editable="hero-image" 
        data-editable-type="image" 
        src="bild.jpg" 
        alt="Hero Bild"
      />
    </section>
  </main>
  
  <footer>
    <p data-editable="footer-text">© 2025</p>
  </footer>

  <script src="Rizo-CMS.js"></script>
</body>
</html>

Noch Fragen?

Schau dir unsere FAQ an für weitere Informationen.

Zur FAQ-Seite
custom cursor